[TOC]
Created By: Sarah Watts and Scott Heggen
Version: 0
Link to Google Doc
Anywhere from 15 to 20% percent of people are disabled. If a website is not accessible then there are literally millions of people that are unable to access your website. If you have a website you want to make sure that everyone can us it, because you are proud of it, you want to make sure that it works. It's also a legal issue. The college would be open to lawsuits if there's website in not accessible. Website accessibility isn't that hard either, it just adds a couple of steps to your coding routine.
Before you issue a pull request that touches the front end (HTML, JAVASCRIPT, CSS) in any way, you MUST go through accessibility testing. If you code fails at any time during the "Beginner" portion of the checklist you must fix it before you're pull request can be accepted. You're pull request will not be accepted if it fails at at any point during the "Beginner" portion of the checklist
A lot of you don't know how to do website accessibility testing. So below is a link of a video run through of a basic accessibility test.
How to do accessibility checks:
One of the thing you will need to download is a screen reader. If you have a PC you will be using NVDA, if you have a MAC you can just built in voice over. NVDA is a good screen reader, and I've been told by blind friend that it's better than the paid one anyway. Anyway, below are links that should help you learn how to work the screen readers since there are shortcuts that you need to use, because you want to navigate the sight a way a blind person would.
NVDA Basics:
Voice Over Basics:
- https://youtu.be/5R-6WvAihms
- https://help.apple.com/voiceover/info/guide/10.8/English.lproj/index.html
Screen readers are more compatible with certain browsers. For NVDA you need to use Firefox for testing and for Voice Over you need to use safari.
**Browsers: **
- Firefox
- Google Chrome
- Internet Explorer/Edge
- Safari (Mac Only)
Browser Extension (Works for both Chrome and Firefox):
Here is a playlist that is contains about 20 videos that are really helpful teaching web accessibility.
Below is the checklist that pertains to all the websites. It is based on The Website Accessibility Guidelines version 2.0 created by the W3C. There are three levels: Beginner, Intermediate, and Advanced. We are not expecting to reach the Advanced level, right now we just want to make sure that every website at least fits the Beginner level and then work up from there.
In order for your page to meet the minimum you need to have all the items on the Beginner checklist.
- Are there text alternative for non-text content that is not purely for decoration? (Correct Answer: Yes, N/A)
- Is there any video present on the page? If so,
- Is there an alternative to video-only and audio-only content? (Correct Answer: Yes)
- Are captions provided for any video? (Correct Answer: Yes)
- Is there a second alternative for video with audio? (Correct Answer: Yes)
- Does the page have a logical structure? (Correct Answer: Yes)
- Is everything presented in meaningful order? (Correct Answer: Yes)
- Is there more than one sense used for instructions? (Correct Answer: Yes)
- Is there any audio on the page? If so,
- Does the audio automatically play? (Correct Answer: No)
- Does the presentation of any material rely solely on color? (Correct Answer: No)
- Does the focus tab order make logical sense? (Correct Answer: Yes)
- Does anything mouse operable not get keyboard focus? (Correct Answer: Yes)
- Is there any keyboard traps? (Correct Answer: No)
- When navigating using a keyboard, does any hidden item get focus? (Correct Answer: No)
- Is there anything that is time limited? If so,
- Can time be adjusted for the user? (Correct Answer: Yes)
- Is there any moving content? If so,
- Is the user provided with controls for moving said content? (Correct Answer: Yes)
- Is there any content that flashes more than three time per second? (Correct Answer: No)
- Is a "Skip to Content" link provided? (Correct Answer: Yes, N/A)
- Are the title pages helpful and clear? (Correct Answer: Yes)
- Is everything presented in a logical order? (Correct Answer: Yes)
- Is every link's purposed clear from it's context? (Correct Answer: Yes)
- Is there any link that says "Read More", "Click here" or something of that nature? (Correct Answer: No)
- Does the page have a lang attribute? (Correct Answer: Yes)
- Do any elements change when they receive focus, excluding focus ring? (Correct Answer: No)
- Do any elements change when they receive input? (Correct Answer: No)
- Are any input errors_routes clearly identified (not using color only)? (Correct Answer: Yes)
- Are elements labeled, in a clear, logical, and meaningful way? (Correct Answer: Yes)
- Are form elements labeled correctly? (Correct Answer: Yes)
- Are instructions given in accessible ways? (Correct Answer: Yes)
- Are there any major code errors_routes? (Correct Answer: No)
- Are the correct aria tags used (such as name, role, and value)? (Correct Answer: Yes)
- Is the contrast ratio between text and background at least 4.5:1? (Correct Answer: Yes)
- Are any images of text used to convey information (Logos do not count)? (Correct Answer: No)
- Is there any live video? If so,
- Does the video have captions? (Correct Answer: Yes)
- Is there a pre-recorded video? If so,
- Does the user have access to audio description for video content? (Correct Answer: Yes)
- Can text be resized to 200% without loss of content of function? (Correct Answer: Yes)
- Are there several ways to find pages? (Correct Answer: Yes)
- Are heading and labels clear and easy to understand? (Correct Answer: Yes)
- Does the language on the page change at any time? If so,
- Do you tell the user when that change occurs? (Correct Answer: Yes)
- Are menus used consistently? (Correct Answer:Yes)
- Are icon and buttons used consistently? (Correct Answer: Yes)
- Are fixes suggested when users make errors_routes? (Correct Answer: Yes)
- Is there any video present on the page? If so,
- Is sign language translations provided for videos? (Correct Answer: Yes)
- Are extended audio descriptions provided for videos? (Correct Answer: Yes)
- Are text alternatives provided for live videos? (Correct Answer: Yes)
- Is there any live audio present on the website? If so,
- Are text alternatives provided? (Correct Answer: Yes)
- Is there audio present on the page? If so,
- Is the audio clear for listeners to hear? (Correct Answer: Yes)
- Can the contrast ratio between text and background be set to at least 7.1 without assistive technology? (Correct Answer: Yes)
- Does the page offer users a range of presentation options? (Correct Answer: Yes)
- Is the page accessible by keyboard only without exception? (Correct Answer: Yes)
- Is there any time limits on the website? (Correct Answer: No)
- Is the user interrupted at any time? (Correct Answer: No)
- Is the user's data saved when re-authenticating? (Correct Answer: Yes)
- Does the website let users know where they are? (Correct Answer: Yes)
- Is every link's purpose clear from it's text? (Correct Answer: Yes)
- Is the website content broken up with headings? (Correct Answer: Yes)
- Are any strange words explained? (Correct Answer: Yes)
- Are any abbreviations explained? (Correct Answer: Yes)
- Can a user with nine years of school read your content? (Correct Answer: Yes)
- Are any words that are hard to pronounce explained? (Correct Answer: Yes)
- Are any element changes without the user's permission? (Correct Answer: Yes)
- Is detailed help and instructions provided? (Correct Answer: Yes)
- Are the risk of all input errors_routes reduced? (Correct Answer: Yes)