Web Accessibility

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.


The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) has been active for two decades, producing a number of guidelines, standards, technical reports, etc. It has been very influential, both in the development of accessibility software (e.g., web browsers, screen readers) and in the definition of semantic tags for HTML5.

In order to work in harmony with the web accessibility community, AxAp needs to follow WAI's lead. In general terms, this means that it should try to follow the WAI's accessibility guidelines. In particular, any web content that AxAp produces should follow best practices for use of ARIA and HTML5 markup.


The Web Content Accessibility Guidelines (WCAG) ... are a set of guidelines that specify how to make content accessible, primarily for people with disabilities – but also for all user agents, including highly limited devices, such as mobile phones.

WCAG 2.0

WCAG 2.0 ... consists of 12 guidelines (untestable), organized under four principles (websites must be perceivable, operable, understandable, and robust). Each guideline has testable success criteria (61 in all).

  • Perceivable - Information and user interface components
    must be presentable to users in ways they can perceive.

  • Operable - User interface components and navigation must be operable.

  • Understandable - Information and the operation of user interface
    must be understandable.

  • Robust - Content must be robust enough that it can be interpreted reliably
    by a wide variety of user agents, including assistive technologies.

The principles are expanded through 13 guidelines (e.g., "Guideline 1.2 Time-based Media: Provide alternatives for time-based media."). Each guideline is supported by a set of subsidiary guidelines, with a wealth of links for more information.


WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) is a technical specification ... that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript, and related technologies.


WAI-ARIA, commonly known as ARIA, defines a set of attributes (e.g., role, aria-*) which can be added to HTML elements (e.g., div). These attributes provide information that a web browser or screen reader can use to enable navigation of the page, operation of controls, etc.

The role attribute is used to clarify the purpose of HTML elements. For example, let's assume that the element is a div. This tells the browser to lay out a rectangular area on the screen, but gives no information about the area's purpose. However, adding role=banner can enable navigation of the page structure. Alternatively, adding role=slider can enable operation of the widget.

The aria-* attributes can be used to define either properties (e.g., aria-label=undo) or states (e.g., aria-checked=false). In general, properties are used for static characteristics, while states are used for dynamic characteristics.


ARIA's roles and attributes have been around for quite a while, so most popular client software supports them (to some degree). HTML5's semantic tags are much newer, but support should develop at a rapid pace. The Bad News is that most existing web sites don't use either one (and aren't likely to do so in the near future).

Semantic Elements

HTML5 introduced a number of new semantic elements that can be used to define different parts of a web page: As discussed in HTML 5 and ARIA Landmarks, some new tags have meanings that complement or overlap ARIA roles, e.g.:

Element ARIA Role Notes
article article independent, self-contained content
aside complementary complementary content (e.g., sidebar)
details   additional, optional details
figcaption   caption (explanation) for an image
figure   grouping of an image and a caption
footer contentinfo footer for a document or section
form form HTML form, used for user input
header banner header for a document or section
main main main content of a document
mark   marked or highlighted text
nav navigation set of navigation links
section region thematic grouping of content
summary   heading for a details element


This section discusses some notions about ways that AxAp might be able to use ARIA.


AxAp may not find much semantic markup in external web sites, but it can't hurt to look for it. Common idioms in CSS and HTML usage may also yield semantic information. For example, if a div element has an attached onclick event, AxAp might be able to make this more evident to the client software.

It would also be useful, if possible, to keep track of dynamic information (e.g., event bindings, state attributes) in the browser. After that, things get a bit more tricky; indeed, some forms of semantic recognition could be AI-complete.


Because bandwidth to local clients isn't an issue, AxAp can take an expansive approach to output: include any element tag or attribute that might be useful. For example, every nav element can have a navigation role. If a combination of attributes and tags causes problems for the user's client software, a setting could be used to prevent its generation.


This wiki page is maintained by Rich Morin, an independent consultant specializing in software design, development, and documentation. Please feel free to email comments, inquiries, suggestions, etc!

Topic revision: r18 - 03 Aug 2016, RichMorin
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email