Accessibility Technology

Managing Website Accessibility Conformance

Shadi Abou-Zahra, W3C/WAI
Shadi had tons of great content in this presentation, I had a hard time keeping up with it!  The good news is that this presentation is available with a list of the resources discussed at:
  • W3C WCAG conformance guidance
  • Accessibility support database
  • Guidance for tool developers
  • Other resources for evaluation of site conformance



  • Awareness raising and buy-in up and down the chain is critical
  • Accessibility must be “built-in” and occur throughout the development process



  • Awareness raising and buy-in up and down the chain is critical



  • Evaluate to improve
  • Verifies conformance statements
  • Regular monitoring progress from year-to-year (is your approach working?)

WCAG-EM (Evaluation Model)

  • Is currently a working draft
  • This is process-oriented guidance.
  • Web site definition: “coherent collection of pages that together provide common use or functionality”



  1. Define evaluation scope (what is target we’re aiming at, what kind of report do we want – simple “thumbs up / thumbs down,” a list, etc.).  Need this for common expectations.
  2. Explore the target website.  Ideally, this happens with the help of the site owner and / or web developer.  Do we do this “white box style” or “black box style”  Can the developer tell you where the templates are, etc.
  3. Select representative sample
  4. Audit the selected sample
  5. Report evaluation findings



Types of reports

  • Basic (yes / no)
  • Detailed (points out examples)
  • In-depth report analyzes issues (details about the issue, how to fix, etc.)
Sampling approaches
  • Targeted sampling
  • Random sampling
  • Sample adjustment

Performance score (so-called)

  • Coarse and potentially misleading
  • Misses context and can defer focus
  • …but powerful for communication



CSUSB has a scoring system devised by a Math student (does yes / no analysis and uses a Likert scale of severity).  Reports are provided to management, which creates a kind of “naming and shaming” mechanism.  This system has engendered competition among divisions and has increased accessibility across the board – at least according to their system.

Some agencies have a scoreboard…is this a good thing?  It can be challenging due to the apples versus oranges nature of differences between sites.  This approach gamifies the system, which can be good or bad.  It’s probably best to compare yourself against yourself.



  • How can you collect the sheer amount of info?
  • Scope: not all info is really equally interesting
  • Attempt to collect partially existing info
  • Become a “hero” contributor!
  • There are a lot of future research projects
  • Browsers and AT vendors have a ton of information

VERY COOL:  Shadi demonstrated prototype testing tool (I think it’s called “Easy Checks”) that collects data into a central database (URL for tool is in slide deck, which is at top of this post)



  • Most claim to support WCAG2.0
  • Most also claim to be the best tool…
  • …yet there are many variances
  • Need support for WCAG2 to be more consistent among tools

Current idea is to provide a framework that describes:

  1. Features that tools can provide
  2. Profiles of different types of tools
  3. Can export results into bug-tracking systems (great idea)
  • Contribute to more consistent support for WCAG2
  • Selection of features to guide tool developers
  • Selection of features to inform tool users

How does WCAG-EM work for you?  Input regarding scoring is being asked of the community, please send comments by 22 march 2013 to


  • Current draft is out for review
  • Summer 2013:  final draft
  • December 2013:  first Note




Accessibility Technology

Using WAI-ARIA to Make Typical Pages Fabulous

Another IBM presentation:  “How to go beyond adding WAI-ARIA landmark regions to radically improve the accessibility of ordinary web pages by thinking of them as rich internet applications”


  • Matthew King
  • Mary Jo Mueller
  • Bill Curtis-Davidson

HTML is good for documents and static forms, but not good for modern rich web sites.


Landmarks indicate what’s on the page and how it’s organized.  Only put inside of a region those things that belong in a region.  WAI-ARIA landmark roles are:

  • Banner (header)
  • Search (search tool)
  • Navigation (links)
  • Main (main content of page)
  • Form (collection of form elements)
  • Complementary (info related to main content)
  • Contentinfo (footnotes, copyrights, privacy statements, etc)
  • Region (content where no other role is applicable)
  • Application (software unit embedded on the page – not recommended)

