PLANET-5257 "Teasers" accessibility - Githubissues

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

66 stars 27 forks source link

PLANET-5257 "Teasers" accessibility #114

Closed planet-4 closed 3 years ago

planet-4 commented 3 years ago

Teasers are those blocks that show a preview of the post, like the list of posts in the Articles Block or the different twig templates in master-theme repo starting with tease-.

Make sure the mid dot chars and number sign of the hashtags are not read aloud, this might already be done (check the Post Type & Hashtags ticket and the Articles Accessibility ticket).
Then for the rest of the content there, make sure the date, author and other metadata are read as a single piece of text, and with no special characters read aloud. aria-hidden and role=text will come handy for this.

Screenshots

Screenshot

Reporter: pcuadrad
Sections:

Potentially affected repositories: planet4-plugin-gutenberg-blocks, planet4-master-theme

Testing

You can add the Articles block to a page and test it with a screen reader, the block should also already be present on your local homepage so you can check that too. You can read the docs for more details on how the block works.
For the other teasers, you can check your local search page

DanceParty commented 3 years ago

Grabbing this one (not able to assign myself)

comzeradd commented 3 years ago

Thank you! 💚 Let us know if something is not clear in the ticket description.

DanceParty commented 3 years ago

One of the confusing things is around the bullets. The bullets are pseudo elements generated in the css. I don't believe there is a way to hide these type of elements from the screenreader unless I write them in the jsx. I can move forward with that if that is okay. Just wanted to make sure I wasn't missing anything

comzeradd commented 3 years ago

You are right, css pseudo elements are hard to hide from screen readers. But indeed, we could just add that bullet as a regular <span> in the jsx template so we can use the appropriate markup to "hide it" from screen readers.

DanceParty commented 3 years ago

Awesome! Just wanted to make sure that would be the correct approach here. Thanks, hopefully I'll have a PR by end of week :)

DanceParty commented 3 years ago

Finally getting around to this, it seems like the "#" is currently read aloud as "hashtag". My understanding of this issue is that we don't want to read "pound sign" or "number sign", but I feel that "hashtag" is appropriate here and I will probably leave it.

DanceParty commented 3 years ago

Alright PRs opened, thanks for the patience and would appreciate some feedback whenever you have the chance @comzeradd 🙇

IlBrizzo commented 3 years ago

Thank you so much for your help @DanceParty ! We made sure your awesome work is acknowledged in the release note this ticket was part of, it's not a bestseller credit, but it's the least we could do!

Rock on 🤘

suzi-greenpeace commented 3 years ago

yay thanks @DanceParty !