Accessibility Part 3

1

Accessibility

(Session 3) Yongjie Chen

UX Designer (Background in HCI) Email: [email protected]

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:

“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)


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



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 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

Keyboard Accessibility

http://webaim.org/techniques/keyboard/

Creating Accessible Form

http://webaim.org/techniques/forms/

JavaScript accessibility issues

http://trace.wisc.edu/world/java/jseval.htm

25

Useful Links

Accessibility Part 3

Design

Transcript of Accessibility Part 3