Digital Accessibility Checklist | ||||||
About the Checklist | ||||||
Accessible web pages help deliver delightful experiences to all users, including people with vision, mobility, auditory and cognitive disabilities. This checklist is provided to assist the City of Seattle, including web designers, developers, content creators, and purchasing agents, in creating and procuring accessible IT. All City of Seattle websites are required to meet the current Web Content Accessibility Guidelines (WCAG) 2.1 and Section 508 (required by federal law). |
||||||
Recommended Tools | ||||||
SiteImprove Accessibility Checker is another browser extension for Chrome that provides automatic accessibility checking. Seattle.gov has a Site Improve license so it's included for comparison. | ||||||
Contrast Ratio is an online tool to determine whether text and graphics has the proper contrast ratios with their backgrounds and adjacent graphics according to WCAG guidelines. | ||||||
Website/Application Reviewed | ||||||
Name/Link to website: | ||||||
Platforms: | ||||||
Reviewer: | ||||||
Principle | Tool instructions | # | Item | Checklist | Notes | References, Tutorials & Examples |
PERCEIVABLE | ||||||
Information and user interface components must be presentable to users in ways they can perceive. | ||||||
SiteImprove > Text alternatives > Errors related to images |
1 | Does media have text alternatives that convey the purpose? | 1.1.1 Non-text Content (Level A), 1.2.1 Audio-only and Video-only (Prerecorded) (Level A), 1.2.2 Captions (Prerecorded) (Level A), 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A) |
|||
a | Do the informative images have text alternatives so that they can be understood by the screenreader? | Select | ||||
b | Decorative images must not include text alternatives and must be ignored by the screen reader. Have they been excluded from having a text alternative? | Select | ||||
b | Are there good descriptions for informative images? | Select | Making images accessible - UW | |||
c | Are there transcripts for audio and captions for video, if present? | Select | Producing Accessible Media - UW | |||
Select conformance | ||||||
2 | Does the web page or document include headings, lists, ARIA landmarks, and other semantic elements to communicate document structure? | 2.4.6 Headings and Labels (Level AA) | ||||
SiteImprove > Look for any errors related to section headings | a | Does the page have h1 convey the headings, h2 convey major sections, h3 convey sub-sections and so on… ? | Select | |||
SiteImprove > Navigable > Focus order |
b | Are the lists on the page are always in the form of formatted bullet / numbered lists | Select | Providing structure in web pages and documents - UW | ||
Select conformance | ||||||
3 | Is the read order (tab order) logical and intuitive? | 1.3.2 Meaningful Sequence (Level A) | ||||
Manual > Navigate through the links on the page using just the Tab key to ensure the order is right | a | Does the order of the page make sense? | Select | |||
b | Are you able to navigate using just the keyboard (tab key) in a predictable and logical order ? | Select | Ensuring Proper Tab and Read Order - UW | |||
Select conformance | ||||||
4 | Are form fields within web pages and documents appropriately labelled and have clear structure? | 3.3.2 Labels or Instructions (Level A) | ||||
Site Improve > Activate error icon > Check for any errors related to form labels Manual > Browse through the page and ensure each form field is associated with a label which describes the input expected. |
a | Are the form fields appropriately labelled ? | Select | |||
Manual > Perform straw test : Pretend you are looking at the page through a straw. This simulates how the page will appear for partially sighted people who either have a limited field of vision or need to magnify the page to read it. This reveals relevant elements spaced too far apart in a way that will make it difficult to navigate the page. | a | Are related elements are in good proximity on performing the straw test? For eg. Is it clear which labels is associated with which field in the form? | Select | |||
Select conformance | ||||||
5 | Have you avoided depending on visual characteristics alone to highlight information? (Eg. Colors or shapes) | 1.4.1 Use of Color (Level A) | ||||
Manual > Browse the page text to observe any reference to visual characteristics for important information. Eg. Upcoming tasks are highlighted in red. | a | Have you avoided using color / shapes alone to convey information ? For example, “click the circle on the right” or “required fields are in red”. |
Select | Avoiding Reliance on Visual Characteristics - UW | ||
Select conformance | ||||||
6 | Does the interface have sufficient contrast between text color and background color? | 1.4.3 Contrast (Minimum) (Level AA) | ||||
SiteImprove > Distinguishable > Look for errors related to contrast Manual > Browse the images/charts/diagrams on the page and see if the colour contrast anywhere seems to hinder readability / view. > For doubtful elements get the background and foreground colour, and check if the contrast ratio is accessible using the contrast checker tool |
a | Are the colors used to depict different information in charts and diagrams (Eg. Pie charts, bar graphs etc.) having sufficient contrast? | N/A | 1.4.6 Contrast (Enhanced) | ||
Contrast Ratio is an online tool to determine whether text and graphics has the proper contrast ratios with their backgrounds and adjacent graphics according to WCAG guidelines. | Select conformance | 1.4.11 Non-text Contrast (Level AA, draft) | ||||
Manual > Press Ctrl + to enlarge the text to 200% > Check if still readable with well structured sections. | 7 | Does the content scale well when text is enlarged up to 200 percent? | Select conformance | Supporting Enlarged Text - UW | ||
OPERABLE | ||||||
User interface components and navigation must be operable. | ||||||
8 | Can elements/controls and content that can be accessed with the mouse be accessed with the keyboard in the expected way? | 1.1.1 Non-text Content (Level A), 1.2.1 Audio-only and Video-only (Prerecorded) (Level A), 1.2.2 Captions (Prerecorded) (Level A), 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A) |
||||
Manual > Use the mouse to determine what elements on the page are interactive and then use the Tab key to move focus through the page. When focus gets to an interactive element, use the keyboard cheat sheet to try and interact. Keyboard cheat sheet Move focus to the next focusable element - Tab Move focus to the previous focusable element - Shift + Tab Activate a link - Enter Activate a button - Enter or Space Check or uncheck a checkbox - Space Change a radio button selection - Up and down arrow keys Change a select dropdown selection - Up and down arrow keys |
a | Is the keyboard focus always visually indicated when using the Tab key to navigate the page? | No | 2.4.7 Focus Visible (Level AA) | ||
Select conformance | 2.1.1 Keyboard (Level A), 1.4.13 Content on Hover or Focus (Level AA, draft) | |||||
9 | Have features (audio/visual) that scroll or update automatically (e.g., slideshows, carousels, animations, graphics) been avoided? | 2.2.2 Pause, Stop, Hide (Level A) | ||||
Manual > Browse the page to observe any audio/visual elements > Interact with them to ensure they can be controlled by the user (pause/play/stop) > Also check for flashing and flickering content | a | Are animations or graphics that move without the user’s input or ability to pause or stop them avoided ? | N/A | 1.4.2 Audio Control (Level A) | ||
b | Has the usage of content that flashes or flickers been avoided ? Ignore when not applicable to website. |
N/A | 2.3.1 Three Flashes or Below Threshold | |||
Select conformance | ||||||
10 | Do pages that have time limits include mechanisms for adjusting those limits for users who need more time? | 2.2.1 Timing Adjustable | ||||
Manual > Check/Enquire if the page has any features with an associated time-limit for interactivity. Common features include payment process, log out after inactivity, form submission within a certain time limit > If any such features are present, check if they offer a way to increase the time limit without affecting the user's progress Site Improve > Enough time > Look for time adjustable errors |
a | Is there provision to turn off / adjust / extend the time limit on these pages? | N/A | |||
Select conformance | ||||||
11 | Does the page have a title that clearly describes the page’s purpose? | 2.4.2 Page Titled (Level A) | ||||
Manual > Hover the mouse over the browser tab to see the whole page title. | a | Is the page title in the standard format? [Page Name - Dept] | Seattle.gov. Examples of correct usage: Community Liaisons – Neighborhoods | Seattle.gov TechHire – Economic Development | Seattle.gov |
Select | Providing an informative title - UW | ||
Select conformance | ||||||
Manual > Browse the page for links/shortcuts with capability to bypass content or sections of the webpage. | 12 | Are mechanisms in place that allow users to bypass blocks of content (e.g., a “skip to main content” link on a web page or bookmarks in a PDF)? | Select conformance | 2.4.1 Bypass Blocks | ||
Facilitating Efficient Navigation - UW | ||||||
Manual > Browse the page to check different navigation options available | 13 | Does the website include two or more ways of finding content, such as a navigation menu, search feature, or site map? | Select conformance | 2.4.5 Multiple Ways | ||
Manual > Observe if the links on the page are ambiguous and not providing enough context about the action on clicking the link | 14 | Do links convey their purpose through their text, independent of context? (e.g. if a link generically says “read more,” relabel to “read more about [x].” | Select conformance | 2.4.4 Link Purpose (In Context) (Level A) https://www.washington.edu/accessibility/links/ |
||
UNDERSTANDABLE | ||||||
Information and the operation of user interface must be understandable. | ||||||
Manual > For any existing form on your webpage, go through the process of filling up the form as a user > Notice any fields which break context when you interact with them. Eg: Any of the steps in a form can prematurely triggers a change of context such as opening a new window, moving focus to a different component, going to a new page, or significantly re-arranging the content of the page. Such triggers should be avoided. | 15 | Have links, controls, or form fields that trigger a change in context been avoided when filling out a form? |
Select conformance | Providing Predictable Behavior - UW | ||
Manual > Browse through the different pages on the website to see if a consistent navigation is present such as a consistent link to homepage, forward and backward links on every page, consistent direct or indirect access to high level sitemap of the website | 16 | Does the website include consistent navigation? | Select conformance | Providing Consistent Site-wide Navigation - UW | ||
Manual > Error messages for form inputs must be near the associated input field and accessible | 17 | Do online forms provide helpful, accessible error and verification messages? | Select conformance | Accessible Methods of Form Validation - UW | ||
Manual > Use Right click then Inspect to get to the developer tools which shows code of the webpage > Look for the <html> tags at the beginning of the code > Look for a mention such as <html lang="en">. Also for parts of a page in a different language than the rest of the page > Right click on that part to Inspect and look for a mention such as <p lang="fr"> |
18 | Has the language of the web page or document (or individual parts of a multilingual document) been defined? | Select conformance | Identifying Language of a Document and its Parts - UW | ||
ROBUST | ||||||
Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies. | ||||||
SiteImprov > Look for any errors which indicate an issue with the code/HTML | 19 | Is the web page coded using valid HTML? | Select conformance | Validating Your Code - UW | ||
SiteImprov > Look for errors which mention aria-label/WAI-ARIA label | 20 | Do rich, dynamic, web interfaces, such as modal windows, drop-down menus, slideshows, and carousels, include ARIA markup? | Select conformance | Using ARIA for Web Applications - UW | ||
MOBILE ACCESSIBILITY [Please open the webpage/application on your phone] | ||||||
The content must adapt to a mobile device and continue following accessibility standards | ||||||
Manual | 1 | Content should not be restricted to a single orientation, such as portrait or landscape, unless essential. | Select conformance | WCAG 2.1: Orientation | ||
Manual | 2 | Can the browser pinch zoom can be used to zoom the page to 200%? | Select conformance | W3 Accessibility Guidelines | ||
Manual | 3 | Are the touch targets are at least 9 mm [~38px] high by 9 mm [~38px] wide and surrounded by a small amount of inactive state? | Select conformance | |||
Manual | 4 | Are the interactive elements of the webpage (buttons, links etc.) positioned where they can easily be reached when the device is held in different positions? | Select conformance | |||
More resources on mobile accessibility | ||||||
W3 Accessibility Guidelines | ||||||
https://www.smashingmagazine.com/2014/05/mobile-accessibility-why-care-what-can-you-do/ | ||||||
https://www.microassist.com/digital-accessibility/mobile-application-accessibility-part-2-of-2/ | ||||||
Accessibility settings for different devices | ||||||
https://support.google.com/accessibility/android/answer/6006564?hl=en | Android | |||||
https://support.apple.com/guide/iphone/get-started-with-accessibility-features-iph3e2e4367/ios | iOS | |||||
Keyboard cheat sheet | ||||||
Action Move focus to the next focusable element Move focus to the previous focusable element Activate a link Activate a button Check or uncheck a checkbox Change a radio button selection Change a select dropdown selection |
Keystroke Tab Shift + Tab Enter Enter or Space Space Up and down arrow keys Up and down arrow keys |
|||||
More resources | ||||||
Windows Keyboard Shortcuts Cheatsheet | ||||||
Mac Keyboard Shortcuts Cheatsheet | ||||||
Additional Manual Validation | ||||||
Voiceover for MacOS | ||||||
1. Get out some headphones | ||||||
2. Go into System Preferences > Keyboard > Shortcuts and make sure “All controls” is selected (if you haven’t already) | ||||||
3. Go into System Preferences > Accessibility > VoiceOver > Open VoiceOver Utility… > Speech and reduce the rate to around 40 until you get used to the audio | ||||||
4. Fire up the tutorial under System Preferences > Accessibility > VoiceOver > Open VoiceOver Training… | ||||||
5. Open up Safari to test your webpage | ||||||
VoiceOver uses Control + Option as its main set of modifier keys. These will be used to perform most commands for reading the page. Unlike most other screen readers, VoiceOver does not have separate browsing and interacting modes, so users will use the VoiceOver modifier keys to read and browser native keystrokes for interacting. | ||||||
VoiceOver sometimes puts chunks of content into what it identifies as "groups". You can use the drill down/drill up commands to enter and exit groups. When you've reached the end of a group, or the end of a web page, you'll hear a knocking noise. | ||||||
Action Turn VO on and off Stop reading Open Rotor menu Close Rotor menu Control the rotor item Navigate to previous Rotor menu Jump from a selected Rotor item to that element on the page Start reading from the current cursor location Read the next element Read the previous element Drill down into a group Drill back up out of a group |
Keystroke Command (⌘) + F5 Control Control + Option + U Escape ← / → ↑ / ↓ Enter/Return Control + Option + A Control + Option + → Control + Option + ← Control + Option + Shift + ↓ Control + Option + Shift + ↑ |
|||||
Voiceover Commands and Gestures | ||||||
Narrator for Windows | ||||||
1. Get out some headphones | ||||||
2. Three ways to start and stop narrator Press Windows logo key + Ctrl + Enter together to start Narrator. Press these keys again to stop Narrator. If you're using a previous version of Windows, press Windows logo key + Enter together to start and stop Narrator. On many keyboards, the Windows logo key is located on the bottom row of keys, to the left or right of the Alt key. Press Windows logo key + Ctrl + N to open Narrator settings, and then turn on the toggle under Use Narrator. Press Ctrl + Alt + Del to go to your sign-in screen, select the Ease of access button in the lower-right corner, then turn on the toggle under Narrator. |
||||||
3. Learn to use narrator from the quickstart tutorial available in Narrator Home. | ||||||
4. Open Microsoft Edge and start testing your webpage. | ||||||
Action Start or stop Narrator Exit Narrator Toggle input learning Move to next item Move to previous item Show commands list Show commands for current item Do primary action Toggle search mode Read current time and date Describe image using an online service Provide Narrator feedback Lock Narrator key Toggle developer mode Pass keys to application Toggle mouse mode |
Keystroke Windows + Ctrl + Enter Narrator + Esc Narrator + 1 Narrator + Right arrow Narrator + Left arrow Narrator + F1 Narrator + F2 Narrator + Enter Narrator + Ctrl + Enter Narrator + F12 Narrator + Ctrl + D Narrator + Alt + F Narrator + Z Narrator + Ctrl + F12 Narrator + 3 Narrator + Alt + M |
|||||
Narrator Commands and Gestures | ||||||
NVDA for Windows (Alternate screenreading tool) | ||||||
1. Get out some headphones | ||||||
2. NVDA quick start To start narration: Control, Alt, N and to pause narration: Control Key To hear the title of the current window: Insert T To hear the contents of the current window: Insert B. To quit: Insert, Q |
||||||
NVDA cheatsheet |