[Back to Design Exchange Presentation]
Accessibility and Usability
Colin Clark
Accessible Design is Usable Design
Design Principles
- your site design affects everyone
- the curb cut effect
- help your users orient themselves in your site
- help them avoid and correct mistakes
Separation of Structure and Presentation
- Why separate them? Reusability!
- makes it easier to:
- add and modify content
- use only portions of the content
- change your look & feel
- site will work with a variety of devices
- works better with older technology
The Right Tools for the Job
PDF Accessibility
- Are PDFs accessible? Yes (sometimes).
- The real question - Are PDFs effective for my needs?
- PDFs are good for print documents
- require user to leave the browser sandbox
- require special tools
How to Make Your Site Accessible
Some Basics:
- Use good structural markup
- Logical ordering and shortcuts
- Labeling: more than just ALT text
1. Structural Markup
- Use HTML tags to identify your content
- Use lists for all kinds of things, even navigation!
- <div> and <span> tags show structural divisions and provide hooks for presentation
- Use tables for tabular data
- Use CSS for presentation
Example: span.blue {color: #0033ff; font-weight:bold;}
2. Logical Ordering and Shortcuts
- Prioritize your information
- Identify tab orderings.
Example: <a tabindex="1" xhref="mylink.html">
- Provide keyboard shortcuts.
Example: <a accesskey="1" xhref="mylink.html">
3. Labeling
More than Just ALT Text
- Images and media need equivalents
- Label your forms.
Example: <label for="myForm">Enter your name:</label>
- When you have to use pop-ups, inform the user.
Example: <a target="_blank" xhref="myLink.html" title="My link. This link will open a new window.">
- Provide meaningful link text
- no "click here" links
- use the title attribute where necessary
Summary
- Accessibility makes your site better for all users
- Strive for consistency and clarity in your designs
- Separate structure from presentation
- Prioritize, label, and describe your content