Main region is the most important and needs to be created for every page (before and after screen shots of a page were shown)

Don’t create orphaned content – content that’s not included in any region, or relationship to other elements on the page are lost.


  • “Make keyboard navigation more like a desktop application experience”
  • Study the visual layout and group
  • With effective grouping, the tab ring of the page collapses dramatically
  • Support up and down arrows in vertical groups (showed a megamenu with categories of links within the menu – sort of like the CSUN home page)
  • QUESTION:  can you put other elements into a megamenu besides navigation elements?  Yes, you could put (for example) a search field in it.
  • Support left and right arrows in horizontal groups (i.e. – tabs, toolbars)
  • Blocks of elements that appear tabular may support all arrows
  • Don’t forget the visual focus indicator
  • Skip the “skip link” it just eats up one more tab stop; designs a “tab ring” so short that skip links do not add value.  The method for skipping large block of becomes tab itself.  Showed a slide with a horizontal group of tabs:  without horizontal grouping you have 9 tab stops, with horizontal grouping you have 3 tab stops.


  • Learn standard keyboard patterns for:  menubar with submenus, menu and menu button, tree, toolbar, grid, dialogs containing menus and other widgets
  • With appropriate widget choice:  perfectly map virtually any navigation scheme, equally efficient for all (keyboard or mouse, visual or non-visual)

QUOTABLE QUOTE:  “This is a designer’s job…interaction design is the magic”

Menubars with pulldown menus should work just like they do on the desktop.  A good example is  This was a powerful demonstration of how  much WAI-ARIA affects navigation within a page.

Since JAWS 12, opening a dialog allows you to easily navigate confined tab rings.

Even though they look like tabs, in most cases it is better not to use WAI-ARIA tablist and tab roles.  Site nav links that are styled to look like tabs usually don’t work like tabs


After identifying elements with correct landmark or widget roles, ALL, with few exceptions, should be labeled and related to any describing elements.

  • Use aria-labelledby whenever possible
  • Re-use of strings simplifies maintenance, translation, etc
  • Brevity is key:  aim for 1 or 2 short words, 3 tops; do not use role names in labels i.e. “site navigation” for a navigation region; do not put instructions in labels “press enter to…”

A slide was shown with examples of labeling and describing elements, good and bad

Use labels on multiple regions of the same type; some powerful examples:

  • Composite labels
  • aria-labelledby multiple IDs
  • May self-reference by including ID of element being labeled
  • May have both aria-label and area-labelledby on same element
  • browser automatically concatenates in specified order


Success is in the minutia; implement design patterns thoroughly

Implement WAI-ARIA prperties per design patterns:


Lost visual focus = lost user

  • Is the new focus location logically what user would expect?
  • Telling non-visual user useful information?
  • Making the task efficient?

Pay attention to where focus moves

  • Elements need to be able to receive focus (menuitem, treeitem, button)
  • If a parent or child element has focus instead, it may not work correctly

Best practice is to have one role per element

“Code to the spec, not to the test tool or assistive technology”  GREAT ADVICE

  • WAI-ARIA spec clearly states intended use for each role
  • Purpose is to communicate the intent of UI element to assistive technology
  • Use role only to communicate WAI-ARIA specified intent
  • Do not re-purpose roles to “fix the issue” or manipulate AT behavior
  • If AT does not behave as desired or expected:  may be incorrect design or bug in your code, may be incorrect expectations, may be bug in browser, may be bug in AT


WAI-ARIA can dramatically boost accessibility and be as desired by PwD as anyone else

Accessibility Technology

Making Mobile Both Accessible and Secure


URL for slides (you’re gonna need it, the slides have thousands of bullets and I couldn’t possibly capture all of it here):

  • Costs to business of incompatible mobile secrity and accessibility?
  • Weak links
  • There are security gaps to be checked for


  • BYOD
  • Examples of inaccessible security
  • Risks of inaccessible secirty
  • Risks of non-secure accessibility
  • Items to consider when implementing a secure accessibility
  • Challenges you’ll encounter

