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; } This text will be blue This header will be blue

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

Images, continued If no description needed, set 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 :

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 Read the full report

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 Freight Charges Perth …

Labels for Forms Labels associate field with correct text Extremely useful for screen readers Keep fields in logical order Your Surname

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 Kirsten Bole Nathan Hapke