workshop 2 coding an accessible website

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 (natasha.boskic@ubc.ca)• Kirsten Bole (kirsten.bole@ubc.ca)• Nathan Hapke (nhapke@interchange.ubc.ca)