Accessibility Principles and Guidelines

Accessibility Principles and Guidelines 

Web accessibility is the inclusive practice of making websites and Web pages usable by people of all abilities and disabilities. When sites are designed, developed and edited correctly, all users can have equal and fair access to information and functionality. Section 508 Amendment of the Rehabilitation Act defines the standards of technology and sets forth provisions to establish a level of minimum accessibility.  The Web Content Accessibility Guidelines (WCAG) 2.0 offers a surplus of recommendations and guidelines for making Web content accessible to a wider range of people with disabilities.  This memo outlines the major standards and guidelines to address when making Web content accessible. 

Important Categories of Disabilities to Consider

  • Visual  (blindness, low vision, color-blindness)
  • Hearing  (deafness and hard-of-hearing)
  • Motor  (inability to use a mouse, slow response times, limited fine motor control
  • Cognitive  (learning disabilities, distractibility, inability to remember or focus on large amounts of information)

Principles of Accessible Design

  • Provide appropriate alternative text
    • Alternative text provides a textual alternative to non-text content in web pages. It is especially for those who are blind and rely on a screen reader.
  • Provide appropriate document structure
    • Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.
  • Provide headers for data tables
    • Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand table data.
  • Ensure users can complete and submit all forms
    • Every form element (text field, checkbox, dropdown list) has a label and make sure that label is associated to the correct form element using the <label> element. Make sure the user can submit the form and recover from any errors.
  • Ensure links make sense out of context
    • Every link should make sense if the link text is read by itself. Screen users may choose to read only the links on a webpage. Certain phrases like “click here” and “more” must be avoided.
  • Caption and/or provide transcripts for media
    • Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.
  • Ensure accessibility of non-HTML content, including PDF files, Microsoft Word Documents, PowerPoint Presentations, and Adobe Flash content
    • PDF and non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.
  • Allow users to skip repetitive elements on the page
    • Provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a “Skip to Main Content,” or “Skip Navigation” link at the top of the page.
  • Do not rely on color alone to convey meaning
    • The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.
  • Make sure content is clearly written and easy to read
    • There are many ways to make your content easier to understand. Write clearly, use easily legible fonts, and use headings and lists appropriately.
  • Make JavaScript accessible
    • Ensure that JavaScript event handlers are device independent (i.e.—they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function or make sense.
  • Design to standards
    • HTML compliant and accessible pages are more robust and provide better search engine optimization. CSS allows separation of content and presentation, providing for more flexibility and accessibility of content.

Layers of Guidance:

  • Principles
    • Perceivable: Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies
    • Operable: Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device
    • Understandable: Content is clear and limits confusion and ambiguity
    • Robust: A wide range of technologies (including old and new user agents and assistive technologies) can access the content
  • Guidelines
    • Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language
      • Success Criteria: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose
    • Timebased Media: Provide alternatives for time-based media
      • Success Criteria: Prerecorded audio-only and video-only must have equivalent alternative, captions must be provided for all audio in synchronized media, audio descriptions must be provided in synchronized media (unless media is a media alternative for text and is clearly labeled as such)
    • Adaptable: Create content that can be presented in a different ways (for example: simpler layout) without losing information or structure
      • Success Criteria: Sequence of content should present meaning, information and relationships conveyed through presentation should be programmatically determines or available in text, instructions do not rely on sensory characteristics (such as shapes, sizes, location, orientation, or sounds)
    • Distinguishable: Make it easier for users to see and hear content including separating foreground from background
      • Success Criteria: Color is not used as the only visual means of conveying information, and audio on a Web page playing automatically for more than 3 seconds has mechanisms available to pause, stop, or control audio volume. Visual presentations must have proper contrast ratios, text must be able to be resized without assistive technology, and text must be used to convey information rather than images of text.
    • Keyboard Accessible: Make all functionality available from a keyboard
      • Success Criteria: All functionality of content is operable through keyboard interface without timings for individual keystrokes, and focus must be able to move away from a component using only a keyboard interface.
    • Enough Time: Provide users enough time to read and use content
      • Success Criteria: For each time limit, the user must be able to turn off, adjust, or extend the limit. Moving, blinking, scrolling, or auto-updating information must have a mechanism for the user to pause, stop, or hide it.
    • Seizures: Do not design content in a way that is known to cause seizures
      • Success Criteria: Web pages cannot contain anything with more than three flashes within one second.
    • Navigable: Provide ways to help users navigate, find content, and determine where they are
      • Success Criteria: Mechanisms must be provided to bypass blocks, pages must have titles that describe topic or purpose, Web pages must navigate sequentially, and the purpose of each link must be determined within link text alone.
    • Readable: Make text content readable and understandable
      • Success Criteria: The language of the page must be able to be programmatically determined.
    • Predictable: Make Web pages appear and operate in predictable ways
      • Success Criteria: When any component receives focus, it cannot initiate a change of context, and changing the setting of any user interface component cannot automatically cause a change of context (unless user has been advised of behavior prior to use of component)
    • Input Assistance: Help users avoid and correct mistakes
      • Success Criteria: If an input error is automatically detected, the item must be identified and described to the user in text. Labels or instructions must also be provided when content requires user input.
    • Compatible: Maximize compatibility with current and future user agents, including assistive technologies
      • Success Criteria: Elements implemented using markup languages must have complete start and end tags, must be nested properly, and must not contain duplicate attributes. All user interface components must have programmatically determines name and role; states, properties, and values must be able to be programmatically set, and notification of changes must be available to user agents (including assistive technologies)

The Web offers many opportunities to people with abilities and disabilities that are unavailable through any other medium. If a Web site is not created with accessibility in mind, it may unintentionally exclude segments of the population. To avoid the exclusion of people with disabilities, following the standards and guidelines provided can help ensure accessibility by all people of a population. WebAIM.org provides checklists for WCAG 2.0 principles and techniques as well as Section 508 standards to maximize Web content accessibility.  Following these standards and guidelines often makes Web content more usable to all users in general.