[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.

intro to web accessibility

Someone asked me what someone should know/read as a crash course on web accessibility.  This seemed like too good a question not to blog about so he can read the answer here!

There are three main areas of web accessibility:

  1. W3C’s WAI (web accessibility initiative) has WCAG 2 (Web content accessibility guidelines) which are summarized on one page.  There’s a lot more to it than the one page, but it does represent the spirit.
  2. WAI also has ARIA (accessibility rich internet applications).  This is my favorite description.  Mozilla also has a good guide as does Opera.  In a nutshell, ARIA solves the problem of “how does a blind user know something on the page has changed.”  With AJAX and even DHTML, just because you made something available isn’t enough.  Be forewarned that older browsers have lousy ARIA support if any at all.
  3. Section 508 is in the same space as WAI except for government website.  It is part of the American with Disabilities Act.  It is more specific in some ways than WAI.  If you aren’t working on a government website, I’d focus on WAI.  Note that Section 508 is an OLD law and in theory they are working on a refresh.  I say in theory because I haven’t seen updates in a while.  There is a mapping in section 1194.22 between Section 5098 and the WCAG 1.0 guidelines.  Yes, 1.0.  Did I mention that Section 508 is old?  The government has free training.

The least you need to know for testing:

  • Make sure your application works without using a mouse.  Seriously, actually navigate your application without a mouse.  (Remember tab changes fields and space selects a checkbox.)  If it isn’t possible to use the application without the mouse, you have failed accessibility miserably.
  • Make sure you aren’t using color alone to convey information. Blind people will be using a screenreader and need alternate textual ways to derive this info. Colorblind can’t see the difference between red and green and won’t be using a screenreader so won’t see your alternate text.
  • Until you are REALLY familiar with how text only navigation works, use a screenreader emulator like the Fangs Firefox plugin and/or turn off stylesheets to see what your page looks like.
  • If you can afford a license for Jaws, it is helpful in testing that your application is accessible in practice and not just theory.

The least you need to know for coding:

  • For any image that conveys information, have an alt attribute.
  • Use form labels for all form elements so a screenreader can read what the form element is all about.
  • Use row and or column headers for all data tables so a screenreader can provide assistive text on where the user is in the table.  (And for the love pete, don’t complicate things with the navigation tables of the 90s)
  • I recommend automation to ensure you KEEP compliant.  It’s a pain to test this all once manually.  You don’t want to have to make sure the new person on your team remembered his/her alts.
  • Watch how you use JavaScript: Remember we need to work without a mouse.  That means an onchange handler in a pull down is the path to madness.  I want the fifth element so I tab to the field, choose the second, watch the page refresh, tab to the field again, choose the third, watch the page refresh and then decide never to do business with you again.
  • Some JavaScript libraries have accessible widgets.