Accessibility Technology

Evaluating the Accessibility of your Website: New Resources and Tools

Presenters:  Shadi Abou-Zahra and Eric Eggert from the W3C Web Accessibility Initiative (WAI)

This was my second session at the CSUN conference on Friday, March 6.  Full disclosure:  I’ve had some involvement with these projects via the W3C’s WAI-EOWG group.

Overview of New Resources and Tools

  • WAI Eval Resources
  • WCAG-EM Report Tool
  • Eval Tools List
  • Eval Tool Features
  • auto-wcag Community Group

WAI Evaluation Resources

  • “Easy Checks” provides tips for anyone on how to analyze web pages for accessibility.  Shows simple ways to use browser toolbars.
  • “BAD” (Before After Demo) will show common errors and how to fix them in a web page that’s horribly inaccessible.
  • Involving Users in Evaluating Web Accessibility
  • WCAG-EM Report Tool is a guidance tool that is non-normative.  It is just one way that you can use to evaluate the accessibility of your web pages.  Shadi walked through the WCAG-EM Report tool to show how it works…it’s very useful for folks who are doing web site accessibility audits.
  • Web Accessibility Evaluation Tools List provides a filterable list of tools (paid, free, and open-source) that are available to help you evaluate web accessibility.  Vendors and developers can add their tools to this list.
  • Developers’ Guide to Features of Web Accessibility Evaluation Tools helpful to folks who are planning to procure software for web site evaluation
  • auto-wcag Community Group is a new way for anyone to come together to put together test cases for tool developers to validate their tools work.  You don’t have to pay to be a W3C member…it’s totally free to join this community.



Accessibility Technology

Choosing an Accessible UI Framework

Presenter:  Gerard Cohen from Wells Fargo, Kevin Kalahiki

@gerardkcohen | Slide deck at

This was my first session at the CSUN conference on Friday, March 6.  I’m getting off to a good start, definitely feeling better than last night.  My headache yesterday made me go up to my room about 4:00 PM, and I ended up sleeping until 10:00 PM, completely missing the reception.  D’oh!  I’ve got another full day of sessions, so let the coverage begin.  Every year, there seem to be more great sessions scheduled on the last day of the conference.

Choosing a framework is a serious decision, it’s something you’ll have to live with for at least a few years.  Ease of use, popularity, opinionated, customization, size, and of course accessibility are all considerations.  How do you know which one is accessible?

Frameworks that will be covered here

  • Angular.js
  • Bootstrap
  • Foundation Zurb
  • JQuery Mobile Framework

