Web Accessibility

Mike Schneider, Brand Networks, February 2014

What do we mean by "Web Accessibility?"

“The inclusive practice of making websites usable by people of all abilities and disabilities,” including but not limited to:

  • Deaf
  • Blind
  • Colorblind
  • Motor ability
  • Seizure disorders

Why should I bother?

  • Moral/social reasons: The Web offers the potential for unprecedented access to information and interaction for disabled people
  • Financial reasons: We don't want to lose the business or attention of disabled users
  • Legal reasons: USA's American Rehabilitation Act and ADA, UK's Disability Discrimination Act, etc.

Principles of accessible design

  • Perceivable (sight, hearing, touch, transformability)
  • Operable (input, interaction, timing, error recovery)
  • Understandable (meaning, functionality)
  • Robust (functional across past and future tech, according to spec)

Semantic HTML helps everyone!

Your HTML should reinforce the meaning of the information rather than to simply define its style

Imagine that your user were reading your plain, unrendered, source HTML. How well would this user understand the page?

Headings

  • Use headings (<h1>, <h2>, etc) in order of hierarchy
  • For example: only use an <h3> on the page if it falls hierarchically under an <h2> and an <h1>
  • If necessary, a descriptive header can be hidden from view

Buttons, anchors, and divs

  • Anchors (<a>) are not buttons!
  • <div> tags are not buttons!
  • If clicking on an element triggers a JavaScript event, it's a <button>.
  • If clicking on an element changes the URL in the address bar, it's an anchor (<a>)
  • <a href="#"></a> is a red flag.

Fancy new HTML5 semantic tags

  • <article>
  • <header>
  • <section>
  • <footer>
  • <nav>
  • <header>
  • <time> (include machine-readable datetime
  • <em> - use only when providing emphasis. Sometimes italics are used for stylistic reasons rather than emphasis
  • The easy ones (to explain) first

    Deafness

    • All videos or embedded audio should have transcripts or captions (and ideally a sign language interpretation)
    • Any audio cues should be accompanied by a visual cue
    • Side benefits of transcripts: Better for SEO and users who can't or prefer not to use speakers

    Colorblindness

    • Colors should not be the only means of conveying information
    • Use a colorblindness simulator to ensure that your page can be fully understood without full perception of color

    Limited motor abilities

    • Users may not be able to use a mouse - make your site usable with only the mouse
    • Users might make mistakes - ask for confirmation, have easy ways to undo

    Seizure disorders

    Strobing, flickering, flashing, and other distracting effects may cause dizziness, nausea, and even seizures in users with photosensitive epilipsy and other disorders.

    Strobes, flickers, and flashes, should be avoided or prefaced with a clear and concise warning.

    Note: Section 508 prohibits flickers greater than 2 per second

    Blindness

    How do blind users use the Web?

    • Perception: Screenreaders
    • Operation: Keyboard-only
    • Understanding: Information is presented linearly

    General tips in developing for the blind

    • Always provide keyboard alternatives to mouse interactions (avoid onmouseover, etc)
    • Provide descriptive text when necessary
    • Don't repeat yourself

    Not just audio screenreaders!

    Using an iPhone with a Braille display

    How screenreaders can be used

    • Navigating linearly down a page
    • Skip through heading tags to the desired section
    • Skim through a list of all the links on the page (out of context)

    Limitations of screenreaders

    • Can't “describe” images (duh)
    • Some context that's obvious to a seeing user might be unclear
    • When necessary, use offscreen descriptive text

    Offscreen descriptive text

    Consider this “facepile” example:

    
    <span class="offscreen">Friends attending this event:</span>
    <ul>
      <li><img src="01.jpg" alt="Mike Schneider" /></li>
      <li><img src="02.jpg" alt="Dave Thomas" /></li>
      <li><img src="03.jpg" alt="Anthony Mitchell" /></li>
    </ul>
                
    
    /* make this invisible, don't let it take up space */
    .offscreen {
      font-size: 0;
      position: absolute;
      display: inline-block;
      height: 0;
      width: 0;
    }
                

    Note that screenreaders will ignore display: none; and visibility: hidden;, so we can't use those!

    ARIA roles example

    
    <h2 id="nav-heading">Navigation</h2>
    <ul class="navbar" role="navigation" aria-labelledby="nav-heading">
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="developers.html">Developers</a></li>
    </ul>
    

    Accessibility myths

    • Adding title text to links helps screenreaders - false, title text is only ever visible as a tooltip
    • Blind people use text-only browsers, similar to Lynx - false, most blind people use Firefox or Internet Explorer with a screenreader; both CSS and JavaScript are enabled
    • Every image needs an alt attribute - true, but don't be redundant. Include a blank attribute (alt="") if necessary.

    Resources