Workshop 2 Coding an Accessible Website

1. Workshop 2Coding an Accessible Website Web Content Accessibility Project Funded by BCcampus Natasha Boskic, Kirsten Bole, Nathan Hapke University of British Columbia

2. Workshop schedule • Monday August 21Basics of Web Accessibility • Tuesday August 22Coding an Accessible Website • Wednesday August 23Accessible Multimedia • Thursday August 24Creating Usable Content • Friday August 25Disabilities & Assistive Technology

3. The Plan • Accessibility review • Using XHTML and CSS • Structure & content • Fonts • Links & navigation • Images • Tables • Multimedia • Validators & testing

4. What is accessibility? • Universal design for the web • Ensuring anyone with any browsing technology can access all the information on your site • People with disabilities • Handheld computers and cell phones • Dial-up modems • Need to use consistent, standard code to support as many users as possible

5. What do I use? • Please do NOT use Word’s “Export to HTML” feature! • Beginners: Course Genie will export a valid, accessible site from Word • Intermediate: use a good WYSIWYG editor such as Dreamweaver • Expert: hand-code XHTML and CSS

6. What to consider • Be consistentKeep navigation the same on each page • Be redundantPresenting information in multiple ways helps all learners

7. Learning XHTML/CSS • HTML not good for complex layouts • XHTML new standard for web development • Separates content from presentation • MUCH easier to make sweeping changes! • Eliminates redundancy & bloated pages • Well-formed pages work in more browsers • Foundation for an accessible site

8. Adapting to XHTML • Mostly the same as HTML • Stricter format • Avoid tables & “pixel shims” for layout • No more FONT, CENTER, ALIGN… • Describes the structure and content of the page, but not its appearance or presentation

9. Quick CSS primer • Cascading Stylesheets define ONLY appearance • Define a class & apply it to a tag: .blue {color: #000099; } <p class=“blue”>This text will be blue</p> <h1 class=“blue”>This header will be blue</h1>

10. Structure & Content • Considerations for cognitive disabilities benefit all users • Navigation must be consistent • Clear, concise directions • Group like items together • Chunk text - Web users scan rather than read • Site search & site map

11. Font sizes • Low-vision users need to be able to increase font size • This can be done with a screen magnifier • It can also be done with the browserUNLESS font sizes are set incorrectly. • Use relative fonts (%, em) rather than absolute (px, pt) body { font-size: 90%; }

12. Images • Assume images cannot be viewed • Use alternative text to describe image content • Meaningful & descriptive <img src=“image.jpg” width=“500” height=“281” alt=“Sunset on the lake” />

13. Images, continued • If no description needed, set alt=“ ”:<img src=“scroll.jpg” width=“200” height=“75” alt=“ ” /> • If too complex to be described in less than 80 characters, make a page with a longer description and link to it with longdesc:<img src=“figure1.jpg” width=“400” height=“300” alt=“Figure 1: Statistical analysis of data” longdesc=“Figure1.html” />

14. Links • “Click here” is not a meaningful link • Use title attribute to describe vague URLs • Avoid repeating the same link text • Option to skip over navigation <a href=“ht87484a.html” title=“Summarized log file analysis for January-March”>Read the full report</a>

15. Javascript • Often inaccessible to screen readers • Pop-ups, rollovers, form validation • Many DHTML menus completely useless • Call functions from onClick instead of href • Always provide alternatives if important!

16. Pop-up windows • Traditional to open external links in a new window • Breaks the BACK button • Confusing for many users • Let users choose how to open window • Warn if new window will be opened

17. Labels for Tables • Tables are fordata, not layout • Think linear! • Summary • Header rowor column • More optionsavailable for complex tables <table summary=“Freight charges by sea, rail, road and air for major Australian destinations”> <caption>Freight Charges</caption> <tr><th>Perth</th>…

18. Labels for Forms • Labels associate field with correct text • Extremely useful for screen readers • Keep fields in logical order <label for=”surname">Your Surname</label> <input type="text" name=”surname" id=”surname" size="20"/>

19. Multimedia • Flash, Shockwave, Quicktime, etc. • Good for cognitive/learning issues • Some accessibility options in Flash • No support in text browsers • Poor support in screen readers • Provide transcripts of audio & video • Provide alternatives to important interactive content

20. Using Validators • Use XHTML and CSS validators to make sure your code is correct • Use accessibility checker like Watchfire WebXact to look for missing pieces • Don’t rely on the accessibility checker - some things need to be human-tested

21. Getting started • Like “curb cuts” in sidewalks, it’s always easier to build in accessibility from the start • Not too hard to modify an existing site

22. First steps • If you’re comfortable coding by hand, get familiar with XHTML and CSS • First provide alternative text for visuals - photographs, charts, graphs • Let users control the font size • Keep an eye on your link text • Labels for tables and forms • Alternatives for multimedia

23. Thank you for coming! • Join us tomorrow for Accessible Multimedia - 12 pm PST • Natasha Boskic (natasha.boskic@ubc.ca) • Kirsten Bole (kirsten.bole@ubc.ca) • Nathan Hapke (nhapke@interchange.ubc.ca)