Accessibility improvements about lettering.js HOT 5 CLOSED

Working demo: http://codepen.io/davatron5000/full/pxoKf

Uses aria-hidden="true" to hide content. aria-role="presentation" seems like it would be more ideal/semantic, but was designed to read child elements with no semantic value.

Downsides: Duplicates DOM nodes could have SEO impact. Ideally, ARIA would provide a way for semantic elements that are aria-hidden to have an accessible fallback using something like aria-label or aria-describedby.

from lettering.js.

@davatron5000 aria-hidden="true" is sort of well supported, and seems like the best solution here, but you might be able to use the aria-label attribute on the parent element here.

Alternate demo

from lettering.js.

Either way, it make for a much better experience when using Assistive Technology. I think the little amount of SEO impact you would have would be so small, that @davatron5000's solution would be worth it.

from lettering.js.

@bassettsj WOOO. GREAT. I forked your pen b/c it wasn't working for me, but this looks like an infinitely better way to do this.

With mine, I was hesitant about duplicating content, but your way preserves it all. I was also hesitant about breaking the Document Outline, but running it through VoiceOver & ChromeVox makes me think it'll hold together nicely. Wonderful work.

If you want to put together a commit and get the credit, I'll merge it in.

from lettering.js.

Accessibility improvements were merged in and are apart of the 0.7.0 release. Hooray! Thanks everyone who helped out on this. Means a lot and solves a somewhat shameful problem I've had for a long long time.

🎆 🏆 👯

from lettering.js.