Skip to end of metadata
Go to start of metadata



Beyond alt text and headings

Paul Anderson

Show Show   Show Show   Hide inline

ARIA on is

  • an on demand accessible book repository
  • for people with qualifying "print disabilities" (visual, physical, learning.)

Slides available at

Accessibility basics

HTML has always had a bare minimum for non-visual content support.

  • descriptive alt text for images
  • <label> elements for form inputs in sensible tab order
  • <legend> elements for form field sets
  • Elements for intended purpose: <table> for tabular data, <dl> for lists
  • HTML source in a sensible linear order

These still apply, especially for older AT software and devices.

HTML5 basics

The structure of an HTML5 page is less ambiguous and can be navigated to suit the user.

  • page: <header> <footer> <nav>
  • content: <article> <section> <aside>
  • media: <video> more informative than <object>

Enough platforms support HTML5 to help almost everyone with little effort.

ARIA markup

Modern assistive technology supports ARIA attributes that tell assistive technology how XHTML elements should be understood.

  • role for purpose: progressbar, directory, banner
  • aria-x for states and properties: aria-disabled, aria-required, aria-relevant

This provides alternatives to worrying about source order or tricking the AT into re-scanning. Actual implementation can be specific ("progressbar") or subjective ("relevant.")

Messaging alerts

The standard blue message box for a successful update has role "status" and assertive voice to prioritize voicing it when the page loads.

<div id="requestScopeAlerts"
     role="status" aria-live="assertive">
Your subscription has been renewed through May 30, 2016

Messaging alerts

The yellow and red warning alerts have the role "alert" to signal that the information requires attention.

<div id="requestScopeAlerts"
     role="alert" aria-live="assertive">
Your subscription will expire on May 30, 2015

Content "visibility"

Setting aria-hidden true or false makes a dynamic element and its contents absent or present in a screen reader.

<div id="myDiv" style="display:none;" aria-hidden="true">
var showDiv = isDivNeeded();
$("#myDiv").toggle(showDiv).attr("aria-hidden", !showDiv);
// jQuery lets you chain methods on DOM nodes

Content "visibility"

Purely visual elements use aria-hidden so screen readers don't bother interpreting them. For example, the icon <span> tags in our social media links.

<a href=""
   title="Like us on Facebook"
   aria-label="Like us on Facebook">
    <!-- purely visible icon within AT-friendly link -->
    <span class="facebookIcon" aria-hidden="true"></span>

Note that aria-label overrides the ambiguity of title.

Content substitution

We also use aria-label to override text that only makes sense visually.

Password: <span aria-label="(private)">********</span>
Promo code: <span aria-label="none">&mdash;</span>

Significantly aria-label adds a label that's exclusive to screen readers.

Form error messages

When a submitted form has a field error, we display an error message with that input.
Visually, the error makes sense after (below or left of) the input.

<label for="firstName">First name</label>
<input id="firstName" type="text" value="12345"/>
<span class="error">Your name should not be a number</span>

On a screen reader this text is easily missed and has no clear correlation.

Form error messages

The aria-describedby attribute makes the input "described by" the error message, which gets an assertive voice.

<label for="firstName">First name</label>
<input id="firstName" type="text" value="12345"
<span class="error" id="error-firstName" aria-live="assertive">
    Your name should not be a number

The error is voiced when the screen reader navigates to the input.

Form annotations

ARIA labeling can also connect a single error message with an entire fieldset.

<fieldset id="categories" aria-labelledby="error-categories">
  <input name="categories" value="Fiction"/>
  <input name="categories" value="History"/>
  <input name="categories" value="Erotica"/>
  <span id="error-categories" aria-live="assertive">
    Please check at least one category.

Pop up help

Our popup help dialogs use an aria role and labelling.

<div id="cluetip" aria-role="tooltip" aria-labelledby="cluetip-title">
  <h3 id="cluetip-title">
    What Collection Should I Choose?

(This is an extremely simplified version.)

Limits of ARIA help

ARIA attributes can't help an arbitrarily visual design.

  <a href="/myBookshare">My Bookshare</a> <!-- menu link -->
  <a href="#" id="toggleMenu"><img/></a> <!-- submenu toggle link -->
  <a href="/bookHistory">My History</a> <!-- submenu link -->
  <a href="/myAccount">My Account</a> <!-- submenu link -->

That "toggle link" only exists to organize visual space and makes no sense in a non-visual experience.

Sufficiently almost perfect

ARIA usually has a role that is usually supported

  • Recognize purely visual cues
  • Assign roles and relationships
  • Eliminate ambiguity
  • End up with unexpectedly better code
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.