Web Accessibility Essentials using WAI-ARIA and HTML5

Eric Eggert, W3C/WAI

Web Accessibility Essentials using WAI-ARIA and HTML5

Eric Eggert, W3C/WAI

Eric Eggert

Web Accessibility Tutorials

w3.org/WAI/tutorials/

Audiences

HTML5

WAI-ARIA Accessible Rich Internet Applications

WAI-ARIA

Using WAI-ARIA in HTML

Rules of ARIA use

  1. If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, […] then do so.
  2. Do not change native semantics, unless you really have to.
  3. All interactive ARIA controls must be usable with the keyboard.
  4. Do not use role="presentation" or aria-hidden="true" on a visible focusable element
  5. All interactive elements must have an accessible name.

WAI-ARIA 1.0 Authoring Practices

HTML5 & ARIA for Page Stucture

Page Header

<header>
  <img src="/images/logo.png" alt="SpaceBear Inc.">
</header>

Page Footer

<footer>
  <p>&copy; 2014 SpaceBears Inc.</p>
</footer>

Navigation 1

Navigation 2

<nav aria-label="Main Navigation">
  …
</nav>
…
<nav aria-labelledby="quicknav-heading">
  <h5 id="quicknav-heading">
      Quick Navigation
  </h5>
  …
</nav>

Main Content

<main>
  <h1>Stellar launch weekend for the SpaceBear 7!</h1>
  …
</main>

Complementary content

<aside>
  <h3>Related Articles</h3>
  …
</aside>

Search tool

<form action="…">
  <div role="search">
    <input type="search" aria-label="Search">
    <button type="submit">Search</button>
  </div>
</form>

In-page regions

Sections

<section>
  <h2>Chapter 2</h2>
  …
</section>

Articles 1

Articles 2

<article>
  <h2>Space Bear Classic</h2>
  …
</article>
<article>
  <h2>Space Bear Extrem</h2>
  …
</article>

Menus

<ul>
	  <li><a href="…">Home</a></li>
	  <li><a href="…">Shop</a></li>
	  <li><a href="…">SpaceBears</a></li>
	  <li><a href="…">MarsCars</a></li>
	  <li><a href="…">Contact</a></li>
	  …
</ul>

Application Menus

Important ARIA attributes:

Important!

ARIA does not change input methods or how the website works. Every keyboard interation needs to be replicated by the programmer to match native use.

Code Samples

		<div role="menubar">
	<ul role="menu" aria-label="functions" id="appmenu">
		<li role="menuitem" aria-haspopup="true">File
			<ul role="menu">
				<li role="menuitem">New</li>
				<li role="menuitem">Open</li>
				<li role="menuitem">Print</li>
			</ul>
		</li>
		…
	</ul>
</div>

Key mapping for top-level items

Key Action
tab ⇥, right → Select the next top-level menu item
shift ⇧ + tab ⇥, left ← Select the previous top-level menu item
return/enter ↵, space, down ↓ Open the submenu, select first submenu item.
up ↑ Open the submenu, select last submenu item.
esc Leave the menu

Key mapping for submenu items 1

Key Action
tab ⇥, right →, Close the submenu, select the next top-level menu item
shift ⇧ + tab ⇥, left ← Close the submenu, select the previous top-level menu item
return/enter ↵, space Carry out function of this item. (In this example: bring up a dialog box with the text of the chosen menu item.)

Key mapping for submenu items 2

Key Action
down ↓ Select next submenu item
up ↑ Select previous submenu item
esc Close the submenu, select the current top-level menu item

Demo

Carousels

Label the carousel

				<div class="carousel" role="region" aria-label="Recent news">
  …
</div>

Announce carousel content

			if (announceSlide) {
        slides[new_current].setAttribute('aria-live', 'polite');
    	}

Demo

WAI at AccessU

WAI at AccessU

New WAI Tools Feedback

Help improve new WAI tools and resources. We have 3 different prototypes that we'd love for you to try out and give us feedback on.

We will be in Room JBWS 165 most of Monday and Tuesday. Please come by if you have 10 minutes or so and are willing to take a look.

WAI at AccessU

W3C WAI Education and Outreach Working Group (EOWG) Meeting

Meeting on Wednesday 13 May and Thursday 14 May around AccessU. We welcome a limited number of visitors to this EOWG face-to-face.

If you would be interested in participating in the meeting and you are not a current EOWG participant, please e-mail EOWG Chairs Sharron and Shawn (srush@knowbility.org,shawn@w3.org).

The End