It's official: Level Access and eSSENTIAL Accessibility are becoming one! Read the Press Release.

Setting out to evaluate the accessibility of an entire site can seem especially daunting at first, as it can include a vast number of pages, plus an even greater number of modules (distinct parts of a system, like a navigation bar or a ‘Contact Us’ form). When selecting a list of modules or pages for a given IT system, the developer should attempt to capture a set that is representative of the system as a whole. This technique will allow you to narrow down the amount pages tested, saving precious time while also giving you critical insights in the most efficient manner.

A representative set of modules should provide a sample of the different interactive and display elements within the system and a good cross-section of the visual interface elements within the application, to match the variety of the typical user experience. Additionally, most violations occur in patterns and can be found (and later corrected) in common locations on your system. So, fixing certain strategic issues that appear on a representative set of pages can have a greater effect on your efforts to reduce risk and increase overall accessibility.

Instead of performing a crawl on the entire website, you can analyze pages with the templates highlighted in the representative sample using Access Assistant, the AMP toolbar that allows you to perform advanced testing right from the browser. If you are not an AMP customer, you can try the free community version for the Chrome browser. This method allows you to identify the common issues in your modules and pages, so your team will be able to identify and fix duplicate errors across your entire system.

The following suggested pages will give you a general sense of what you should use from your website to create a representative sample. Each topic will be accompanied by a screenshot and a best practice associated with the relevant display element. More details on best practices can be found in the Best Practice librarian AMP (the Accessibility Management Platform).It is recommended to put yourself in a user with disabilities’ shoes when creating the sample. You mostly want to focus on functional elements that allow a user to accomplish a task. It is also important to capture pages that have a large diversity of elements and receive a large amount of traffic. Before diving into your search, take a minute to read through the set of factors to keep in mind when identifying modules in a representative sample:

  • Page Templates: Templates are usually the backbone of a website and are used across multiple pages in a web application. When you test a template, you will likely get common results that apply to multiple pages.
  • Unique and High-Profile Pages: It is important to test high-traffic pages because they are exposed to the most users and most likely important to the user experience. Unique pages with significant traffic should also be tested since they may not share the same issues as other pages.
  • Pages with Custom Controls: These pages often contain ARIA and standard markup errors.
  • Critical Paths: It is important to test the main path navigations for important tasks since they are critical to the end-user experience (i.e. For a banking site, this could be applying for a credit card; for a retail site, this could be adding an item to a cart, and checking out).
  • Navigation Components and Pages: Headers, footers, and other important navigation components that are found on almost every page.
  • Settings, Preferences, or Support Pages: These can be critical to the user experience and should be tested, unless they are part of templates already included by other modules in the representative sample.
  • Multimedia: Check for closed captioning with videos, proper alternative text for images, and accessible custom controls.
  • User Types or Roles: When applicable, look into environments rendered for both admin and end-user experience.
  • Two-Way Communication (Chat Functionality): This is an expansion of CVAA standards. When applicable, look into two-way chat support accessibility features (even if it is a third party).

Here are some examples of display elements to test for on pages that will generally belong in a representative sample:

Home Page:

It usually receives the most amount of traffic and will often contain a diversity of display elements such as site navigation components, a page header, footer, and decorative images.

Suggested Display Elements to test on a home page and example best practices:

  • Header (usually contains links, menu, navigation bar, etc., more on headers here)
    • Ensure navigation and input focus is indicated visually and programmatically
    • Ensure sub-menu items are keyboard accessible and contain text equivalents
  • Carousel/Slider elements that contain images and text (What is a carousel?)
    • Ensure text and images of text provide sufficient contrast
    • Ensure alternative text for images is meaningful
  • Image Links (More on Image concepts here)
    • Avoid redundant alt text for images with adjacent text or links
    • Ensure links can be activated from the keyboard
  • Thumbnail (contains links and images)
    • Provide a mechanism for skipping past repetitive navigation links
    • Ensure links with different targets have unique text
  • Video
    • Provide text transcript or audio track of video only presentations
    • Ensure video, multimedia or animations that play automatically can be controlled within the containing page
  • Iframe
    • Ensure relationships between frames are properly indicated
  • Footer (contains decorative images, links, and text)
    • Ensure non-distinct header and footer content are labeled as artifacts
    • Ensure sufficient contrast is provided when background images are not available

