FED-icons-01 FED-icons-02 FED-icons-03 FED-icons-04 FED-icons-05 FED-icons-06 FED-icons-07 FED-icons-08 FED-icons-09 FED-icons-10 FED-icons-11

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”
--Tim Berners-Lee W3C Director & inventor of the World Wide Web

Accessibility Basics

As responsible web developers, whose job it is to deliver a quality product, accessibility is a one of those things that we as developers must take into consideration as we code. Accessibility is the ease in which a design can be used by all.

“Accessibility is a quality, it means how easily and effectively a product or service can be accessed and used. Physical and cognitive ability occur along a spectrum. Everyone has a limit as to what they can physically accomplish and intellectually comprehend. Good accessibility is designed for the full range of capabilities, as well as for the context of use or environmental constraints.

--A Web For Everyone

The major categories of disability types are:

  • Visual
  • Hearing
  • Motor
  • Cognitive

Accessible websites and applications remove design and code barriers for those who have many different types of impairment. Examples of impairments are being blind, color blind, needing to view text at larger sizes for perception, glaucoma, macular degeneration, retinopathy, decreased mobility or motor skills, being deaf or hard of hearing, or having trouble remembering or focus on large amount of information.

Assistive Technology are the tools, products, and devices, that make tasks possible to perform. Examples of assistive technology include:

  • Screen Readers (JAWS), VoiceOver (OS X & iOS), TalkBack (Android), NVDA (Windows), Window Eyes (Windows), ChromeVox runs on Chrome (browser and operating system)
  • High Contrast modes
  • Text Enlargement
  • Keyboard navigation
  • Switches for limited mobility
Standards and Legislation

Nationally and internationally, laws and standards have been formed to create consistency on the web so that everyone may access the content that lives these. There are several notable standards that relate to web accessibility. The most internationally recognized standard comes from the W3C organization, which has a branch dedicated to accessibility called the Web Accessibility Initiative (WAI). This group has created a set of standards called Web Content Accessibility Guidelines (WCAG). WCAG is currently in version 2.0. WCAG 2.0 and WAI-ARIA (Accessible Rich Internet Applications) are the most referenced standards for accessibility. In the US, there are several pieces of legislation to be considered when building web applications. Most notably, the Rehabilitation Act was created in 1973 to secure an equal playing field for individuals with disabilities. In 1998, Section 508 of this act was amended to define enforceable standards that must complied with for electronic and information products to be accessible to persons with disabilities.

The DOM and WAI-ARIA

In order for the assistive technology to be able to understand the content of what it encounters on a website or operating system, there must be a standardized “bridge” to define how the two talk to each other. This is the accessibility API. “ The DOM of the webpage is associated with a layout engine that the browser uses. The DOM and the layout engine expose accessibility information to the OS platform accessibility API.

WAI-ARIA stands for Web Accessibility Initiative (part of W3C) Accessible Rich Internet Applications. It is a specification that was developed by the W3C to bridge the semantic gap between markup languages like HTML4 and HTML5. It was also developed in response to web 2.0 pages that behave like applications. Mozilla Accessibility QC engineer Marco Zehe, who is blind, states on his blog:

“WAI-ARIA is a set of attributes to help enhance the semantics of a web site or web application to help assistive technologies, such as screen readers for the blind, make sense of certain things that are not native to HTML. The information exposed can range from something as simple as telling a screen reader that activating a link or button just showed or hid more items, to widgets as complex as whole menu systems or hierarchical tree views.”

WAI-ARIA standards can be inserted into the HTML to clearly define information or a process that may be unclear. An example of this is filling out a form online. Required fields are usually indicated with an asterisks. This can be really difficult to catch when a screen reader is reading the form aloud. Putting aria-required="true" in the HTML lets the screen reader know to announce to the user that this field is required. ARIA exists to provide semantics that cannot be expressed in the markup of HTML.

Favorite Accessibility Resources


Front Edge

Lead UI Developer