Speaker: Chris DeMars

Twitter: @saltnburnem

Link to table of contents

———————

General

• low vision vs no vision
• some types can be corrected and some cannot
• memory problems included
• Think about: hearing, visual, cognitive, movement and temporary
• 1 billion people around the world have some type of disability
• People don’t have to disclose they have a disability. Assume 20-25% do.

What is accessibility?

• numeronym: a11y == accessibility
• w3c – “people with disabilities can use the web”. better to say everyone can use the web
• Don’t use accessibility overlays. [looked online – hack to use tool to patch bad accessbility]

ARIA

• Accessible rich internet applications
• Helps AT (assisted technology) with web pages
• One rule: don’t use ARIA. Better to use semantic markup.
• Stop using divs/spans unless have to. No semantic meaning. Better to be using header/nav/etc tags (vs h1/h2/etc heading level)
• Anchor links for navigation only
• When have to use div/span, add ARIA

Roles

• abstract – command, input, landmark, select, structure, widget, etc
• widget – button, link, option, radio, tab, textbox, etc
• document structure – article, directory, figure, img, table, tooltip, etc
• landmark – banner, contentinfo, form, main, navigation, search
• live region (auto updating section) – alert, log, marquee, status, timer

States and Properties

• States and Properties
• describe what is happening
• aria-describedby – if need to write a lot about what an image does
• aria-haspopup
• aria-label
• aria-labeledby
• aria-checked
• aira-disabled
• aira-required
• etc

WAI/ARIA

• Want to get to level AA.
• Bank of America, Dominos, Red Roof In got sued for not meeting
• Only get to AAA if in academia or government. Expensive. Ex: need closed captioning, ASL video, downloadable transcript, VPAS?
• Want to get to level AA.
• Bank of America, Dominos, Red Roof In got sued for not meeting
• Only get to AAA if in academia or government. Expensive. Ex: need closed captioning, ASL video, downloadable transcript, VPAS?

Other notes

• Don’t set outline to 0/none for focus. User needs that
• https://caniuse.com
• https://gist.github.com/chrisdemars/e8ca7a5282ab65ea2f412776a7cf0aa3

My take

The intro was good to pull me in. As were the examples of why to use semantic tags where can. The actual ARIA info felt a little like an info dump. I would have liked examples on a web page to see what these are/how they work. Or what the code looks like. Some was said out loud which helped. ARIA has changed a lot since I last used it. (so have front ends overall). The references to old tags like blink were fun.