[devnexus 2022] ARIA: A grande method of accessible markup

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.

Leave a Reply

Your email address will not be published.