Navigation Bar:

Example navigation menuBy tabbing through a navigation bar and clicking links you will discover unique modules in your website. Content-heavy pages must be organized in a chronological manner, so an end user can successfully tab through the information found on the page.

Suggested Display Elements to test on a navigation bar, or similar module, and example best practices:

  • Headings (What are headings?)
    • Ensure focus order is logical
    • Avoid unnecessary use of heading element tags
  • Links
    • Ensure links are tagged structurally as links
    • Provide a mechanism for skipping past repetitive navigation links
  • Lists
    • Ensure list items are structured properly
    • Ensure that list and table columns can be sortable via the keyboard
  • Drop-down, Expandable or Collapsible Menus (More on menu elements here)
    • Ensure option elements in large lists are grouped
    • Ensure keyboard focus returns properly when menus are closed
  • Charts and Graphs
    • Ensure charts and graphs provide an informative and visible alternative description
    • Ensure objects and graphics provide textual names, descriptions, role, state, and value
  • Tables (More on tables here)
    • Ensure absolute sizing in tables is avoided
    • Ensure data table header cells are not blank
  • Radio Buttons
    • Ensure radio button groups are properly formed
    • Ensure radio buttons are grouped
  • Decorative image
    • Ensure decorative images are tagged as artifacts
    • Ensure non-decorative images appear in line with the text
  • Navigation bars
    • Ensure scrolling occurs as needed when logical navigation is used
    • Ensure navigation and input focus is indicated visually and programmatically

Third-Party Extensions and Forms:

Things like interactive maps can be complex components of the user experience, and not all Third-Party platforms are accessible. It’s therefore important to include such third-party extensions and forms in your representative sample. Sign-in pages are another example of unique and high-profile pages that should be tested.

Suggested Display Elements to test on third-party extensions/forms and example best practices:

  • Iframes
    • Ensure frames do not use absolute sizing
    • Ensure new windows or frames do not open without a warning
  • Navigation bars
    • Ensure scrolling occurs as needed when logical navigation is used
    • Ensure navigation and input focus is indicated visually and programmatically
  • Image links
    • Avoid redundant alt text for images with adjacent text or links
    • Ensure links can be activated from the keyboard
    • Ensure links with different targets have unique text
  • Drop-down Menus
    • Ensure fields indicate attached menus
    • Ensure menus can be opened from the keyboard
  • Forms (What are Forms?)
    • Avoid improper nesting of form elements and links
    • Ensure all fillable form fields are contained in protected sections of the document
  • Buttons
    • Ensure check-boxes and radio buttons are positioned to the left of the labels
    • Ensure radio button groups are properly formed

Animated Pages and Multimedia: 

example mulitmediaIt’s important to evaluate pages which contain interactive features, that include videos or even download buttons on a page that redirect an end-user to a PDF (which must also be tested for accessibility).

Suggested Display Elements to test on animated pages or multimedia and example best practices:

  • Headings
    • Ensure focus order is logical
    • Avoid unnecessary use of heading element tags
  • Div Elements
    • Ensure multi-part (grouped) controls are accessible and provide context
    • Ensure controls provide full keyboard functionality
    • Ensure all input elements and controls can receive focus
  • Videos
    • Ensure captions can be rendered or passed through from recorded video programming
    • Provide an alternative text equivalent to prerecorded synchronized multimedia and video content
  • Animation
    • Ensure alternatives to animation are justified
    • Ensure animation content is sufficiently described in a text alternative
    • Ensure video, multimedia or animations that play automatically can be controlled within the containing page
  • Buttons
    • Ensure the same link text for links with different targets is avoided
    • Provide alternative text for image buttons
  • PDF
    • Ensure all comments, sticky notes, and reviews are removed from the PDF document
    • Ensure hidden content is not in the PDF file