A whole slide of disclaimers:  how IBM is approaching this topic, conclusions are based on anecdotal experiences, etc.

Risks related to inaccessible security:  biggest risk is the human element

Some interesting stats on BYOD::  most enterprises have personal devices accessing corporate resources, 89% of IT departments support them, but 46% are unmanaged.

Accessibility and Security don’t always work together; we start from a foundation of risks (508 and other intl. legislation).  Showed a slide of big corporations that had litigation against them, Target, Netflix, Google, etc.  Yes, the “risk” is real, but of course we all know that corporations should do accessibility because it’s good for business AND it’s the right thing to do.  Presenter Talked about brand, what it’s worth to your company, that sort of thing.  Sadly, the presentations I’ve seen given to corporate audiences seem to be driven primarily by fear and pursuit of the bottom line.  This presentation (so far) is following that line.

PDFs recently had an issue where secured docs could be read with a screen reader.  Within IBM, Antivirus could not be used by blind employees, so they needed to use an alternate AV program.

QUOTABLE QUOTE:  “If a security test fails an individual’s capabilities, it fails as an implementation.  If a security test fails the situation, it fails as a solution.”


  1. AT do not function correctly in a secure env
  2. Unverified AT leave exposures to secrity
  3. Security is unusable
  4. Secure solutions may not be able to be retrofitted for accessibility

They had a complicated slide that showed “10-Steps to security”

Slide with a triangle containing:  Accessibility, Security, Enterprise

Embed standards into the enterprise (mandates, processes, guidance, metrics, education, documentation, tools)


Slide about platforms:  OS, Hardware, carrier, AT

Slide showing a pie chart of platforms, there were about 50 (completely unreadable, but did show the scale of the problem)


  • AT (SR, Zoom, preconfigure, dev tools)
  • Security (platform settings, policy, partitioning)


Siri is a problem because “we don’t know what happens to that spoken utterance, it doesn’t stay on the device, it goes to what we’re told is a secure server.”

QUESTION:  what about captioning and transcription services?  These fall into the same bucket.  Concern is the unknown about “who’s wearing the Siri face” right now.

