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

Accessibility Features of HTML5

This is my first session of the day Wednesday morning, the first day of the CSUN conference proper.  I’m hoping to get a good overview of HTML5 accessibility features while at the conference this week, so I’m looking forward to this session.  This particular presentation is about the features available in HTML5 that you can use to improve the accessibility of your websites.  Session will include code examples and demonstrations, which I will do my best to capture in this post.







Introductions, he’s the staff contact for the HTML Accessibility Task Force


Open Web Platform

  • Accessibility in the OWP

HTML5 Accessibliity / Demos

  • Improved Semantics
  • ARIA
  • Graphics



A description of the HTML Accessibility Task Force.  They have a mandate to develop accessibility solutions, including technical reports, extension specifications, and provide integration paths.  They are about reaching consensus between groups.



A very busy graphic describing the “Open Web Platform” which includes virtually any industry or device that needs to connect to the Internet.  Since the web is meant to connect everyone, it needs to be as accessible as possible.



Tim Berners-Lee:  The web is the great equalizer!



  • Added structured access through improved semantics.
  • Ability to bring desktop paradigms into the browser
  • More options for creating text equivalents for graphics
  • Native support for synchronized captions, sign language, internationalization and more.



Mark presented a page of code, pretty standard for a blog.  He then ran through the page with VoiceOver.



HTML5 Has Much Improved Semantics!

It allows you to describe your document structure with sectioning elements, including <section>, <nav>, <article>, <aside>, <header>, <footer>.  You don’t really have to do anything special except use a variety of new sectioning elements.  What makes a useful aside?  A pull quote, comments, etc.



More information about new semantic elements:  color, date, datetime, email, month, number, range, search, tel, time, url, week

Not all of these will necessarily make it into the HTML5 spec.



New attributes for the input element, including autocomplete, autofocus, autosave, list, max/min/step, maxlength, pattern, required, spellcheck.

These will help build forms much easier, particularly the task of form validation.



ARIA Landmark roles include:  application, banner, complementary, contentinfo, form, main, navigation, presentation

The ARIA specification was built to provide expose the accessibility API (roles, states, and properties) to accessible technology.  It was designed to allow dynamic web pages to be accessible and provide a more consistent experience for all users.




  • Accessibility for dynamic content (can be reparative, too)
  • Wired into accessibility APIs (roles, states, and properties)
  • Programmatically link elements with labels and descriptions (aria-label, aria-labelledby, aria-describedby)



Back to the code sample, only this time Mark replaced most of the <div> elements with a selection of the landmarks noted above.  By marking up the search field, the OS  (Mac in this case) used system styles for the search bar and button.  The demonstration highlighted how VoiceOver announces each section, and using the rotor control, allows the user to directly choose from the various page elements.

One of the things I noticed as Mark was editing his code is that using HTML5 makes hand-coding of web pages and identification of code segments much easier.  If you’ve ever had to deal with multiple nested <divs>, this is definitely something you’ll appreciate.



Much of the benefits come when you view an HTML5-coded page on different platforms.  For example, iOS will bring up a numeric keypad when entering digits telephone number field.  For dates and hours, the OS will present the appropriate pickers, like a calendar or a clock.




  • Added <figure> and <figcaption> to allow grouping of images with their description.
  • Provides equivalent interactivity and behavior for dynamic and/or bitmap images <canvas>
  • Provide extended descriptions for complex images <longdesc>
  • Provide detailed guidance to authors  ALT Guidance (



  • Canvas allows interaction with pixels on a page, but…they’re just pixels in a box.  Solution:  specify regions
  • How do we define roles/states/properties?  Solution:  map tose regions to Fallback Content.
  • How do we indicate focus?  Solution:  drawFocusIfNeeded()



Mark gave a demonstration of canvas that showed a list of two elements with checkboxes.  What makes this interesting is that those elements were literally just pixels painted onto the screen, but used fallback content.


Unfortunately, Mark’s presentation was rather long, and he was unable to complete his presentation and we missed out on seeing his slides on media.

%d bloggers like this: