Important Bits

Feb 2019 A11yTO meetup

  1. Use native html elements the right way, and no aria labels will be needed. Why are you labeling that thing that isn’t a look as a link? Use a link!

  2. Don’t change existing semantics. Don’t turn headings into not-headings

When to aria? When HTML can’t do it. Modal elements, tabs, custom dropdowns

Landmarks - you get this with semantic html, but if you need to, role=navigation, role=banner

Roles - wanna play god and make a span be treated like a button? role=button gets you part way there… But not all the way. Still need to manage focus and keyboard navigation. Role is only for assistive technology (at) only. High contrast mode? Your css is stripped and your fake button looks like a span again

Role=presentation can help with table layouts so AT doesn’t treat the table as data.

Aria-describedby let’s you associate help text in forms so it isn’t tabbed over, aria-required=true can prevent empty fields from announcing errors the first time they are focused and are empty

Making a modal? You might need 4 or 5 attribtues to make it accessible.

Live regions for parts of the screen that update automatically - chat logs, stock tickers. Aria-live=“polite” or aria-live=assertive, also aria-atomic and aria-relevant

Adam Sullovey

Written by Adam Sullovey, powered by Gatsby.
Find me on codepen, github, or at Toronto meetups.