Skip to main content

Accessibility Quick Checks

Walk through these accessibility quick checks to uncover the accessibility barriers automated testing tools may miss

Introduction

Access to websites and electronic content is integral to the academic, research, and engagement activities available at Stanford University. Per Stanford’s Digital Accessibility policy, electronic content, such as websites, web- and mobile-based applications, audio and video media, and electronic documents, are to conform at a minimum with the Web Content Accessibility Guidelines (WCAG) 2.0, Level A and AA standards.

These initial “quick checks” provide a simple way to determine if the electronic content is minimally accessible or can be made accessible. Contact the Office of Digital Accessibility if you have questions about your evaluation results or to request a detailed accessibility evaluation.

Review the Testing Scope and Test Criteria sections below, then follow the Accessibility Evaluation Quick Checks guide to manually assess your web pages or other electronic content.

Testing every page of a site is not realistic. Instead, use a representative sampling technique to find pages that will provide the best idea of the accessibility of the site. When considering which pages to test:

  1. High Traffic Pages: Some pages will have more traffic than others. For example, the homepage or landing page will be visited by everyone and is, therefore a critical page to test.
  2. Critical Paths: If the website has a specific function, then test the entire user path. For example, for a store website, test all the pages involved in adding something to the cart and checking out.
  3. Interactive Pages: If there are pages that have user interaction, such as forms, then these are good pages to test, as the more complex a page is, the more likely it is to cause accessibility issues.
  4. Combined Features: Test pages that have the most features on them. For example, if one page has a news feed and another page has a search form, but a third page has both, test the page with both features.

Further, there are pages and features that should not be tested. These include:

  1. Dev/Test Environment Features: When working on a pre-production or test environment, do not test anything that is a direct result of that environment. For example, if a login to access the site will be removed or replaced by single sign-on, do not test those features. Also, note that testing is on a vendor's test platform, there might be an option to theme the site with different colors once moved to production, so color might be less of an issue.
  2. Similar Pages or Features: Many pages on a website will be very similar, or even identical from a structural point of view. Do not spend time testing very similar basic content pages.

Many of the issues presented below are fairly straightforward and evaluated on a pass/fail basis. However, many others will require some judgment to be applied. For example, all images require an ALT attribute (or title for SVG images) which is either present or not. But what is written in that ALT, or that ALT text being empty for decorative images is subject to interpretation. Try to approach each element tested from the perspective of a person with a disability. What information would a person need to be presented if the images were not present, how would a person without the ability to use a mouse interact with this element, etc.

For each test, assign one of the following scores, which will be discussed in detail for each, but can be summarized as:

  • Pass: This met the criteria.
  • Partial Fail: This mostly meets the criteria, but there were aspects that would create barriers.
  • Fail: This mostly or completely did not meet the criteria.
  • Not Applicable: The criteria doesn't apply to the pages tested.
  • Unknown: This was untestable on the pages tested.

Review these accessibility requirements for your website.

1. Automated Test:The website/electronic content does not show significant errors from a browser-based automated accessibility testing tool.
2. Page Title:A page title is present in the browser tab that is unique and appropriate to the page content and/or task.
3.Browser Zoom:When the web page is zoomed to 200%, all content and interactive elements are still visible and functional.
4. Skip Nav:A “Skip Navigation” solution is present for pages with repeated navigation.​
5. Visible Focus and Logical Order:The browser focus indicator is visible and distinguishable when navigating all interactive elements with the keyboard. The focus moves in a logical sequence through interactive elements.
6. Keyboard:All interactive elements (links, buttons, accordions, etc.) are operable from the keyboard.
7. Dialogs:Modal dialogs correctly retain keyboard focus when open and can be closed via the keyboard.
8. Images:Alternative text is provided for all informative images and appropriately describes the content and/or purpose of the image.
9. Text Contrast:Text has good contrast with the background colors.
10. Captions:Videos have accurate captions (no auto-generated captions).
11. Transcripts:Audio files have accurate transcripts (no auto-generated transcripts).
12. Session Timeout:​Time-out notifications allow at least 20 seconds for the user to modify or extend the interaction time period using a simple keypress.
13. Animation:Any moving, flashing, or blinking content, such as carousels, notifications, or auto-play videos lasting for more than five seconds, have a mechanism to pause, stop, or hide that animation or movement.
14. Labels:Form fields have persistent visible labels (i.e., not just placeholder text that disappears when the user starts typing) that are accurate and properly associated with the fields.
15. Errors:​If a form displays any input errors, those errors are clearly identified, and focus is directed back to the invalid field.
16. Meaningful Links and Buttons:​Hyperlinks and buttons have unique or descriptive text. The purpose of the link or button can be determined from its text.
17. Headings and Structure:Headings are properly marked using appropriate HTML H1-H6 elements and are correctly used to group and organize page content. Structural relationships, such as tabular data and lists, use appropriate markup.