Accessibility Checklist

1
Accessibility
(Session 3)
Yongjie Chen
UX Designer (Background in HCI)
Email: yjgracechen@gmail.com

Good page titles help people know where they are and move between pages that
are open in their browser.
What to check for:
•  Check that there is a title describes the content of the page.
•  Check that the title is different from other pages on the website.
2
1. Page title
Quick and Easy Checklist

3
2. Image text alternatives ("alt text"):
Do you provide “Alt” text?
How would you describe this image?
Alt = ???

The alternative text help users who cannot see the images which include pictures,
illustrations, charts, etc.
What to check for:
•  The images should have the appropriate text and functional description.
Ø  For example: a search button would be "search", not "magnifying glass”.
•  If the image is just for decoration, then the alt should be “null”.
•  As screen reader automatically provide the words “button”, “link” or “image of”,
there is no need to provide these information again in the alternative text.
4
2. Image text alternatives ("alt text"):

The sections of information on the page are separated by headings. It is helpful for
people who cannot use mouse (use keyboard only) and people who use screen
reader.
What to check for:
All pages should have at least one headings and should have a meaningful
hierarchy.
Here is an example of meaningful hierarchy:
5
3. Text: Headings

Example:
Heading Level 1 <h1>
6
3. Text: Headings

The web pages should allow users to change the color contrast between text and
background colours as different disability have different requirement for colour
contrast.
Here is a good example of providing different colour contrast for users.
7
4. Text: Color contrast

8

For example, for some disabled users, the high colour contrast text needed, as
they cannot read the low contrast text as below:
However, for people who has reading disabilities such as dyslexia users, the high
colour contrast are not readable.
9

10
Low Contrast Example:

Some disabled users need to enlarge the text on the web pages in order to see
the content.
11
5. Text: Resize text
What to check for:
•  Enlarge all the text to check the web page content (WCAG 2.0 requires
200%): are there texts/images disappear/cut off/ overlap?

What to check for:
Here is a bad example below:
12
5. Text: Resize text

For visually impaired users with mobility problems and blind users, they rely on
keyboard to interact with the Web. The keyboard focus should be visible and
follow the logical order through the page elements.
What to check for:
•  Check you can tab to/ tab way from all elements and it is visible when focus
on.
•  The tab order is logical.
•  Is a “skip navigation” link available? - Providing visible links at the top of the
page and make it visible when received keyboard focus.
•  When tab to a drop list, make sure you can navigate through arrow key.
Create “skip navigation” link
http://webaim.org/techniques/skipnav/#creating
13
6. Interaction: Keyboard access and visual focus

14
6. Interaction: Keyboard access and visual focus
When the web page received keyboard focus, the “skip navigation” link
become visible. Here is a good example:
Here is a good example of visible tab focus:

“Aform could be a single text box, such as Search, or could be a complex form
with text fields, radio buttons, checkboxes, drop-down lists, and buttons.”
Form fields and other form controls usually have visible labels.
15
7. Interaction: Forms, labels, and errors (including search fields)
For example: “First Name” as the label for a text field (see image below). If
these labels are marked up correctly, people can interact with them using
keyboard, screen readers and voice input.

What to check for:
•  Check all the form controls, make sure they are all keyboard
accessible (see Interaction: Keyboard access and visual focus).
•  Check that every form control has a label associated with it using
such as 'label', 'for', and 'id’in HTML.
Accessible HTMLForms:
http://www.webstandards.org/learn/tutorials/accessible-forms/intermediate/
16

What to check for:
17
Here is a good example of from that labeled correctly:
<form action="demo_form.asp”>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="Submit”>
</form>

What to check for:
•  Check that any fields that are required/mandatory are clearly
indicated:
Ø  Not just rely on red colour text.
Ø  If using indicator (such as asterisks * ), make sure it is included in the marked up
field label.
Ø  Check that any instructions for completing the form are before they are
needed: section instruction should be at the top of the section.
Ø  The required format such as date (year-month-day) should be included in the
marked up label. Here is a good example:
18
<label for=“date”> Date: (dd/mm/yyyy) <input id=“date”>

What to check for:
•  Check error handling--Try to type in something wrong, and see what the error
message are?
19
Ø  Make sure they are clear and guide users to understand and fix the
errors;
Ø  Check the fields without errors are populated with the data you entered,
except for some sensitive data such as credit card numbers.

•  Captions
•  Transcript
•  Audio description
As no multimedia (video, audio) is used on the website, there is no need to check
that.
20
8. General: Multimedia (video, audio) alternatives

Try to look at the web page without images, styles, and layout.
•  Turn off images and show the text alternatives: Check if every image has
meaningful alternative texts.
•  Turn off style sheets (CSS): check if the content are in the right order when
read it.And make sure, each section has a clear heading.
Here is a good example:
When turning off “CSS” of the website page, it looks in order:
21
9. General: Basic Structure Check

Example:
22
9. General: Basic Structure Check

Ensure that JavaScript event handlers are device independent (e.g., they do not
require the use of a mouse) and make sure that your page does not rely on
JavaScript to function.
•  Trigger events with active input from users rather than nonactive triggers.
•  Provide a mechanism for the user to freeze or slow-down any moving or
blinking objects, particularly those that contain text.
•  Provide a <NOSCRIPT> option for all scripts.
•  Make scripts and applets keyboard operable (using standard conventions).
JavaScript accessibility issues:http://trace.wisc.edu/world/java/jseval.htm
23
10. Make JavaScript accessible

How to Test Web Pages forAccessibility
http://www.lancaster.ac.uk/fss/resources/access/testing.htm
Customize Web Pages (If your website can be customized, it will assist dyslexic users):
http://www.lancaster.ac.uk/fss/resources/access/customising.htm
Testing Web Content forAccessibility
http://webaim.org/resources/evalquickref/
Accessible Forms
http://www.webstandards.org/learn/tutorials/accessible-forms/intermediate/
Form and Label
http://dotsub.com/view/9787ebec-941f-4e04-a5dc-f6ed7fde7247
"Skip Navigation" Links
http://webaim.org/techniques/skipnav/
24
Useful Links

KeyboardAccessibility
http://webaim.org/techniques/keyboard/
CreatingAccessible Form
http://webaim.org/techniques/forms/
JavaScript accessibility issues
http://trace.wisc.edu/world/java/jseval.htm
25
Useful Links

Accessibility Checklist

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Accessibility Checklist

Similar to Accessibility Checklist (20)

Recently uploaded

Recently uploaded (20)

Accessibility Checklist