Evaluating Cognitive Web Accessibility with WAVE

Introduction

WAVE is a web accessibility tool that can greatly assist in the evaluation of web content. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page. Before proceeding, be sure to read the Help page for an overview of using WAVE and details on specific things you may encounter.

WAVE, like any other automated tool, cannot tell you if your page is accessible, but it can help in human evaluation of web accessibility. Evaluating cognitive web accessibility is particularly difficult because it is very difficult to measure cognitive load, consistency, and other non-quantitative elements in an automated process. Despite these difficulties, WAVE does provide some assistance in evaluating cognitive web accessibility.

The following checklist outlines things you can do to evaluate and improve cognitive web accessibility. This checklist is broken into general areas of cognitive accessibility. Many of the items listed are things that you must check for yourself on the page. Some checkpoints may be difficult to measure or may not have a clear answer (for example, how do you tell if language is "simple"?). This checklist, however, should help you determine the general level of cognitive accessibility and can help you identify areas where improvements can be made. WAVE can facilitate evaluation of many of the checkpoints. WAVE icons that appear adjacent to a checkpoint indicate specific WAVE rules that can be of assistance to you. You can click on the icons to view details about that icon, why it might appear in your content, and what you can do to improve accessibility. If you see these icons in a WAVE report, pay particular attention to them because they likely indicate an aspect of the page that can affect cognitive accessibility.

You may use the WAVE web site (simply type the web page address at the top of this page), or use the WAVE Chrome or Firefox extension in conjunction with this checklist.

Cognitive Web Accessibility Checklist

Consistency

• Ensure that navigation is consistent throughout a site
  Navigation placement, display, and functionality should not change from page to page.
• Similar interface elements and similar interactions should produce predictably similar results ()

Transformability

• Support increased text sizes
  Increase the text size 200-300%. The page should remain readable and functional when text is increased.
• Ensure images are readable and comprehensible when enlarged
  Scale the page 200-300%. Content within images, particularly text, should be legible and understandable. Use true text instead of text within images when feasible.
• Ensure color alone is not used to convey content
  Select the "No Styles" button in WAVE. Ensure that no content is lost when color is removed or changed.
• Support the disabling of images and/or styles
  Select the "No Styles" button in WAVE. Ensure that the page remains readable and functional when styles are disabled. Select the text-only view in WAVE and ensure that all content is available when images are disabled (alternative text will be displayed instead).

Multi-modality

• Provide content in multiple mediums (, , )
  Video or audio alternatives provide an additional method of perceiving content. A text alternative (captions and/or a transcript) should be provided for video and audio content. Closed captioning, which gives users the option to turn off the captions, is optimal.
• Use contextually-relevant images to enhance content
  Images can be used to convey or enhance content. Illustration, diagrams, icons, and animations can convey complex information.
• Pair icons or graphics with text to provide contextual cues and help with content comprehension

Focus and Structure

• Use white space and visual design elements to focus user attention
  The design of a page (white space, color, images, etc.) should focus the user on what is most important (typically the body content of that page).
• Avoid distractions (, )
  Animation, varying or unusual font faces, contrasting color or images, or other distracters that pull attention away from content should be avoided. Complex or "busy" background images can draw attention away from the content. Avoid pop-up windows and blinking or moving elements.
• Use stylistic differences to highlight important content, but do so conservatively
  Use various stylistic elements (italics, bold, color, brief animation, or differently-styled content) to highlight important content. Overuse can result in the loss of differentiation. Do not use italics or bold on long sections of text. Avoid ALL CAPS.
• Organize content into well-defined groups or chunks, using headings, lists, and other visual mechanisms (, , , - , , , )
  Break long pages into shorter sections with appropriate headings (use true and visually significant headings rather than simply big bold text). Select the Outline View in WAVE to check the heading structure. Each page should typically have one <h1> and heading levels should not be skipped. Very long pages may be divided into multiple, sequenced pages. Unordered, ordered, and definition lists provide a visual structuring and convey semantic meaning (e.g., an unordered list conveys a group of parallel items). Use shorter, multi-step forms for complex interactions, rather than lengthy, all-in-one forms.
• Use white space for separation
  White space is a design term that refers to empty space between elements in a page. It is not necessarily the color white. White space should be used to separate navigation from main body, body text from side elements and footer, main content from supplementary items (floating boxes, for example) and to separate headings, paragraphs, and other body text.
• Avoid background sounds (, )
  Give the user control over playing audio content within the page, or at a minimum, give the user control to stop the background sounds.

Readability and Language

• Use language that is as simple as is appropriate for the content
• Avoid tangential, extraneous, or non-relevant information
  Stick to the content at hand.
