Universal design and usability is the measure of effectiveness determined by accessibility, access requirements, equitable use, and user research for a given website or Internet access project. Making your digital media accessible to people with vision and hearing impairments and creating meaningful alternate text for images that are helpful for screen readers ensures that you are capturing the widest audience for your websites and digital projects. But universal design and usability goes well beyond the typical alt text and screen reader capability that many websites manage, this blog post will delve into accessibility issues, designing for universality, guidelines, techniques, and essential components.

Why should you design for accessibility?

It makes good business sense to include all and exclude none. As the population ages, organizations must mature in parallel to the needs of the customer base and the web presence should include this trend. In general accessibility has always focused on people with disabilities; however, the benefits of universal usability also include the aging consumer, streamlining for mobile devices, better search engine optimization (SEO), corporate social responsibility (CSR), and solidifying a loyal following. Besides the reduced legal risks and exposure to litigation, the return on investment (ROI) far outweighs the costs associated with implementing a web accessibility strategy. A solid business case strategy for web accessibility will typically result with more benefits than risks for any organization.

How do you design for universal access?

First you have to know how people with disabilities and/or impairments interact with and experience the web. Several case studies (pdf) and needs assessments (pdf) have been conducted to determine the various aspects involved with web accessibility conditions. These studies reveal the way people cope and struggle with most types of disability, including several examples:

  • Color blindness and the ability to distinguish colors on the web
  • Repetitive stress injury in the wrist and arms due to keyboard, screen, and desk ergonomics
  • Hearing, sounds, audio and speech recognition conditions
  • Blindness and inability to read Braille text
  • Dyslexia and attention deficit hyperactivity disorder (ADHD) prevents reading text on the web
  • Combinations of conditions including short term memory loss, reduced vision, and hand tremors result in challenging web experiences
  • Down syndrome makes it difficult to understand abstract concepts, reading, and simple mathematical computations on the web
  • Combinations of deaf and blindness offer more difficult and challenging ways to interact on the web

The list of accessibility issues goes on, and addressing these scenarios takes an understanding of the user-friendliness that your site needs to obtain and each requirement to fulfill the universal user experience.

How do you design webs for universal accessibility?

It is fairly straightforward for web developers to tackle single accessibility scenarios such as vision and hearing, however, when combinations of needs and disability are addressed in all types, degrees, or combinations it is not as easy to make all web content accessible to all individuals. The techniques listed here are known as sufficient to meet the success criteria as stipulated in the W3C Web Accessibility initiative. Several of the guidelines are highlighted in bullet points below.

  • Text alternatives – For any non-text content such as images, graphics, diagrams so that the alternative text can be rendered into usable forms such as larger print, Braille, speech, symbols or other language.
  • Time-based media – Refers to all audio and video prerecorded content and includes either providing a transcript, linking to textual information, or allowing captioning or captions for video content. Can also include sign language for prerecorded video streams.
  • Adaptable content – Present content in different ways without losing the information, structure, or relationships, such as semantic elements and markup structure to convey content with access options. One example includes using semantic markup whenever color cues are used so that user agents can visually distinguish text. The objective of this technique is to combine color and text or character cues to convey information. Most users can quickly scan the content to locate information conveyed by using color differences. Users who cannot see color can look or listen for text cues; people using Braille displays or other tactile interfaces can detect text cues by touch.
  • Making content distinguishable – This addresses the issue of color perception and visual elements on web pages. To aid the viewer in distinguishing shades, hues, and colors, it is helpful for the web developer to add text which conveys the information about the differences in separations of color; therefore, allowing visitors to see and hear the content describing the disparity between foreground and background elements.
  • Keyboard accessible – Provide corresponding web document navigation and interaction with options to allow keyboard inputs permits further functionality of content access for impaired individuals who cannot effectively operate a mouse or pointing device. Using HTML form controls and links, keyboard triggered handling events, making actions keyboard accessible by using on-click events of anchors and buttons, and providing keyboard mapping and instructions provides accessibility alternatives.
  • Provide enough time – Give visitors enough time to read, access, and use the content. Give the visitor the option to turn off a time limit either before or during the event encounter, or allow them to adjust the time limit before the event. Also provide a response message with an option to allow the visitor enough time before the event expires to add additional time to the event, with at least ten opportunities to extend the event time. An example of this would be financial sites that limit time to view online statements.
  • Prevent seizures – Do not knowingly create web content that is known to cause seizures. In general, any content that flashes more than three times in a one second period has been associated with inducing seizures in certain individuals. For any content that does flash at this rate it is suggested that it be small enough not to induce a seizure, or less than 25% of 10 degrees of the visual field of view on the screen. The 10 degrees of visual field represents the central area of vision in the eye, and this area is highly packed with visual sensors, which are transmitted directly to the visual cortex. There are several formulas for creating a small safe area for flashing web content.
  • Accessible navigation – Organize links to skip blocks of information and group blocks of repeated information that can be skipped using several techniques. Add linking at the top of the page that goes directly to the main content area, add anchor linking at the start of a block of content that allows skipping to the end of the section, and add linking to each section of the content on the page. Other options include adding maps to group links, providing heading elements at the start of each content section block, and using accordion elements to expand and contract content sections.
  • Readability – People with disability experience words in varying degrees, and depending on the user experience and impairment, the meaning of words and how they are represented can be perceived differently than the intended meaning, or not observed in any meaningful respect. For some the experience is visual with the eyes, for some it is auditory using their ears and speech recognition, for some the web experience is tactile through touch, as in reading Braille with the fingers, and for others it is a combination of any of these interactions.

Guidelines include providing definitions for words or phrases that are used in unusual or restricted ways and in the first occurrence by providing a link to the definition, using a definition or acronym list, linking to a glossary of terms, and using inline definitions. Other recommendations include providing explanations for abbreviations in the first occurrence, and adding them to the suggested lists for unusual words or phrases.

Other recommendations include making the pages predictable, providing input assistance, and maximizing the compatibility with current and future user agents including all assistive technologies.

I would be willing to bet that even TR does not address all of these universal design issues with its website, as most websites today probably do not address every instance for equitable use. What guidelines for web page accessibility does your website use?