Accessibility Building Blocks
Ian Lloyd, @Media 2005
What this presentation covers
- Process - How you can get accessibility engrained in culture
- The basics - what you should be doing with links, forms and tables
- Tools - what's freely available to help you
Not covering the following:
- Each and every point of WCAG
- Detail conformance levels (1, 2, 3)
- Usage of screen readers/assistive devices
- The 'why' of accessibility
Part 1: Process
- Making accessibility an integral part of what you do
Before you fix your markup ...
- Need buy-in!
- What is business case?
Embarassment can be a powerful tool
- Bad web accessibility - a problem unseen by majority
- Demonstrate the problem
- "Your site is difficult for me to use - I'm a blind user."
- "Really? Can you come and show us what you mean?"
Irony is:
- Good web accessibility is equally transparent to majority
- but word of mouth is very powerful
Testing is a must
- Enterprise solution - Watchfire
- Free services (Cynthia Says, The Wave etc)
- Results still difficult to interpret though
Part 2: Accessibility Building Blocks
- What you absolutely should be doing with your markup
WCAG 1.0 Guidelines
- Provide equivalent alternatives to auditory and visual content.
- Don't rely on colour alone.
- Use mark-up and style sheets and do so properly.
- Clarify natural language usage .
- Create tables that transform gracefully.
WCAG 1.0 Guidelines (cont'd)
- Ensure that pages featuring new technologies transform gracefully.
- Ensure user control of time-sensitive content changes.
- Ensure direct accessibility of embedded user interfaces.
- Design for device-independence.
- Use interim solutions.
WCAG 1.0 Guidelines (cont'd)
- Use W3C technologies and guidelines.
- Provide context and orientation information.
- Provide clear navigation mechanisms.
- Ensure that documents are clear and simple.
Will be concentrating on:
- Images
- Links
- Forms
- Tables
- Fonts
Images
- The biggest thing you can tackle (mostly visual medium)
- Easy to do
- Easy to get wrong also
Images - Alt attribute
- Is an alternative
- Not to be used for hover help (important information)
- For use when images disabled/slow-loading
- Provides context for search engines
- ... and of course for screen readers
Images (example)
<img src="examples/sydney1.jpg" alt="Sydney Opera House, night-time shot with the harbour bridge in the background" width="500" height="354" />
Images (some examples)
- You can also over-describe!
Images - missing and empty alts
alt="" is not the same as no alt alt="" means no alternative necessary- missing alt can results in screen reader confusion (image or filename read out)
- For sliced images, use one alt for main image,
alt="" for others
Images - Longdesc
- provides link for additional information
- badly supported
- D-link workaround
Links
- The foundation of the web!
- If this isn't right, nothing much else matters
Links - common sins
- Click Here for more information
- More information
- About what?
- Use meaningful link phrases
<a href="cat.htm">Download our catalogue</a> not <a href="cat.htm">Click here</a> to download our catalogue
Links - common sins (cont'd)
- JavaScript links
<a href="#" onclick="displaySlide('pic3454.gif');"
>
- Useless if JavaScript disabled
- Cannot bookmark
- Cannot right-click
- No good for search engines
Links - common sins (cont'd)
- Links that are not links
- Breaking well understood rules
- Links should be underlined
- Link colours change when visited
Links - common sins (cont'd)
- Pop-ups can be especially confusing
- Warn before opening new windows or other formats e.g:
<a href="terms.html" target="_blank">Read the terms and conditions (opens in a new window)</a> or
<a href="cat.pdf">Download the catalogue (in PDF format)</a>
Data Tables
- Layout a thorny issue, data even trickier
- Tables great for showing trends/patterns - for sighted users
- Very difficult for blind users
Data Tables
- Use
th for table headers, not td
- Use
scope attribute
- Use the
summary attribute
- similar to image
alt
- invisible, should be set to empty if not required (
summary="")
- Make use of
thead, tbody and tfoot structural elements
- Example of data table
- For complex tables, use
headers and id attributes
Forms
- Layout is an important first step:
- Text label comes first then form control
- Exception is radio buttons and checkboxes
Forms in tables
- Layout affects usage of form
Forms and Navigation
- Do not abuse forms for navigation purposes:
- Assumes scripting enabled
- Makes too many assumptions about user (mouse, sight)
Forms - Useful accessibility tags
- Use
label. Always
- Associates text with correct control, unambiguous
Forms - Useful accessibility tags (cont'd)
Forms - some clever tricks
- Show form focus with CSS
- Accesskeys - can associate key stroke with form elements
(and links too)
<input type="text" name="txtsearch" accesskey="s" />
- Browser support differs
- Keys already assigned for different purposes
- Only use if you are sure of audience
Building Blocks: A summary
- Some steps more simple than others
- Focus energies on images, links and forms
- By doing these, should easily pass conformance level 1, almost at 2
Tools
- What can you get for free?
- What can you add in to your browser?
- How do they support accessibility?
Essential browser add-ins
Further help - forums/discussion
A Little Food for Thought ...
- An Italian inventor built the first typewriter to help a blind countess
- The telephone was originally invented as a device to help the hard of hearing
- The remote control was invented for people with limited mobility
- Office scanners evolved from technologies to make talking books for the blind
