Workshop 2Coding an Accessible Website
Web Content Accessibility Project
Funded by BCcampus
Natasha Boskic, Kirsten Bole, Nathan Hapke
University of British Columbia
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
The Plan
• Accessibility review• Using XHTML and CSS• Structure & content• Fonts• Links & navigation• Images• Tables• Multimedia• Validators & testing
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
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
What to consider
• Be consistentKeep navigation the same on each page
• Be redundantPresenting information in multiple ways helps all learners
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
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
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>
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
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%;
}
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” />
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” />
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>
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!
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
Labels for Tables
• Tables are fordata, not layout
• Think linear!• Summary • Header row
or column• More options
available 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>…
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"/>
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
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
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
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
Thank you for coming!
• Join us tomorrow for Accessible Multimedia - 12 pm PST
• Natasha Boskic ([email protected])• Kirsten Bole ([email protected])• Nathan Hapke ([email protected])
