copyright © 2012 w3c (mit, ercim, keio) bad: before and after demo shadi abou-zahra w3c web...

Copyright © 2012 W3C (MIT, ERCIM, Keio)

BAD: Before and After DemoShadi Abou-ZahraW3C Web Accessibility Initiative (WAI)http://w3.org/People/shadi/


About the Demo

Small website in an accessible and inaccessible version, showing different types of access barriers

2/30


Presentation Overview

Overview on this presentation contents:

• Images and text alternatives

• Headings and page structure

• Navigation and orientation

• Text colors, styling, and flow

• Forms and user interaction

3/30


Text Alternatives

Text alternatives for images are fundamental:

• Can be read aloud by screen readers

• Confirm that images are for decoration

• Serve as labels for functional elements

4/30


Good Alternatives

Good text alternatives are succint, yet adequately describe the purpose of the image. Ask yourself:

• Is the primary information conveyed through the

image also available through the text alternative?

• If the image has a function (eg. a button), is this

function communicated in the text alternative?

• If the image is an image of text, is this text also

available through the text alternative?

5/30


Simple text alternative

Text alternative for the main banner of the demo:

<img src="toplogo.png" alt="Citylights: your access to the city.">

6/30


Too much information

Text alternative with too much unnecessary details:

<img src="toplogo.png" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner."> 7/30


Informative images

Text alternatives convey the purpose of the images:

<img src="top_weather.gif">

<img src="top_weather.gif" alt="Sunny spells">

8/30

<img src="headline_middle.gif" alt="">


Decorative images

Text alternatives for decorative images are empty:

<img src="headline_middle.gif">

9/30

alt="1234 56789"


Images of text

Images of text should be avoided where possible:

10/30

alt="Mrs B. Wahoonie investigates shipping hot air to Australia"


More than alternative

Text alternative should not contain more than what the image actually conveys:

alt="Mrs B. Wahoonie in front of a canyon"

...and important details in an image should be made available to everyone

11/30


Headings and structure







12/30


Page headings

Mark-up all headings and essential page sections:

13/30

<a href="home">Home</a><br><a href="news">News</a><br><a href="tickets">Tickets</a><br><a href="survey">Survey</a><br>

<ul> <li><a href="home">Home</a></li> <li><a href="news">News</a></li> <li><a href="tickets">Tickets</a></li> <li><a href="survey">Survey</a></li></ul>


List items and menus

Mark-up all lists and list elements, including menus:

14/30

<table summary="Ticket prices for each concert are indicated by seat allocation; there are separate sets of tickets for concessions and groups of 5 […]"> <caption>Ticket prices for […]</caption> <tr> <th id="c1">Adult</th> <th id="c2">Front Seats</th> [...] <th id="c6" headers="c1">Obelisks […]</th> <td headers="c1 c2 c6">$20.90</td>


Data tables

Mark-up all tables using table headings, captions, and provide summaries for more complex tables:

15/30


Navigation & orientation







16/30


Cues about location

Provide cues about the current location so users can orient themselves more easily within your website:

17/30


Change of context

Ensure that any change of context (eg. redirect) is deliberate and expected, including via keyboard:

18/30


Self-referencial links

Links that refer back to the same page that the link is on can be confusing for many users:

19/30


Text styling and flow







20/30


Color contrast

Provide sufficient color contrast between text and its background to make it readable:

21/30


Distinguishable links

Make links easy to identify and distinguish from text:

22/30


Text decoration

Use fonts that are easier to read, increase spacing, and limit the use of caps, italic, bold, and underline:

23/30


Text reading order

Ensure that the sequences of text passages follow a logical reading order:

24/30


Forms and interaction







25/30


Labels for input

Provide labels for radio boxes, check boxes, select boxes, text areas, and any other form elements:

<fieldset> <legend>Free Newsletter (optional)</legend> [...] <label for="mr">Mr. <input type="radio" name="t" [...] 26/30


Clear error messages

Provide clear error messages with indication to the location of any error and guidance on how to fix it:

27/30


Topics covered today







28/30


Summary and wrap-up

Some of today's key points include:

• Provide text alternatives and captions

• Mark-up headings and page structures

• Simplify orientation and navigation

• Ensure logical reading sequences

• Use careful text and link decoration

• Provide clear guidance and messages

For more: http://w3.org/WAI/intro/people-use-web/29/30


Thank You

BAD: Before and After Demohttp://w3.org/WAI/demos/BAD/

Acknowledgements: BAD was developed by theW3C/WAI Education and Outreach Working GroupAnd with support from the European Commission.

copyright © 2012 w3c (mit, ercim, keio) bad: before and after demo shadi abou-zahra w3c web...

Documents

w3c mit

image of text

text alternatives headings

orientation text colors

informationtext alternative

page structure navigation

presentation contents

table headings