Evaluate AT for security

  • Does it run correctly when the security is engaged?
  • Have artifacts that leave unprotected content (logs, buffers, off-device processing, transmission, secure processing, is encription adequate
  • Does it work in public / private situations?
  • Does it require a network connection?

Accessible Authentication

  • Pwd length, complexity, time-outs, alternatives
  • Biometrics:  consider cost, environmental considerations, alternatives
  • Graphical pwds (not suitable for device without a mouse or touch-screen access


  • MDM, Security, Enterprise Applications
  • Bare metal vs. Hosted (type 2 like VMWare)
  • Container virtualization (i.e. Enterproid Divide), similar to UNIX chroot solution
  • Have to assess these solutions for accessibility

Paul’s sidebar regarding the “model” of IBM presentations:  they provide lots of big-sounding questions and problems, present slides that are overloaded with gobs of information, focus on compliance (often injected with fear), but not a lot of practical information.  Ya gots ta pay for that stuff, buddy.

IBM uses “Worklight,” a tool that sounds similar to PhoneGap, but it comes with a lot more under-the-hood stuff for policies, server interaction, endpoint management and management of services, etc.

Enable, monitor, and enforce compliance

System settings, software inventory, software distribution, automation, monitoring, reporting, taking action

Slide:  Rapid transformation of change (loaded with literally a hundred items and completely unreadable.  Again, shows just how complicated things are)

Mobile standards are lagging growth

New hypervisors have been announced by VMware (type 2) and Redbend vLogix Mobile (type 1)

10 new MDM solutions reported May 2012

Retrofitting is expensive and may in fact not work at all

Accessibility Technology

IBM’s WCAG 2.0 Compliance Web-Costing Model

  • Phill Jenkins IBM Research, Human Ability and Accessibility Center
  • Dan Shire IBM Ineractive, IBM Canada

Why this presentation?  Our experience with Government of Ontario is relevant to organizations and web sites trying to estimate the costs of accessibility.

Questions that need answers:

  • What does it take to make a website accessible (from scratch)?
  • What does it take to keep it that way?
  • What are the opportunities and challenges?

Project Steps

  • Identify candidate sites and sample pages
  • Assess sample pages for accessibilty
  • Estimate cost to test, repair and maintain
  • How to apply project experiences to sites and policy

7 week timeline

Slide showing an IT project life cycle showing user-centered design.  UX, including accessibility and support for inclusive design, should be at the heart of your project – this can be integrated into every phase of the project.


  • “Most organizations take several runs at procurement before they get it right”  This is a true statement and I agree with it.
  • “How many of you work in corporate IT departments?” (several hands raise)  “Many of your colleagues in government and higher education wonder why it costs so much to make things accessible.  In those environments, you take care of the HTML and CSS and you’re done.. it costs so much more in corporate environments because those environments are very risk-averse.”  I find this characterization suspect.


  1. Look and feel:  expensive to update – design and significant coding changes.  If you get accessibility wrong, it can be broken everywhere.
  2. Content can be relatively dynamic and change frequently.  Compliance can be a problem.

How often do organizations refresh their sites?  Varies, but roughly every 3 years (evidence is highly anecdotal)

99% of businesses are small and medium sized business (less than 200 employees)

Provided a very detailed description of IBM’s analytical approach to their testing methodology, with breakdowns of costs of web accessibility remediation, with hours of effort by role…

…and it was at this point that I couldn’t take any more and walked out.  Everything they’re saying is true, but my god, I think IBM can make anything mind-numbingly boring.

Accessibility Technology

Agile and Accessibility Case Study

Karl Groves @karlgroves

Agile and Accessibility:  Theory and Reality

Ceiling Cat and the SDLC (he watches you as you do waterfall project management – Google this meme…not as good as Cat-Breading, but still funny)

The further you get down the path, the less likely you are to get accessibility into the plan (if it’s not part of the plan to begin with).

The agile manifesto:  “We are uncovering better ways of developing software by doing it and helping others do it.  Through this work we have come to value…”  Go here and read it yourself:

How do agile and accessibility work together?

  • Definition of done:  do tests pass?  If yes, we’re done!
  • Inherently user focused (as a user x, I should be able to do y, so that I can accomplish z)
  • Inherently quality focused
  • Inherently collaborative (pigs and chickens story, referenced here: )
  • Tools and techniques (Test Driven Development)
  • Daily standups
  • Definition of done
  • Fortune 100 Healthcare Company, 36.5 billion, 40,000 employees
  • SDUF (Some Design Up Front), some spec work done up front
  • 95 initial renderings
  • 9 page types
  • 10 sub-page layouts
  • Slicing up designs and assets into working HTML


  • A11y team members assigned to several scrum teams
  • Development and testing
  • We deviated from the process (triple quality constraint Cost, Scope, Time)
  • We underestimated the scope and resources, untrained resources
  • Executive staff unwilling to adjust to meet evolving needs
  • Agile fall?


  • William James: A chain is no longer than its wekest link, and life is after all a chain
  • You need the knowledge and skills, or you can’t be effective
  • You CAN integrate accessibility into any process
  • Time spent up front building accessible components and patterns is good accessibility ROI (still expect to refactor); that is, the 95 initial renderings


  • One way to get accessibility win, create an accessible.css file that contains all the stuff you need
  • Develop a detailed User Interface Model up front, which helps to standardize the interaction model.
  • Ratio of accessibility members on a team:  at least one should be functioning as a SME.
  • Why can’t we standardize on a particular framework / approach?  Start contributing to those projects that have made the most progress.
  • Leonie talked briefly about the UK government’s success with their site rebuild