What is WAI-ARIA?

WAI:

Web Accessibility Initiative

ARIA:

Accessible Rich Internet Application

The Roles Model

Defines ways to make web content more accessible to persons with disabilities.

Example of an ARIA Role

<span role="checkbox" aria-checked="true"> </span>

Rules of ARIA use:

Elements can only have one role.

Choose the one that best represents what that element does.

In other words: A button can't be both a header and navigation. Pick one.

Use a native semantic HTML element or attribute if available instead of re-purposing an element and adding an ARIA role.

HTML5 has semantic tags for exactly this purpose that are built with implicit ARIA roles behind the scenes. Don't make things harder on yourself or a screen reader.

bad: <h1 role=button>heading button</h1>

If you must, use a nested element:

good: <h1><button>heading button</button></h1>

More Obscure Semantic HTML5 Elements

<q></q> : inline quoted text

<time></time> : date or specific time

<cite></cite> : reference to a cited book, play, etc

<input type="email"></input> : specific type of input field

<figcaption></figcaption> : detailed caption on an image

<code></code> : code snippet

<aside></aside> : chunk of text that isn't the primary focus of the page

<article></article> : small subsection of content

<abbr></abbr> : abbreviation

Semantic HTML5 Elements
All interactive ARIA controls must be usable with the keyboard.

If you write your own widget that is clickable or pressable on a mobile device it must also be navigable via keyboard commands with focus/active etc.

Do not use role="presentation" or aria-hidden="true" on a visible focusable element.

This will result in a thing NOT being visible or focusable for readers, only use this if the element is already hidden
(ie { display: none })

All interactive elements must have an accessible name.

bad: <label>user name</label> <input type="text">

good: <label for="user-name">user name</label> <input type="text" id="user-name">

(Apparently 5th Rule is a “work in progress") Example Of How This Works
Note: Adding an ARIA role does not change the behavior or appearance of an element for people NOT using assistive technologies
Another Word On:

Semantic HTML

  • Elements such as <nav>, <button>, <header>, <aside> when read aloud help clarify what part of the html page someone is focused on.
  • These elements have default implicit ARIA roles.
  • Example: <nav></nav> tags have an implicit role="navigation".
    Keep an eye on these so you can avoid writing redundant code.

Alt Tags!

Hugely important and easy to use on images. Be verbose.

bad: <img src="mountain.jpg" alt="mountain" />

good: <img src="mountain.jpg" alt="The cascade mountains at sunset in January" />

TABLE FOR WHAT ELEMENTS HAVE IMPLICIT ROLES

ARIA Roles & Examples

role="img"

container for collection of elements that form an image

ie: can contain captions and descriptive text, or other stuff.

Example of role="img"

<figure role="img" aria-labelledby="fish-caption">
      o           .'`/
      '      /  (
      O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
      '-._  _ .-'       '.)
      jgs     `\__\
    
<figcaption id="fish-caption"> Joan G. Stark, "<cite>fish</cite>". October 1997. ASCII on electrons. 28×8. </figcaption> </figure>

Without the use of ARIA roles and properties AT's (Accessibility Tool) would read off each element of the fish, which is clearly not helpful for the user.

role='search'

collection of items and elements that collectively allow for search functionality

<form action="/" method="get" role="search"> <label for="search-field">Search:</label> <input type="search" id="search-field"> <input type="submit"> </form>
role='region'

an important section of content that users will want to quickly navigate to.

note: <section> elements have an implicit role of "region" <div role="region">This is important content"</div>
role='presentation'

element whose purpose isn't relevant to the page and will not be visible

ie: decorative patterns or images

<div role='presentation'><img src='decorative-floral-thing.png' role='presentation'/><img src='flower.png'/></div>
role='checkbox'

checkable input that can be true (checked) false (unchecked) or mixed (a group of the two options)

<span role="checkbox" aria-checked="true"></span>
role='banner'

site-oriented content like a large logo or header image, typically spans the whole page

<header role="banner">Welcome</header>
role='button'

element that causes user triggered actions when clicked

<div role="button">Click Me</div>
role='contentinfo'

element that contains information about the parent document or section

commonly copyright - should be treated as navigational landmarks (there should be only one per page)

<div role="contentinfo">Copyright &copy; Jane Doe, Turing School of Software and Design</div>
role='alert'

message with important information

<div role="alert">Please download a new version of this software.</div>
role='term'

element that identifies a term to be defined

<div role="term" id="hypertension-term">hypertension</div>
role='definition'

definition of previously specified "term" element

should include the ARIA attribute aria-labelledby

<div role="definition" aria-labelledby="hypertension-term">high blood pressure</div>

ARIA Attributes

added to HTML like roles, but they serve a different purpose

ie: <div role="definition" aria-labelledby="term">definition of term</div>

aria-checked="true"

On an element meant to look like a checkbox, with the box checked, that doesn't already have a semantic HTML checkbox around it.

<span role="checkbox" aria-checked="true"></span>
aria-label="close"

When there isn’t a label for an element to specify what it is or does

ie: The button looks like a typical close button, but an AT would read only the "X" which is unclear. The label describes what happens with the button is clicked.

<button aria-label="Close" onclick="myDialog.close()">X</button>
aria-labelledby="elementID"

contains the ID of the element the group is focused on or needs to be associated with

<figure aria-labelledby="mountain" role="group">
<img src="mountain.jpg" alt="The cascade mountains at sunset in January"/>
<figcaption id="mountain">I climbed the Cascades on <time datetime="2016-01-01 24:00">New Years Eve</time></figcaption>
</figure>

YOUR TURN

Take the following HTML snippet and make it accessible using explicit semantic HTML, ARIA roles, and attributes. .
Exercise

Example Solution

Exercise Solution

Homework: Make your portoflio Accessible.

Resources:

HTML Nu Validator : https://validator.w3.org/nu
Table of Elements with Implicit ARIA Roles: https://www.w3.org/TR/html-aria/#docconformance
HTML5 Elements: https://www.w3.org/TR/html-markup/elements.html
How to use Aria Effectively : https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/
HTML Accessibility Task Force http://www.w3.org/WAI/PF/html-task-force
HTML Quiz: https://www.sitepoint.com/10-typical-html-interview-exercises/