Download Coding an Accessible Site - University of British Columbia

Workshop 2
Coding an Accessible Website
Web Content Accessibility Project
Funded by BCcampus
Natasha Boskic, Kirsten Bole, Nathan Hapke
University of British Columbia
Workshop schedule
• Monday August 21
Basics of Web Accessibility
• Tuesday August 22
Coding an Accessible Website
• Wednesday August 23
Accessible Multimedia
• Thursday August 24
Creating Usable Content
• Friday August 25
Disabilities & 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 consistent
Keep navigation the same on each
page
• Be redundant
Presenting 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 browser
UNLESS 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 for
data, 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])