Other Topics Covered

  • Documentation
  • Forms
  • Tabs
  • Dialogs


  • Proper Labels / Descriptions
  • Keyboard Navigation / Focus indication
  • Color Contrast
  • ARIA (is it being used properly?)


  • Angular 1.4 developer guide, ngAria; has accessibility patterns documented
  • Bootstrap has a good accessibility page; skip to content, nested headings, etc.
  • Foundation has an accessibility page, but it’s a little slim.  It’s pretty much copy/pasted from Bootstrap, with links to some other resources.
  • JQuery Mobile does NOT have a specific accessibility page, but does have an “accessibly hidden labels” section.


  • Easy to get right – and wrong.
  • Error validation is typically customized because HTML5 validation (support) is lacking
  • Proper labels / Grouping, Focus indication, Color contrast, Error validation
  • Angular has a bad rap for accessibility documentation on forms.  Labels are not included on input fields by default.  However, a lot of work is being done with Angular Material Design.  Fields are not grouped together properly by default.  Required fields automatically show a color indication onFocus, but colors do not meet color contrast.
  • Bootstrap:  error validation needs to be handled, does require some weird markup, color contrast issues
  • JQuery Mobile:  their forms pass pretty much every check Gerard was looking for.


  • Criteria:  Keyboard interaction, focus indication, color contrast, ARIA
  • Tab key focuses active tab
  • Left/up for previous tab
  • Right/down for next tab
  • Arrow keys should cycle
  • Roles;  tabpanel, tablist, tab
  • States:  aria-selected
  • Properties:  aria-controls
  • Bootstrap (core) tabs:  arrow keys don’t work.  ARIA roles are done right, tabpanel is there, list of tabs is there,   Color contrast is also missing.
  • Angular.js:  doesn’t come with any built-in widgets, you rely on material design.  Documentation isn’t there.  Arrow navigation works, but it doesn’t cycle around.  Does not activate tab when selected.
  • JQuery Mobile:  was perfect…nailed it!
  • Foundation:  has NO focus indications, but basic keyboard interaction is there (a little pointless if you can’t see where you are.  Also, you need to press enter to activate tab.


  • Keyboard interaction, focus indication, color contrast, ARIA roles
  • Tabs should remain within the dialog itself, esc is expected to dismiss dialog, enter should submit the form.
  • Roles:  dialog, alertdialog
  • Properties:  aria-label, aria-labelledby
  • Foundation:  has a big note at the bottom that it is not accessible.  No roles assigned, tabbing doesn’t make it into the dialog.


  • Forms:  explicitly associate labels with inputs, group related fields with fieldset/legend, convey error state and description (each framework has classes to handle this)
  • Tabs:  use PayPal accessibility plug-in
  • Dialogs:  this is where I had to do the most work.  Cycle focus within dialog, focus should return to trigger
  • Body content should also wrap

 Future of Frameworks

  • None of the material design widgets will be released unless they are fully accessible
  • Foundation is starting from scratch, specifically for accessibility v 6 should be available in June
  • Next version of bootstrap is being refactored (Patrick Lauke from TPG is reworking this personally.)
  • Anything you can do to help is greatly appreciated!


Accessibility Technology

Revised Maturity Model: Case Study of the CIA

Presenter:  Benjamin Wilson from the CIA

This was my sixth session at the CSUN conference on Thursday, March 5.  I don’t think I’ve heard about a maturity model in the accessibility arena yet (they’re fairly common in IT), so I expect this presentation to be educational.  Frankly, I’m a little surprised there are so few people in this session.

Comes to this from a project management, change management and IT perspective.

Why is the CIA Here?

  • Primary goal of the agency is to provide as objective a perspective of the world as we can.  We try to avoid groupthink as much as possible.
  • Goal:  we want to be the Employer of Choice in the Intelligence Community for People with Disabilities
  • Goal:  employees with Disabilities have Independent Access to the information and data needed to accomplish their mission.

It takes 10 years to make culture change, and you should always consider that you’re in year 5

What is a Maturity Model?

Change Management

  • Management:  is there managerial buy-in and commitment to accessibility?
  • Pervasiveness:  how thorough is accessibility being applied in the organization?
  • Competency:  is workforce seeking competency in accessibility and disability awareness?
  • Adoption:  is the workforce actively adopting common tools and solutions?
  • Socialization:  is there employee buy-in and commitment to accessibility?

Capacity Levels in CMM

  • Incomplete > Performed > Managed > Defined

Business Drivers to Change Management

  • Senior commitment
  • Understanding
  • Awareness
  • Stakeholder engagement

2014 Accomplishments

  • CIA Accessibility program chartered
  • New accessibility policy
  • Leadership outreach (CIO annual conference, vendor’s quarterly, DAAC 2014)
  • Piloting processes
  • Communication

Standards & Guidance

  • Organization Process Definition
  • Organizational Training:  AT demos, disability awareness, developer training, IT support training
  • CIA Accessibility Standards:  WCAG 2.0 AA
  • Risk management for remediation:  scoring of applications on a Likert scale of 1-5; a 4.4 indicates a functional level of accessibility.

Programmatics – Key Process Areas

  • Organizational Process Performance
  • Organizational Performance Management
  • Risk Management
  • Acquisition:  vendor self-assess, agency audit contenders
  • Development:  self-assess, report, selective audit
  • Service Delivery
  • Annual report to executive director
  • Business process studies:  2013 accessibility, 2014 improvement of RAS

Acquisition/Development/Service Delivery

  • Objectively evaluate processes and work products
  • Provide Objective Insight




Accessibility Technology

Accessibility in an Agile World

Presenters:  Jesse Hausler and Cordelia McGee-Tubb from @jessehausler@cordeliadillon

This was my fifth session at the CSUN conference on Thursday, March 5.   Interested in this session because of my home institution’s use of Oracle/PeopleSoft, and I expect this session may provide an interesting counterpoint to that platform.

How Agile Fails Accessibility

  • Decentralized product ownership
  • Teams control their own backlog
  • Balance: bugs/accessibility
  • Balance:  feature enhancement / Enhancements
  • Separate accessibility features; mountain of accessibility debt
  • Unless a proper system is put in place, accessibility – under agile – will always take a back seat to the creation of new features

Executive Support

  • “The email” is not the solution.  It can’t do the work that needs to be done.
  • Executives remove blockers and help us build an environment in which accessibility can thrive

Building the Environment – Culture

  • Gain allies and raise awareness.
  • Build the base of passionate people.
  • Spread knowledge about accessibility
  • Build empathy through examples
  • Frame accessibility through your company’s core mission
  • Make it contagious (get other people talking about it)
  • Embed on a scrum team:  teach how to ship accessible features, learn at a micro level how agile works at your company.
  • Knowledge of your company’s brand of agile
  • Success building an accessible feature
  • Prove to the team that it’s not a big hurdle
  • Allies in UX, scrum leadership, development, and quality
  • Path to embed on another, larger, more influential team
  • Create an award that recognizes excellence; publicize winners, generate incentive to build accessible


  • Create reusable components:  use your contacts to join the appropriate scrum team, guide them toward the development of accessible components
  • 3rd party components:  know which ones are used, gauge level of accessibility, catalogue functionally equivalent alternatives for inaccessible ones, work with stakeholders to enlist accessible alternatives
  • Grassroots marketing campaign:  dropdown / throwdown poster was a classic (lots of great comics in this preso)
  • Take advantage of redesigns:  product redesigns are common, be prepared with a set of accessible, reusable components, beware of redesigns (they could pull out good stuff)
  • Testing Framework
  • Quality Engineering does not normally include accessibility as a traditional part of quality testing.
  • Automation is key to accessibility; build test automation that is specific to your environment.  Opt everyone in, automatically issue test failures where possible, test for patterns that indicate accessibility bugs, perform manual spot checks, track everything.
  • DOM test the simple things (WAVE-testable stuff)


  • How does your company implement a new process?
  • Develop a plan:  problem statement, teams/groups impacted, proposal detail, tracking / success metrics, exception policy, release sign-off process, communication plan
  • Get an executive sponsor:  their main job is to believe in your idea.
  • Example meta process:  define problem > ID impacted parties > engage forum (present proposal, gather feedback) > go/no-go > re-socialize revised proposal, get alignment, final buy-in > go/no-go > visibility to executives > communication and rollout


  • Cultivate Support
  • Provide Good components
  • Leverage your test framework
  • Institute process change
  • Keep it going


Accessibility Technology

Accessibility in the Web Project Lifecycle

Presenter:  Denis Boudreau

This was my fourth presentation at the CSUN conference on Thursday, March 5.  I’ve known Denis via some conference calls with W3C, and of course I’ve seen him a few times at the CSUN conference.  I’m looking forward to this presentation, but the headache I woke up with this morning is getting worse.  I will try my best to capture this one.

Denis talked a little bit about a project he worked on years ago where there were issues with color contrast in a company rebrand (yellow and light blue on a white background – yech!).  Question the project manager posed to the designer was WHY DIDN’T YOU KNOW THIS?  This story highlights the gaps and communication breakdowns that can occur, even when an organization has committed to accessibility.

Lessons Learned “The Hard Way”

User stories to reflect common issues:

  • “Amy” web accessibility specialist, tasked with assessing redesign against WCAG AA.  Discovers no prior testing has been conducted.  Site launches in two weeks.  LESSON:  dealing with web accessibility at the end of the project lifecycle leads to costly retrofit that could’ve been avoided.
  • “Roy” accessibility coordinator, leads the accessibility task force in his Fortune 100.  Role is making sure they never get sued.  Leadership has not provided clear top-level support.  LESSON:  without clear top-level support from leadership, web acc champions are ultimately bound to be ignored by their peers.
  • “Elena”  QA lead, org is under litigation because their web site was inaccessible to people who are blind.  She built an accessibility checklist.  LESSON:  centralized testing teams who fail to include end users testing in their process are likely to miss significant issues when assessing content.
  • “Chris” business analyst tasked with selecting the next platform for next redesign, has 3 products with VPATs that claim 508 compliance.  Redesign will be done by an offshore development team.  LESSON:  never underestimate the impact of external factors – for they can make or break all efforts towards web accessibility.
  • “Mike” front-end dev, gifted web dev who realized long ago that accessibility was mostly about testing with your keyboard and using native semantic HTML.  Introduced his team to various browser toolbars and everyone now feels confident they have accessibility covered.  LESSON:  developer toolbars, semantic markup and automated testing tools can only get you about 30% of the way towards web accessibility goals.
  • “Julie” Accessibility champion in an organization working toward digital inclusion.  With so much work to do, and so many people asking for help, and so little time to get it all done, she often becomes a bottleneck.  LESSON:  access resources who allow themselves to become bottlenecks give everyone else an excuse to overlook web accessibility.

What do these people have in common

  • They believe they’re doing the right thing
  • pretty much left on their own
  • ultimately bound to fail

Compliance is Overrated

  • No organization has ever been sued over a failed success criterion.
  • What orgs are sued over are the results of poor user experiences.
  • You need to test with real users

Why is Accessibility So Hard?

  • Lack of skills and knowledge
  • Lack of awareness
  • Lack of budget, resources
  • Hinder look, feel, or functionality

I did my own survey…

  • …and asked 100 people what they thought
  • WCAG is NOT a reqs document
  • Excuses:  time, money resources
  • too much documentation, no real-world examples
  • Ruins my creative fun
  • Never seen AT in use (unknown is hard)
  • Don’t know, don’t care
  • Can’t be bothered
  • In the end:  accessibility is not a project with start and end dates, it’s a program.  A lifelong, ongoing program.

Integration in the Lifecycle is Only One Part of the Solution

  • Take ownership
  • Awareness: training & learning, building the business case, sharing the message, etc.
  • Alignment:  Internal and External policies, accessibility support groups, standards and guidelines, etc.
  • Realization:  Best practices, design patterns, style guides, tools, testing methodologies, etc.

Whose Job is It, Anyway?

  • Everyone, BUT…each individual has a set of responsibilities that’s a part of the ecosystem.
  • If people say accessibility is not their job, just ask:  “Is quality a part of your job?”  The answer is yes,  of course.
  • Every stakeholder involved needs to stay alert and pay attention to accessibility at their level in the ecosystem
  • Everyone needs to be accountable.  Share responsibilities.
  • Make subject matter experts in your lifecycle accountable, so the right questions are asked at the right time by the right people.
  • W3C WAI-Engage Wiki:  Distributed Responsibilities Model
  • Successfully planning the right intervention at the right time by the right people will prevent costly errors & oversights
  • Uneducated decisions will yield significant consequences for accessibility later in the project.

Quality is Everyone’s Responsibility

  • Prevent instead of treat
  • Share responsibilities across disciplines
  • Sense of collective ownership
  • Prevent errors & oversights
  • Exceed compliance goals
  • Meet end user’s needs
  • Above all else, accessibility is about building a better quality product

Failing to Plan is Planning to Fail!  Web Accessibility is both the journey and the destination.