Introduction to Accessibility
What is accessibility?
"The degree to which an application protects its functionality from being denied to the user"
Removing problems we have created
Widening the reach of our website
How do disabled people use the web
Blind: speech browsers and refreshable braille display
Partially Blind: Enlarged fonts
Colour-blind: overriding colours
Motor-skill impairements: keyboard-only, serial access devices
Learning disabilities: Plain English - simple language
What difficulties they face
Expensive and limited hardware
Expensive and limited software
Support
What obstacles we impose
Misuse of HTML
Embedding content in graphics
Unreasonable hardware requirements
Unreasonable software requirements
Complicated / precise navigation
Requirements for Accessibility
Disability Discrimination Act
Websites offering a service to the general public
General public includes those with disabilities
Required to make reasonable adjustments to comply
Websites have been in breach since May 2002
Web Content Accessibility Guidelines
Guidelines: http://www.w3.org/TR/WCAG10/
Checklist: http://www.w3.org/TR/WCAG10/full-checklist.html
Techniques: http://www.w3.org/TR/WCAG10-TECHS/
Priority 1 Issues (highlights)
Ensure pages are usable without scripts and applets *
Provide text equivalent for every non-text element
Ensure information conveyed in colour is also available without colour
Organise documents to be readable without stylesheets
For tables, identify row and column headers
For complex tables use markup to associate data cells and header cells
IF All ELSE FAILS: create an accessible alternative
Priority 2 Issues (highlights)
Create documents that validate to published formal grammers
Use stylesheets to control layout and presentation
Use relative sizes rather than fixed
Markup lists and list items properly, use headers properly
Clearly identify the target of each link
Do not use tables for layout
Do not use structural markup for visual formatting
Associate labels explicitly with their form controls
Priority 3 Issues (highlights)
Specify expansion of each abbreviation or acronym in a document's first occurrance
Identify primary natural language of document
Create logical tab order through all elements
Place distinguishing info at the beginning of headings, paragraphs, lists
Create a style of presentation that is consistent across pages
Provide summaries for tables
Provide abbreviations for header labels
Making Websites Accessible
Building accessibility ontop of an inaccessible website
Existing websites
Workarounds and kludges
Lots of extra markup
Meets Level A+ compliance only
Designing with accessibility upfront
Structured markup
Stylesheets
Valid HTML
Meets Level AA+ compliance
Web Design
What is HTML
A markup language
Structures content
What HTML isn't
A layout language
Desktop Publishing
What is CSS
Stylesheets
Text styles
Positioning and Layout
Aims and focus
Web standards
Royalty free and open standards
Recommendations from W3C
Mainstream browsers support web standards
Avoids browser-dependant authoring
Structured HTML
Identify and markup headings, lists paragraphs
Identify and markup groups of related information
Content
Navigation
Header
Footer
Form structure
Single table structure
Avoid javascript dependancies
Explicitly identify field labels
Use stylesheets to enhance layout
Javascript usage
Avoid javascript dependancies
Avoid hardware dependant scripting
Avoid browser-dependant scripting
Prefer W3C DOM compliant coding
L&G Problem Areas
Presentational markup
hinders structure
makes document more difficult to understand (header or just big text?)
logical structure fundamentally more important than visual "structure"
reduces accessibility
Navigation
Javascript dependant
Fincky and difficult to use
Affects all pages
Solution: New accessible template
Images
No alternative text or descriptions
Javascript dependancies
Form validation
Javascript dependancy
Reliance on javascript to check for clean data
No server-side validation in evidence
Screen flow decisions
Javascript dependancy
Javascript used to populate a hidden field containing the nextPage
Javascript used to override the form action
QAS functions
Javascript dependancy
Javascript copies postcode and house number into hidden field
Javascript overrides form action
- Javascript automatically submits the form
scripted field population / calculation
Javascript dependancy
- Field is calculated during the validation routine.
- No server-side equivalent available
device-dependant event handlers
onclick
onmouseover
onmouseout
onfocus
onchange
onblur
Forms
Alternative text for form image buttons
Buttons are images
images need alternative text to be accessible
alternative text can be the same text displayed on the button
field labels
Every field has a text "label" (Surname, Post Code)
Explicitly map label to field using label element:
Tables
Layout tables
Tables are for structuring tabular data
Football League Table
Train Time Table
Tables for layout sacrifice structure for presentation
Just Say NO.
Forms are an "interactive table" - so okay.
Structured Tables
table header text and table data text
table header, table body, table footer
Accessible Tables
relating header text to data text
scope attribute
header attribute
table summary: What kind of data is in this table?