1. Copyright © 2012 W3C (MIT, ERCIM, Keio) BAD: Before and After Demo Shadi Abou-Zahra W3C Web Accessibility Initiative (WAI) http://w3.org/People/shadi/

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

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

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

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

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

7. Copyright © 2012 W3C (MIT, ERCIM, Keio) Too much information Text alternative with too much unnecessary details: 7/30

8. Copyright © 2012 W3C (MIT, ERCIM, Keio) Informative images Text alternatives convey the purpose of the images: 8/30

9. Copyright © 2012 W3C (MIT, ERCIM, Keio) Decorative images Text alternatives for decorative images are empty: 9/30

10. alt="1234 56789" Copyright © 2012 W3C (MIT, ERCIM, Keio) Images of text Images of text should be avoided where possible: 10/30

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

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

13. Copyright © 2012 W3C (MIT, ERCIM, Keio) Page headings Mark-up all headings and essential page sections: 13/30

14. Home News Tickets Survey Home News Tickets Survey Copyright © 2012 W3C (MIT, ERCIM, Keio) List items and menus Mark-up all lists and list elements, including menus: 14/30

15. Ticket prices for […] Adult Front Seats [...] Obelisks […] $20.90 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

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

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

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

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

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

21. Copyright © 2012 W3C (MIT, ERCIM, Keio) Color contrast Provide sufficient color contrast between text and its background to make it readable: 21/30

22. Copyright © 2012 W3C (MIT, ERCIM, Keio) Distinguishable links Make links easy to identify and distinguish from text: 22/30

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

24. Copyright © 2012 W3C (MIT, ERCIM, Keio) Text reading order Ensure that the sequences of text passages follow a logical reading order: 24/30

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

26. 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: Free Newsletter (optional) [...] Mr. <input type="radio" name="t" [...] 26/30

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

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

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

30. Copyright © 2012 W3C (MIT, ERCIM, Keio) Thank You BAD: Before and After Demo http://w3.org/WAI/demos/BAD/ Acknowledgements: BAD was developed by the W3C/WAI Education and Outreach Working Group And with support from the European Commission.