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.