Copyright © 2012 W3C (MIT, ERCIM, Keio) BAD: Before and After Demo Shadi Abou-Zahra W3C Web Accessibility Initiative (WAI) http://w3.org/People/shadi/
Jan 13, 2016
Copyright © 2012 W3C (MIT, ERCIM, Keio)
BAD: Before and After DemoShadi Abou-ZahraW3C Web Accessibility Initiative (WAI)http://w3.org/People/shadi/
Copyright © 2012 W3C (MIT, ERCIM, Keio)
About the Demo
Small website in an accessible and inaccessible version, showing different types of access barriers
2/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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="">
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Decorative images
Text alternatives for decorative images are empty:
<img src="headline_middle.gif">
9/30
alt="1234 56789"
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Images of text
Images of text should be avoided where possible:
10/30
alt="Mrs B. Wahoonie investigates shipping hot air to Australia"
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Headings and structure
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
12/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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>
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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>
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Data tables
Mark-up all tables using table headings, captions, and provide summaries for more complex tables:
15/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Navigation & orientation
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
16/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Cues about location
Provide cues about the current location so users can orient themselves more easily within your website:
17/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Change of context
Ensure that any change of context (eg. redirect) is deliberate and expected, including via keyboard:
18/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Self-referencial links
Links that refer back to the same page that the link is on can be confusing for many users:
19/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Text styling and flow
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
20/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Color contrast
Provide sufficient color contrast between text and its background to make it readable:
21/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Distinguishable links
Make links easy to identify and distinguish from text:
22/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Text decoration
Use fonts that are easier to read, increase spacing, and limit the use of caps, italic, bold, and underline:
23/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Text reading order
Ensure that the sequences of text passages follow a logical reading order:
24/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Forms and interaction
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
25/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Clear error messages
Provide clear error messages with indication to the location of any error and guidance on how to fix it:
27/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
Topics covered today
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
28/30
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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
Copyright © 2012 W3C (MIT, ERCIM, Keio)
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.