search

greenpeace / planet4

Built on top of Wordpress tech, Greenpeace Planet 4 powers digital platforms to engage with millions and win campaigns around the world.
https://planet4.greenpeace.org
Creative Commons Attribution Share Alike 4.0 International
67 stars 27 forks source link

PLANET-5229 Hashtags Accessibility #71

Closed comzeradd closed 4 years ago

comzeradd commented 4 years ago

Brief summary of task:

Improve a11y of tags markup

Objectives of task:

A hashtag like #Consumption is read aloud as follows:

"number sign consumption"

Maybe we can wrap the number sign into a something like:

<span class="hashtag" role="text">
  <span class="sr-only">Hashtag</span>
  <span aria-hidden="true">#</span>
  Consumption
</span>

To make sure it reads as "Hashtag Consumption", instead of "Number sign consumption". Maybe we can even skip the "Hashtag" part and just hide the number sign to the SR.

Hashtags are also recommended to be CamelCase (e.g.: "#ClimateChange" instead of "#climatechange"), so maybe we should add some warnings in the editor to make sure content creators make the hashtags accessible.