Accessible to whom?

  • Visual impairments
  • Motor and mobility impairments
  • Hearing impairments

One way to make your application accessible

  • Basic HTML
  • Simple layout
  • Forms-based interaction
  • No JavaScript

Accessibility for the static web

Doing Nothing

Enter your name:

Choose your favorite color:

Having trouble? Click here for help

Accessibility for the static web

Doing Something

Harvard University I.T. logo

Having trouble? Click here for help

What did we have to do?

  • Add labels to form elements
  • Add alt attributes to images
  • Make links make sense

HTML5: A bad accessible experience

What Went Wrong?

  • Poor Focus Management
  • No Keyboard Commands
  • Unusable Custom Controls
  • The user doesn't know when things change on the page


  • Legal Responsibility
  • Coding accessible HTML5
  • Auditing
  • Questions and fumbling for answers

Legal Responsibility

Section 508

Section 508

  • Who does this apply to?

    • Student-facing applications?
    • Everyone.
  • Do we care?

    • Of course we care
    • Realistic about priority

Section 508

  • (a) alt attributes
  • (b) subtitles
  • (c) color
  • (d) stylesheets
  • (e) image maps!
  • (f) seriously, image maps
  • (g) row/column headers
  • (h) data table cells

Section 508

  • (i) frames
  • (j) blinking
  • (k) text only page
    • most misunderstood
  • (l) scripts
  • (m) required plugins
  • (n) form elements
  • (o) skipping navigation
  • (p) timing


  • Bobby Approved
    • Where's Bobby?
    • '96 CAST
    • '04 Watchfire
    • '07 IBM
  • WCAG 2.0
    • A
    • AA
    • AAA

Coding accessible HTML5

Accessible HTML5 Overview

  • Use clean HTML and standard tags whenever possible
  • Manage focus
  • Add key handlers
  • Add ARIA for screen readers

Use clean HTML and standard tags

  • Use CSS for layout, make sure DOM is in logical order
  • Don't use generic div or span when there's another HTML tag that's more semantically appropriate!

    				<span onclick="">...  ⇒  <a href="">...
    				<div onclick="">...   ⇒  <button onclick="">...
  • Label images and form controls

    				<img src="chart.png" alt="(description)">
    				<label for="firstname">First name:<label>
    				<input type="text" id="firstname"/>

Managing Focus

  • Make custom interactive elements focusable with tabindex:

    				<!-- Natural tab order -->
    				<div onclick="" tabindex="0">Clicky 1</div>
    				<!-- Custom tab order -->
    				<div onclick="" tabindex="7">Clicky 2</div>
    				<!-- Focusable but not in tab order -->
    				<div onclick="" tabindex="-1">Clicky 3</div>
  • Proactively place focus with element.focus() to create an effcient workflow.

Add key handlers

Custom controls should respond to keys like Enter, Space, Arrows, Escape, etc. as appropriate

			<div id="reply_icon"
			     onkeydown="return onReplyKeydown(event)">Reply</div>

			  function onReplyKeydown(event) {
			    if (event.keyCode == 32 || event.keyCode == 13)  // Space / Enter

Add ARIA for screen readers

  • ARIA attributes provide semantic information to screen readers that is normally conveyed visually
  • Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard widget, like a button:

    				<div tabindex="0" role="button">Send</div>
  • Use ARIA states and properties to add dynamic information about the current state of an element

    				<div tabindex="0" role="checkbox" aria-checked="true">
    				  Include attachments
  • Example 1: Custom Button

    Click on this button:
    <div class="custombutton"

    Example 2: Toggle Button

    function toggle() {
      var b = $('#tb');
      if (b.hasClass('toggled')) {
      } else {
    <div id="tb"

    Example 3: Status Indicator

      Click to begin calculation:
    <button onclick="calculate()">
    <div id="status">
      Status goes here.

    Example 4: Star Rating Gadget

      Rate from 1 to 5 stars:
    <div id="stars" class="star_rating">
      <span class="star_cancel"></span>
      <span class="star_full"></span>
      <span class="star_full"></span>
      <span class="star_full"></span>
      <span class="star_empty"></span>
      <span class="star_empty"></span>
      <span class="star_caption">
        3 stars

    Example 5: Pop-up Dialog

    HTML5: A good accessible experience

    Compatibility Note

    A little bit about screenreaders

    • JAWS (and NVDA)
      • Firefox
      • IE
    • VoiceOver
      • Safari
    • ChromeVox
      • Chrome


    Static Auditing


    • Accepted Standard
    • Tests 508 and WCAG 2.0
    • Can't help with internal sites

    Integrated Auditing

    • Integrated Tools
      • Wave Toolbar (IE)
      • Firefox Web Developer Toolbar
      • Chrome Accessibility Extension (Web Developer Tools)
    • These will make you feel better

    Accessibility Working Group

    Coming soon...

    • What you can expect:
      • Recommendations
      • Strategy!
    • What you can hope for:
      • An official channel for getting help
        • Auditing your application
        • Fixing accessibility bugs

    What Good is this Brown Bag?

    • This wasn't for you!
    • But if you take nothing else away...
      • Standard tags
      • Descriptions
      • Focus
      • Just "unplug" your mouse
    • Communicate
      • Work together
      • -> Accessibility

    Side Note

    There was more here than just accessibility

    • User Experience
      • DOM order
        • Maintainability
        • Standards
      • Keyboard Controls
        • Power Users
        • Lazy Users
      • Focus
        • Power Users
        • Pleasant experience
      • Labels
        • Increased clickable area

    <Thank You!>

    A special thank you to: Curtis Wilcox, Ashley Cwikla, Michael Hilborn, Artie Barrett, and Shannon Rice