Date post: | 17-Aug-2015 |
Category: |
Design |
Upload: | yongjie-chen- |
View: | 23 times |
Download: | 1 times |
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"):
Quick and Easy Checklist
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"):
Quick and Easy Checklist
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
Quick and Easy Checklist
Example:
Heading Level 1 <h1>
Heading Level 2 <h2>
Heading Level 3 <h3>
Heading Level 3 <h3>
Heading Level 2 <h2>
Heading Level 3 <h3>
Heading Level 4 <h4>
6
3. Text: Headings
Quick and Easy Checklist
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
Quick and Easy Checklist
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
4. Text: Color contrast
Quick and Easy Checklist
Some disabled users need to enlarge the text on the web pages in order to see the content.
11
5. Text: Resize text
Quick and Easy Checklist
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?
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
Quick and Easy Checklist
14
6. Interaction: Keyboard access and visual focus
Quick and Easy Checklist
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:
“A form 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)
Quick and Easy Checklist
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 HTML Forms:
http://www.webstandards.org/learn/tutorials/accessible-forms/intermediate/ 16
7. Interaction: Forms, labels, and errors (including search fields)
Quick and Easy Checklist
What to check for:
17
7. Interaction: Forms, labels, and errors (including search fields)
Quick and Easy Checklist
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
7. Interaction: Forms, labels, and errors (including search fields)
Quick and Easy Checklist
<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
7. Interaction: Forms, labels, and errors (including search fields)
Quick and Easy Checklist
Ø 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
Quick and Easy Checklist
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
Quick and Easy Checklist
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
Quick and Easy Checklist
How to Test Web Pages for Accessibility
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 for Accessibility
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