Web Accessibility

Users may not fully understand the information you are trying to convey in a video-only or audio-only format and would benefit from getting the information in multiple ways. Also, deaf people are unable to hear an audio track, and the blind cannot see a video, so they need another way to access the information presented.

• Audio should have a written transcript
• Video should have a written transcript OR an audio transcript
• The transcripts should be placed close to the media

The elderly are often hard of hearing, and the deaf are...deaf, so they need another method of getting the dialog and sound effects.

• Closed captions are one popular method

People who cannot see should still be able to access the information in videos. Descriptive audio tracks are often used in theaters, so blind people can still enjoy the movie.

• Videos have a transcription OR
• Videos have an audio track describing what is happening

There should be a logical structure to your content. One big block of text is hard for people to make sense of, and can almost always be broken down into smaller sections. Content should also, not be so distant that it does not appear to be unrelated.

• HTML markup should be semantic
• Use section headers, bullets, etc. appropriately
• Forms have a clear relationship between labels and their input field

Users that rely on assistive technology like screen readers will essentially only “see” the html of your page, which means the order of content in your code matters. Screen readers do not know that you moved a menu or paragraph in your css, so if the linear order of your html has a different meaning, it should be reordered.

• The sequence of content in both the html and on screen should be logical
• Menus should be separate from content
• Use headings, proper list types, and valid html

When giving instructions like “go over there,” it may be unclear where exactly “there” is without some other method of reference. Often times users may be color blind, or your site may appear to have multiple items that fit your description to the users eye, so it is best to describe instructions in multiple ways.

• Instructions should not rely solely on any one sensory characteristic
• Use a combination of color, text, shape, and location to differentiate items

People who are color blind can not differentiate between certain color pairs, or can not see in color at all, so when you tell them the information they need is in red, they have no idea which content is in red and which isn’t.

• Do not rely on color for anything, make it a secondary identifier
• Test for different types of color blindness

No one likes surprises, opening a page and being blasted with sounds can be annoying and even scare people. Also, if someone is using a screen reader they need to be able to hear their screen reader, which can be hard with audio in the background.

• Audio does not auto play
• Has play/pause buttons

People with limited mobility often have a hard time moving the mouse around, and find navigating with the keyboard, much easier, so your site should be able to be navigated using only the keyboard. Keyboard navigation is another reason it is important to consider the sequence of your site, users don't want to be jumping all over the page when they navigate.

• Clean HTML usually has full keyboard accessibility
• No functions should require timed keystrokes
• Tab and arrow keys are the standard for keyboard navigation

It can be frustrating for users navigating via keyboard when they focus onto something and they are unable to remove focus and focus on something else.

• It is possible to navigate away from all parts of your website
• If you can tab into it you should be able to either tab out of it, or get out with another standard method such as escape of arrow keys

No one likes the pressure of a time limit, especially those who may need more time to navigate around a site, or need more time to process the information given. It is important to respect this, and make time limits that are workable.

• Time limits should have options to be turned off or extended
• Changing content can be paused for a period of time

Some people have trouble reading stationary text, never mind moving text, or a page with blinking or distracting movement going on.

• Moving content should be able to be played, paused, or hidden
• This includes auto-updating, scrolling, blinking, and moving content that lasts for more than five seconds

Epileptics are susceptible to seizures from flashing content, and you obviously don't want to give people seizures.

• Content should not flash more than 3 times per second

Some users, such as those using screen readers or keyboard navigation, may find it difficult and lengthy to get to the main content of a page when they have to listen to the menu be read out loud again and again on every page, or tab through tirty different menu items.

• Allow users to skip blocks of content that are repeated on every page such as navigation menus
• Provide a “Skip to Content” link
• Using proper tags and roles is another way to do this

Having a title allows users to quickly change between tabs, and identify the current site they are on.

• Use the title tag

Users with visual or physical impairments that rely on keyboard navigation cen become confused it they tab somewhere unexpectedly.

• Put DOM elements in the order they are seen

Links should have some sort of context for users to figure out where exactly the link goes. This is particularly helpful for those with cognitive impairments, as well as those which rely on screen readers.

• Links should say exactly where they are taking users
• Buttons should say exactly what they do

Screen readers need to know which language a page is in to get correct pronunciations.

• Page has a language assigned

Changing focus shouldn’t do anything except change focus. People with cognitive disabilities may become confused when something happens they did not intend to, just by changing the focused element. When users intend to follow a link while using keyboard input they will hit enter, or spacebar.

• Links don't automatically open on focus
• Submit buttons don't automatically submit on focus

On input of text or upon changing any settings, there is no unexpected change in context. People with visual impairments may not notice the change and wonder why they cannot navigate as expected.

• Forms do not automatically send
• Users have a chance to review before submitting

When filling out a form people often make mistakes, so it is helpful to have some kind of error checking. Error warnings need to be clear enough for people to understand what they did wrong. This is especially important to people with cognitive disabilities, and the blind, who can not see that you changed the color of the field to red.

• Input errors are clearly marked with a text description of what went wrong.

When users get to a form on your website they need to know what the form is for and what information to input. The easiest way to do this is by labeling the different input fields.

• Input elements are labeled and have instructions

In order for assistive technologies to parse a page correctly elements should have closing tags, proper nesting, and be correctly coded.

• Code is valid, with no major errors

All code for the site should be valid and adhere to accessibility guidelines, including any third party plugins, non-HTML elements.

• ALL code is valid