ARIA

Quick guide to the ARIA specifications

ARIA (Accessible Rich Internet Applications) is a suite of specifications from the W3C. Knowing which specification has the information you need isn’t always obvious, so this post briefly introduces each specification and where it fits into the overall ARIA landscape.

Using the aria-current attribute

It is common on the web for the current thing in a collection to be highlighted visually, but providing an alternative for screen reader users has often involved something of a hack. The aria-current attribute is intended to solve this problem.

Accessible emoji

Emoji help us communicate complex ideas very easily. When used in native apps and applications, emoji are reasonably accessible to screen readers, but on the web we need to do a little more to make sure everyone can understand emoji.

Proposed ARIA password role

Let me ask you a question: Would you enter your password into a password field, if you couldn’t be confident it was protected from being viewed by other people? The answer is probably not, but a proposed ARIA role could put screen reader users in exactly this position.

Using the ARIA application role

Traduction française The ARIA application role changes the way screen readers interact with web content. Several good articles explain (rightly) why the application role should be used with caution, but this post looks at a use case where the application role is used to good effect.

Flexbox & the keyboard navigation disconnect

CSS Flexbox can create a disconnect between the DOM order and visual presentation of content, causing keyboard navigation to break. For this reason, the CSS Flexible Box Layout module warns against resequencing content logic, but asking authors not to use flexbox in this way seems illogical in itself.