Quick Review

  • There are 3 billion (and counting) people using the internet.
  • In America alone there are 57 million Americans with a disability (2012)
  • 19.9 Million (8.2%) have difficulty lifting or grasping. This could, for example impact their use of a mouse or keyboard.
  • 15.2 Million (6.3%) have a cognitive, mental, or emotional impairment.
  • 8.1 Million (3.3%) have a vision impairment. These people might rely on a screen magnifier or a screen reader, or might have a form of color blindness.
  • 7.6 Million (3.1%) have a hearing impairment. They might rely on transcripts and / or captions for audio and video media.
  • What is WAI-ARIA?


    Web Accessibility Initiative


    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" />


    ARIA Roles & Examples


    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.


    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>

    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>

    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>

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

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

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

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

    element that causes user triggered actions when clicked

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

    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>

    message with important information

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

    element that identifies a term to be defined

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

    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>


    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>

    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>

    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>

    Aria Roles, States and Properties

    list of aria roles list of aria states and properties


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

    Example Solution

    Exercise Solution

    Homework: Make your portoflio Accessible.


    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/