• High traffic, responsive web app
  • Direct to consumer
  • Global reach - translated in 12 languages

Session Outline

Sharing Failure Stories

  • Turning the failure into success
    • Accessibility is a principle
    • Bake it into the workflow
    • Share our solutions to specific problems
    • Testing and Automation
    • Usability Testing

Accessibility is exclusively for non-sighted users

  • Myth

The 4 Categories of Accessibility

  • Visual
    • blind, low/obstructed vision, color blindness
  • Auditory
    • Hearing impaired
  • Motor
    • Specialized keyboards, eye trackers
  • Cognitive
    • No distractions or design fluff.

The 4 Principles of Accessibility

  • Perceivable - Available through sight, hearing, or touch.
    • Text alternatives for non-text content
    • Captions for multimedia (videos)
  • Operable - Interaction with content through multi-input.
    • Keyboard interctions
    • Aid navigation/content retrieval
  • Understandable - User-friendly, easy to comprehend.
    • Content appears in predictable manner
    • Eliminate design fluff
  • Robust - cross-browsers, assistive technologies, mobile devices, etc.
    • Standards-compliant
    • Content flexibility

Free screen readers aren’t as good as commercial-grade products

  • Myth

Survey: Free/Low cost screen readers

66.5% have a positive perception

Screen readers are better at reading table-layouts than divs

  • Fact

Screen reader applications aren’t good at handling javascript

  • Myth

Survey: Respondent with JavaScript Enabled

98.6% have JavaScript enabled

100% compliance with Section 508/WCAG, means accessible

  • Myth

Accessibility: Failure Stories

Scenario: You are a librarian doing ILL and research for students and you’re preparing for a conversation with a student about “Islamic medicine in the middle ages.” What can you find?

Code in Action

Bad practice for accessibility

.hidden {
  display: none;

Recommended Approach

.accessibility {
  position: absolute;
  left: -9999em;
<a href="#" target="_blank">Detailed information 
  <span class="accessibility">This link opens in a new window or tab.</span>

Accessibility: Failure Stories

Scenario: Run through the same scenario as before but this time using the Advanced Search Page

We are sending him on a treasure hunt.

Bob Robertson-Boyd


Bake Accessibility into Development Workflow


Bake Accessibility into Development Workflow


  • Progressive Enhancement
    • Start with simplicity
    • Layer in enhancements
    • Forward looking

  • Content-first Design
    • Identify your most important content
    • Prioritize this content
    • Identify relationships between the pieces of data

ARIA landmark roles

Global header or banner

<header role="banner">

Main site navigation

<nav role="navigation">

Main content. To be used only once per page.

<main role="main">

Supporting information to the main content.

<aside role="complementary">

Primary search form.

<form role="search">

ARIA roles for widgets


<div role="button">


<h2 role="alert">
  Your form could not be submitted because of 3 validation errors.




ARIA roles for widgets

Gmail Example

<div role="button" aria-label="Refresh" tabindex="0">

ARIA roles for widgets

Pagination Widget

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>  
  <li><a href="#">»</a></li>

ARIA roles for widgets

Improved Pagination Widget

<ul role="widget" aria-label="Pagination" class="sparx-pagination">       
  <li><a href="#">Previous <span class="sparx-access">page</span></a></li>
  <li><a href="#"><span class="sparx-access">page </span>1</a></li>
  <li><a href="#" rel="next"><span class="sparx-access">page </span>2</a></li>
  <li class="active">
    <a aria-disabled="true" href="#">
      <span class="sparx-access">You're currently on page </span>3
  <li><a href="#"><span class="sparx-access">page </span>4</a></li>
  <li><a href="#"><span class="sparx-access">page </span>5</a></li>
  <li><a href="#">Next <span class="sparx-access">page</span></a></li>


Developer Tools and Automation

  • TotalValidator
    • Basic - Free browser plugin, 1 page at a time
    • Pro - Paid, whole site automation
  • AChecker
    • Open source API, highly customizable
    • Not great HTML5 support
  • Juicy Studio Accessibility Toolbar
    • Free FireFox plugin
    • WAI-ARIA live regions and properties
    • Validates color contrast

Get Started / Involved


Shameless Advertising

Other sessions by awesome OCLC employees

Title: Migrating from Maven to Gradle ... Best of breed or just the least evil?

By: Bryan Davis

Room: Guava / Tamarind

Time: Thursday 4:50 PM - 5:50 PM

Title: Introduction to Hadoop

By: Keegan Witt

Room: Cypress

Time: Friday 9:30 AM - 10:30 AM

OCLC Vendor Session

Time: Friday 3:00 PM - 3:20 PM

Thank You

Happy to answer questions