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