Designing Accessible Drupal Themes

Designing Accessible Drupal Themes
Heather Wozniak, Ph.D.
UCLA Office of Information Technology
design@heatherwozniak.com

We’re going to cover…
Why accessibility matters
Basic principles of web accessibility
Common design flaws (and how to fix ‘em)
Free checkers and tools
How some popular contrib themes stack up
Resources for learning more

What we’re not going to cover…
The in’s and out’s of Section 508 or WCAG 2.0
WAI-ARIA (Accessible Rich Internet Applications)
This presentation is designed to give you practical tips you can use to improve the general usability of your themes, and to serve as a jumping-off point for learning more about accessibility

Why make your site accessible?
Approximately 20% of the general population has a disability
These are potential customers, readers, community members, contributors, clients, employees, you name it
It’s not nice to discriminate or exclude
In some cases, it’s the law
If it’s not law now, it may become law

Disability types
Seeing (blindness, color blindness, low vision)
Hearing
Speech
Mobility and motor control
Cognition and learning

Disability causes
Genetics
Illness
Accident or injury
Aging
Neurological or psychological disorder

Keep in mind…
Conditions can be temporary or permanent
Many people affected by these conditions wouldn’t necessarily identify themselves as disabled
As the Web becomes more accessible, and the first Internet generation ages, the audience of disabled users will continue to grow

Bottom line:
Your disabled audience is probably larger than you think
. . . and it could grow, if you make your site more accessible
. . . and you could win more contracts if you are able to offer accessibility compliance

Basic principles of web accessibility
People with disabilities should be able to get at all the same information and functionality as those without disabilities

W3C Web Accessibility Initiative
“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.”

Your users may not be able to:
See the screen
Use a mouse or keyboard
Hear the audio
Read small text
Distinguish certain color combinations
Process fast moving images or text
Complete tasks in a limited amount of time

Your users might:
Use a screen reader or Braille display
Use only a keyboard
Use a switch or other assistive device
Issue voice commands
Zoom or enlarge their text
View your sites at a small resolution on a large monitor
Turn off audio, video, or images, because they find them distracting

So you should:
Design for device independence
Use semantic page structure
Provide media in multiple modalities (alternative text for non-text content )
Choose legible, scalable fonts and color schemes
Label all form fields
Ensure linked files are accessible

Common Design Flaws
You can control these things at the theme level
Little or no semantic structure
Text in background images
No skip navigation
No :focus to go with :hover
Not enough color contrast
No link cue besides color

Demo and Discussion

Common Design Flaws(and how to fix them)
Little or no semantic structure
Killer for screen readers AND killer for search engines
Easy to see in text-only or outline modes
Use hierarchical headings <h1>-<h6>, only one <h1> per page
Use headings for all lists and major components on the page (hide from sighted users if necessary)
Usually set in page templates

Use hidden headings if necessary
Drupal 7 will include a class, element-invisible
In the meantime, create your own:
.element-invisible {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow:hidden;}

Text in background images
No way to provide alt-text or semantic markup
Screen readers and search engines are completely unaware of the text
Some users may disable images
If it’s a banner, your page may be missing the site name or title!
Use CSS to style your text or use foreground images

No skip navigation
Screen readers and keyboard-only users have to wade through links to get where they need to go
Include a link at the top of the page that jumps to hard-to-reach sections, for instance:
Skip to navigation
Skip to content
Skip to footer
If it really cramps your style, make the link appear on focus (don’t use display: none)

Making skip nav appear on focus
#skip-link a, #skip-link a:visited {
position: absolute;
left: 0;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden; }
#skip-link a:hover, #skip-link a:active, #skip-link a:focus {
position: static;
width: auto;
height: auto; }

No :focus to go with :hover
Keyboard users don’t get visual cues
For every :hover in your CSS, add a corresponding :focus
a:hover, a:focus {
color: red;
text-decoration: underline;
}

Not enough color contrast
Check individual color combos at WebAIM during design process
Check all colors with a report generator like Juicy Studio Accessibility Toolbar
Recommended ratio is 4.5:1 for normal text
Adjust the colors as necessary

No link cue besides color
Users can’t tell where to click, resulting in confusion and frustration
Use an indicator besides color to indicate possible action (underline, bottom border, bold)
For menus, tabs, buttons, and nav bars, color and context are often enough

Other common flaws :
No alt text on images (empty alt text is ok)
Redundant alt text on images
Missing or problematic link text
Unlabelled form fields (especially in search boxes)
Dropdowns that aren’t keyboard accessible
File attachments that aren’t accessible (especially PDFs)

Free Checkers and Tools
WAVE Toolbar for FF:
wave.webaim.org
Color contrast:
1. webaim.org/resources/contrastchecker
2. Juicy Studio Accessibility Toolbar for FF
Colorblindness:
http://colorfilter.wickline.org
Lots more listed at WebAIM

How to self-evaluate your site
Use free accessibility checking tools
Examine outline and text-only modes
Best way to see how screen readers and search engines understand your site
Check heading structure
Check alt-text on images
Check link text
Try using your site with keyboard only
Zoom text in and out
Run design through color simulators

How do some of the contrib themes stack up?
Let’s try using some of these tools.
D-theme.com provides sample themes for us to evaluate:
Zen
Garland
DrupalCampLA
Audience suggestions?

Where can I learn more?
Official standards:
Section 508 (amendment to US Federal Government Rehabilitation Act of 1973)
www.section508.gov
WCAG 2.0 (Web Content Accessibility Guidelines from W3C)
www.w3.org/TR/WCAG20
W3C Web Accessibility Initiative
www.w3.org/WAI/

Where can I learn more?
Practical discussions and guides:
WebAIM: Web Accessibility in Mind
webaim.org
UC Resources for Designing Accessible Websites
www.ucop.edu/irc/itaccessibility/resources
Accessibility and Drupal
drupal.org/node/394094

Designing Accessible Drupal Themes

by Heather Wozniak on Aug 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 10

Statistics

Designing Accessible Drupal Themes — Presentation Transcript