accessibility-checklist.md

Web Accessibility Checklist - Level A

Wuhcag - WCAG 2.0 Checklists

1.1.1 – Non-text content

• Add a text alternative to all of your images.
• Add a text alternative to your audio and video (a succinct description of the topic).
• Add a name to all of your controls (such as ‘Search’ or ‘Submit’).

1.2.1 – Audio-only and Video-only (Pre-recorded)

• Write text transcripts for any audio-only media;
• Write text transcripts for any video-only media; or
• Record an audio-track for any video-only media;
• Place the text transcript, or link to it, close to the media

1.2.2 – Captions (Pre-recorded)

• Add captions to all videos with sound.

1.2.3 – Audio Description or Media Alternative (Pre-recorded)

• Provide a full text transcript of the video; or
• Provide a version of the video with audio description.

1.3.1 – Info and Relationships

• Break up content with subheadings for new sections.
• Mark those headings with HTML header tags.
• Use the correct HTML for all structural elements.
• Use valid HTML everywhere else.
• Use clear labels on forms.

1.3.2 – Meaningful Sequence

• Present content in a meaningful order.
• Separate navigation menus from content.
• Use paragraphs in order.
• Use headings to show importance.
• Choose whether a list needs numbering or not.
• Use valid HTML and check it with the W3C’s markup validator.15

1.3.3 – Sensory Characteristics

• Use more than one sense for instructions.
• Avoid instructions that rely on sound.

1.4.1 – Use of Colour

• Instructions must not rely on colour alone.
• Other information (like charts and graphs) must not rely on colour alone.

1.4.2 – Audio Control

• Don’t have any audio that plays automatically.
• Have all the audio you want, just let your users choose when they want to hear it

2.1.1 – Keyboard

• A clean HTML and CSS website will often have keyboard accessibility without further work – a great example of why you need to invest in web design and development from the outset Auditing keyboard accessibility
• Unplug your mouse and make sure you can fully use your website with your keyboard
• Make sure no function on your website requires timed keystrokes – such as double tap enter/return within two seconds to submit

2.1.2 – No Keyboard Trap

• Test your website to make sure you can navigate away from, as well as to, all parts of your website by keyboard only.
• Make sure all navigation is controllable by either the ‘Tab’ or arrow keys, which is a standard many people are familiar with.
• Unplug your mouse and make sure you can fully use your website with your keyboard.
• It’s tempting to use non-standard navigation with a text explanation of what to do, but this isn’t worth your time. Stick to the Tab and arrow keys and the majority of your customers will already know how to use your website.
• Be wary of third-party adverts and widgets, often these are not accessible.

2.2.1 – Timing Adjustable

• If your website uses a time limit:
  • Give your users an option to turn off the time limit before it begins (for example, a landing page before the time-controlled page can display a message that shows your customers what to do); or
  • Give your users the option to adjust the time limit before it begins, over a range of at least ten times the default setting (you can do this with a landing page too); or
  • Give your users the option to extend the period at least twenty seconds before it expires. This must be a simple action like clicking a button and must be available to use at least ten times.
• If your website has moving or animated text, users must be able to pause the movement.
• If your website has a feature that updates automatically (for example, with the latest football scores), you must allow your users to delay the frequency of the updates by at least ten times the default setting.
• Take as much content outside of time limits as possible.
• Make sure any user controls you provide are keyboard accessible.
• If you use a pop-up to give your users the option to extend a time limit, consider Guideline 2.2.4.

2.2.2 – Pause, Stop, Hide

• Moving, blinking or scrolling content must have an option to pause, stop or hide it; and
• Auto-updating content must have the same options; or
• An option to control frequency (see Guideline 2.2.1 for advice).

2.3.1 – Three Flashes or Below

• Don’t add anything to your website that flashes more than three times per second.

2.4.1 – Bypass Blocks

• Add a ‘Skip to Content’ link to all pages on your website. It’s best if you make the link visible

2.4.2 – Page Titled

• Give each page on your website a unique and descriptive title
• In many cases, it makes sense to repeat the page title or a variation of it as the top heading on your page.
• Type all of your page titles into a spreadsheet and review them. If they make sense out of context, they will work on your website.
• Use these page titles in your sitemap (See Guideline 2.4.5 and Guideline 2.4.8) to make it more accessible.

