Adding accessibility to your site with WAI-ARIA

The aim of WAI-ARIA is principally to solve the problem of making dynamic content on a page accessible. It provides a means of describing roles, states, and properties for custom widgets (dynamic sections in web applications) so that they are recognizable and usable by assistive technology users.

For example, if an onscreen widget displays a constantly updating stock price, how would a blind user accessing the page know that? WAI-ARIA attempts to solve this problem. Fully implementing ARIA is outside the scope of this book (for full information, head over to http://www.w3.org/WAI/intro/aria). However, there are some very easy to implement parts of ARIA that we can adopt to enhance any site written in HTML5 for users of assistive technologies.

If you're tasked with building a website for a client, there often isn't any time/money set aside for adding accessibility support beyond the basics (sadly, it's often given no thought at all). However, we can use ARIA's landmark roles to fix some of the glaring shortfalls in HTML's semantics and allow screen readers that support WAI-ARIA to switch between different screen regions easily.

ARIA's landmark roles

Implementing ARIA's landmark roles isn't specific to a responsive web design. However, as it's relatively simple to add partial support (that also validates as HTML5 with no further effort), there seems little point in leaving it out of any web page you write in HTML5 from this day onwards. Enough talk! Now let's see how it works.

Consider our new HTML5 navigation area:

<nav>
  <ul>
    <li><a href="#">Why?</a></li>
    <li><a href="#">Synopsis</a></li>
    <li><a href="#">Stills/Photos</a></li>
    <li><a href="#">Videos/clips</a></li>
    <li><a href="#">Quotes</a></li>
    <li><a href="#">Quiz</a></li>
  </ul>
</nav>

We can make this area easy for a WAI-ARIA capable screen reader to jump to by adding a landmark role attribute to it, as shown in the following code snippet:

<nav role="navigation">
  <ul>
    <li><a href="#">Why?</a></li>
    <li><a href="#">Synopsis</a></li>
    <li><a href="#">Stills/Photos</a></li>
    <li><a href="#">Videos/clips</a></li>
    <li><a href="#">Quotes</a></li>
    <li><a href="#">Quiz</a></li>
  </ul>
</nav>

How easy is that? There are landmark roles for the following parts of a document's structure:

  • application: This role is used to specify a region used for a web application.
  • banner: This role is used to specify a sitewide (rather than document specific) area. The header and logo of a site, for example.
  • complementary: This role is used to specify an area complementary to the main section of a page. In our And the winner isn't... site, the UNSUNGHEROES and OVERHYPEDNONSENSE areas would be considered complementary.
  • contentinfo: This role should be used for information about the main content. For example, to display copyright information at the footer of a page.
  • form: You guessed it, a form! However, note that if the form in question is a search form, use the search role, instead.
  • main: This role is used to specify the main content of the page.
  • navigation: This role is used to specify navigation links for the current document or related documents.
  • search: This role is used to define an area that performs a search.

Note

Taking ARIA further

ARIA isn't limited to landmark roles only. To take things further, a full list of the roles and a succinct description of their usage suitability is available at http://www.w3.org/TR/wai-aria/roles#role_definitions

Let's skip ahead and extend our current HTML5 version of the And the winner isn't... markup with the relevant ARIA landmark roles:

<body>
<div id="wrapper">
  <!-- the header and navigation -->
  <header role="banner">
    <div id="logo">And the winner is<span>n't...</span></div>
    <nav role="navigation">
      <ul>

        <li><a href="#">Why?</a></li>
        <li><a href="#">Synopsis</a></li>
        <li><a href="#">Stills/Photos</a></li>
        <li><a href="#">Videos/clips</a></li>
        <li><a href="#">Quotes</a></li>
        <li><a href="#">Quiz</a></li>
      </ul>
    </nav>  
  </header>
  <!-- the content -->
  <div id="content" role="main">
    <img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
    <h1>Every year <em>when I watch the Oscars I'm annoyed…</em></h1>
    <p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p><i>We're here to put things right.</i></p>
  <a href="#">these should have won &raquo;</a>  
  </div>
  <!-- the sidebar -->
  <aside>
    <section role="complementary">
      <div class="sideBlock unSung">
        <h1>Unsung heroes...</h1>
        <a href="#"><img src="img/midnightRun.jpg" alt="Midnight Run" /></a>
        <a href="#"><img class="sideImage" src="img/wyattEarp.jpg" alt="Wyatt Earp" /></a>
      </div>
    </section>
    <section role="complementary">
      <div class="sideBlock overHyped">
        <h1>Overhyped nonsense...</h1>
        <a href="#"><img src="img/moulinRouge.jpg" alt="Moulin Rouge" /></a>
        <a href="#"><img src="img/kingKong.jpg" alt="King Kong" /></a>
      </div>
    </section>
  </aside>
  <!-- the footer -->
  <footer role="contentinfo">
    <p>Note: our opinion is absolutely correct. You are wrong, even if you think you are right. That's a fact. Deal with it.</p>
  </footer>

</div>
</body>

Note

Test your designs for free with NonVisual Desktop Access (NVDA)

If you develop on the Windows platform and you'd like to test your ARIA enhanced designs on a screen reader, you can do so for free with NVDA. You can get it at the following URL:

http://www.nvda-project.org/

Hopefully, this brief introduction to WAI-ARIA has demonstrated how easy it is to add partial support for those using assistive technology and you'll consider enhancing your next HTML5 project with it.

Tip

Styling ARIA roles

Like any attributes, it's possible to style them directly using the attribute selector. For example, you can add a CSS rule to the navigation role using nav[role="navigation"] {}.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.146.107.89