ARIA Made Easy

Date: 
Wednesday, May 13, 2015

Announcements

UA Web Branding: The group will not meeting this Friday but will meet again starting May 22.

Presentation: ARIA Made Easy

Presenter: Jeff Bishop - IT accessibility analyst for the Disability Resources Center and previously with UITS.

The presentation followed the ARIA Made Easy page on itaccess.arizona.edu (also available at the alias itaccessibility.arizona.edu).

Additional notes:

All modern web browsers have some support for ARIA. There can be differences though between different browsers and screen readers. Developers should follow best practice and code to the standards, not for browser idiosyncrasies.

ARIA roles are part of the HTML5 specification so you can validate against that. If you validate against HTML4 it will show there are errors but as long as the ARIA is valid it will still work and be understood by screen readers.

For forms use fieldsets and legends for groups of checkboxes or radio buttons along with labels for the individual controls. (This an example of where standard HTML markup is sufficient and ARIA is not needed.)

Required form fields

  • Asterisks as an indicator of required fields may not be read by screen reader
  • It’s not necessary to add aria-required if using HTML5 required attribute.
  • Form validation errors should be both described in text and marked up with the aria-invalid=”true” attribute.

Aria roles application, alert, and live regions are very complex and could be the topic of an entire presentation.

Testing

The JAWS license doesn’t allow testing and the software is very expensive. Free options:

  • NVDA (is really good, you are encouraged to use it)
  • Window-Eyes is free if you have Office.
  • Apple VoiceOver on Mac/iPad/iPhone.
  • Android is way behind. Chrome on Android is not fully accessible; use FireFox w/ Android TalkBack

Questions:

Q: Web pages like directories often have repeated links, e.g. “more info”. What’s the best way to handle these?
A: You could use aria label but it would be better to find a way to handle it without using aria.

Q: What happens if the label tag and the aria-label are conflicting?
A: Aria-label will win for screen readers. ARIA will always be used by screen readers if there is a conflict.