search

djrrb / Bungee

A chromatic signage typeface for vertical and horizontal setting.
https://djr.com/bungee
SIL Open Font License 1.1
336 stars 42 forks source link

Chromatic technique announced twice (or more) in screen readers #57

Closed aardrian closed 8 years ago

aardrian commented 8 years ago

The technique you use to layer chromatic fonts relies on ::before, which screen readers now recognize (and speak). As a result, when I visit https://djr.com/bungee/ (as an example), my screen reader will announce any layered text twice (three times if you use both ::before and ::after).

That is a technique I championed for a while, but I just recently developed a technique to retain what you want to achieve, make it easy for authors (who use a WYSIWYG, for example) to use, and retains accessibility without being verbose for screen readers.

I am happy to contribute some code, but first I thought you might want to review the technique and see if it is a fit for you: http://adrianroselli.com/2016/05/chromatic-web-fonts-redux.html

If not, then just consider this a bug report.

ghost commented 8 years ago

What a coincidence, I just updated our JS/CSS resources to remove those extra "echoes" using a technique similar to yours, in #55. You're right that the headings on the Bungee website do use ::before and ::after, but that is not our official recommendation per se. So I'm going to mark this as a duplicate of #55 but feel free to reopen it if you think there are more issues.

aardrian commented 8 years ago

Damn. I suck at searching for similar issues.

Do you have a URL with a test page where I can give it a spin?

ghost commented 8 years ago

You could try the tester section of the Bungee site, or the barest-possible bones page I use for simple tests.

aardrian commented 8 years ago

Yep. Works great in NVDA! Thanks for humoring me.

If you take a look at my code approach and have any questions, please let me know. I am happy to discuss it.