2.4.3 – Focus Order

• A well-made HTML website will often comply with this guideline.
• Unplug your mouse and verify that you can use the ‘Tab’ key to navigate to every part of your website and use every function, including search boxes and forms – make sure each page has a sensible focus order.

2.4.4 – Link Purpose (In Context)

• The purpose of the link is clear from the link text (for example, ‘My blog’); or
• The purpose of the link is clear from the surrounding content, meaning the same sentence, paragraph or cell in a table (for example, ‘Visit my blog’ ); or
• If the link is an image, the alt text of the image makes the link purpose clear (for example, ‘Luke McGrath – Visit my blog’); and
• Links with the same destination have the same description (but links don’t share a description if they point to different places).

3.1.1 – Language of Page

• Ensure that each page of your website has a language assigned to it.

3.2.1 – On Focus

• Ensure no element changes purely by receiving focus.
• Avoid both behavioural and visual modifications.
• Ensure that links don’t open automatically on focus; and
• Ensure that forms don’t submit without the user taking action (such as clicking the ‘Submit’ button); and
• Ensure that there are no automatic pop-ups; and
• Ensure that focus never jumps to another element automatically; and
• Ensure that no other action that occurs on focus alone causes the page to change.

3.2.2 – On Input

• Forms must not auto-submit when all fields are filled – this prevents your users from checking and editing what they have written.
• Focus (the field where the user will input next) must not automatically jump to the next field in a form once a field is complete.
• Using a control (like selecting yes or no) must not automatically perform the action (for example, selecting to subscribe to a newsletter in a check box must not automatically subscribe your user, they should be able to click a submit button to confirm their decision).

3.3.1 – Error Identification

• Identify and explain to the user any mistakes that you can detect automatically.
• Add error explanation close to the error, showing what is wrong and how to fix it.
• If a form requires input in a certain format, show and describe the required format.
• If a mandatory field is empty, highlight the field and explain what’s required.
• Build forms to be forgiving, accepting variations on the formats you prefer.
• Don’t ask for too much information, just what you need.
• Be specific. Use clear, concise instruction and form field labels.
• Highlight mistakes in forms with colours and symbols.
• Don’t clear a form if a user makes a mistake. Save the information and allow the user to edit their error and continue.
• Provide extra help by giving your contact details on all pages (the header or footer are great) and especially near forms.

3.3.2 – Labels or Instructions

• Label all input fields clearly and helpfully.
• Where a field needs a specific format, give an example (For example, for a ‘date’ field in a form you might use ‘Enter the date as dd/mm/yyyy’)
• Mark required fields with an icon and explain what the icon means before the form.
• Keep your labels simple – too much explanation can be counter-productive. Things like ‘First name’, ‘Email’ and ‘Your message’ are fine.
• The same goes for instructions, ‘Required fields are in red and have a * symbol’ works great. So does ‘Fill in this form and click ‘Submit’ to get in touch’.
• Instructions need to take into account how they use sensory characteristics.
• Think about how your use of colour affects things like required fields if you want to highlight them by colour. Don’t highlight by colour alone, pick a symbol too.
• Consider error identification as well, and make sure that you give helpful instructions when your users make mistakes on forms.

4.1.1 – Parsing

• Ensure HTML elements have complete start ( < > ) and end ( </ > ) tags where needed.
• Nest all HTML elements correctly (for example, list objects within an ordered or unordered list).
• Use unique Ids.
• Check that HTML elements don’t contain duplicate attributes.

4.1.2 – Name, Role, Value

• Use HTML specifications for any script you author for your website.
• If you use a plugin or other element authored by a third party, make sure it uses valid HTML markup.
• A good – though not foolproof – way to test your website is a HTML validator tool. A validator gives you an idea of how well technology can parse your website. Use it to create a list of priorities.
• The majority of your potential issues will come from third-party code.
• Speak to the developers of any plugins you use and make sure that they’re writing good code.
• Make sure that everything on your website parses correctly.
• Pay close attention to things like names and labels.