• Use correct grammar and spelling
  Use a spell-checker. Write clearly and simply.
• Maintain a reading level that is adequate for the audience
  Readability tests can be performed on the body text (for accuracy, do not include web site navigation, side bar, footer, or other extraneous text elements in the evaluation). Generally, web content should be understandable by those with a lower secondary education, though an elementary reading level may be necessary for some users with certain cognitive or learning disabilities. More complex content may necessitate diligence in implementing other recommendations in this list.
• Be careful with colloquialisms, non-literal text, and jargon
• Expand abbreviations and acronyms
  Provide the full meaning in the first instance and use the <abbr> or <acronym> elements. Complex content may necessitate a glossary.
• Provide summaries, introductions, or a table of contents for complex or lengthy content
• Be succinct
  Provide the minimum amount of text necessary to convey the content.
• Ensure text readability
  
  • Line height
    The amount of space between lines should generally be no less than half the character height.
  • Line length
    Very long lines of text (more than around 80 characters per line) are more difficult to read.
  • Letter spacing, word spacing, and justification
    Provide appropriate (but not too much) letter and word spacing. Avoid full justified text as it results in variable spacing between words and can result in distracting "rivers of white" - patterns of white spaces that flow downward through body text.
  • Sans-serif fonts
    These fonts are generally regarded to be more appealing for body text.
  • Adequate text size ()
    Text should generally be at least 10 pixels in size.
  • Content appropriate fonts
    Visually appealing and content-appropriate fonts affect satisfaction, readability, and comprehension.
  • Paragraph length
    Keep paragraph length short.
  • Adequate color contrast
    Ensure text is easily discerned against the background and that links can be easily differentiated from surrounding text.
  • No horizontal scrolling
    Avoid horizontal scrolling when the text size is increased 200-300%

Orientation and Error Prevention/Recovery

• Give users control over time sensitive content changes (, )
  Avoid automatic refreshes or redirects. Allow users to control content updates or changes. Avoid unnecessary time-outs or expirations. Allow users to request more time.
• Provide adequate instructions and cues for forms (, , , , , , , , )
  Ensure required elements and formatting requirements are identified. Provide associated and descriptive form labels and fieldsets/legends.
• Give users clear and accessible form error messages and provide mechanisms for resolving form errors and resubmitting the form
• Give feedback on a user's actions
  Confirm correct choices and alert users to errors or possible errors.
• Provide instructions for unfamiliar or complex interfaces
• Use breadcrumbs, indicators, or cues to indicate location or progress
  Allow users to quickly determine where they are at in the structure of a web site (e.g., a currently active "tab" or Home > Products > Widget, for example) or within a sequence (Step 2 of 4). Next/Previous options should be provided for sequential tasks.
• Allow critical functions to be confirmed and/or canceled/reversed
• Provide adequately-sized clickable targets and ensure functional elements appear clickable
  Use labels for form elements, particularly small checkboxes and radio buttons, and ensure all clickable elements appear clickable and do not require exactness.
• Use underline for links only
• Provide multiple methods for finding content
  A logical navigation, search functionality, index, site map, table of contents, links within body text, supplementary or related links section, etc. all provide multiple ways for users to find content.

Assistive Technology Compatibility

Users with cognitive or learning disabilities often use screen readers or other assistive technologies to access content through various senses or to modify content to be best perceivable to them. Users with other physical or sensory disabilities also have a higher prevalence of cognitive or learning disabilities. The vast majority of WAVE icons indicate assistive technology errors, alerts, or features. Below are particular items to be aware of when evaluating assistive technology support for users with cognitive disabilities.

• Appropriate alternative text (, , , , , , , , , , , , , , , , )
  WAVE indicates problemmatic or potentially troublesome alternative text with a number of icons. Alternative text is displayed adjacent to images in WAVE. Ensure that the alternative text is equivalent and appropriate.
• Form labels (, , , , , , , , )
  <input>, <select>, and <textarea> must have descriptive and informative form labels. Ensure that the form label is descriptive and informative and that all necessary information for completing that form element is available within the label. Groups of checkboxes and radio buttons should have a descriptive fieldset/legend.
• Tables and table headers (, , , , )
  Table headers should adequately describe that column or row.
• Logical heading structure (, , , - )
  
• Links make sense out of context (avoid "click here", etc.) (, )
• A logical, intuitive reading and navigation order
  Select the Structure/Order view or Text-only View in WAVE to view the underlying reading/navigation order.
• Full keyboard accessibility (, , , , , , )
• Descriptive and informative page titles ()
• Frame titles
• Captions and transcripts

Funding for this material provided by the Office of Special Education and Rehabilitative Services Steppingstones of Technology Innovation Grant #H327A070057.