Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

ARIA in CSS

• Jeremy Keith writes about a technique (prompted by Sara Soueidan) that ‘forces’ you to create accessible experiences. You can use ARIA attributes as CSS hooks to ensure your component only looks/functions properly if said attributes are used in the HTML.
• Consider this CSS: aria-hidden['true'] { display: none }. It ensures you’re properly hiding content from both sighted and screen-reader users; the aria-hidden hides from the screen readers, and the display: none hides from sighted users*.
• *Jeremy seems to imply that display: none doesn’t hide content from screen reader users, which would indeed make this approach really clever. But display: none does hide from screen readers, so I think there’s been a misunderstanding somewhere. However, I still think the ARIA-in-CSS approach is more semantic, and could be marginally beneficial…
• Imagine if your CSS fails to load for some reason. With ARIA-in-CSS, at least screen reader users will still ignore the content. If you’d used a class instead (.hide { display: none }), then a CSS load failure would be a broken experience for everybody.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.