• Save
Designing Accessible Drupal Themes
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Designing Accessible Drupal Themes



Introduction to web accessibility and tips for making Drupal themes more usable and accessible. Presented at DrupalCampLA in August 2010.

Introduction to web accessibility and tips for making Drupal themes more usable and accessible. Presented at DrupalCampLA in August 2010.



Total Views
Views on SlideShare
Embed Views



2 Embeds 60

http://whatdidijustlearn.blogspot.com 40
http://localhost 20



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Designing Accessible Drupal Themes Presentation Transcript

  • 1. Designing Accessible Drupal Themes
    Heather Wozniak, Ph.D.
    UCLA Office of Information Technology
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. Disability types
    Seeing (blindness, color blindness, low vision)
    Mobility and motor control
    Cognition and learning
  • 6. Disability causes
    Accident or injury
    Neurological or psychological disorder
  • 7. 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
  • 8. 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
  • 9. Basic principles of web accessibility
    People with disabilities should be able to get at all the same information and functionality as those without disabilities
  • 10. 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.”
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. Demo and Discussion
  • 16. 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
  • 17. 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;
  • 18. Common Design Flaws(and how to fix them)
    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
  • 19. Common Design Flaws(and how to fix them)
    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)
  • 20. 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; }
  • 21. Common Design Flaws(and how to fix them)
    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;
  • 22. Common Design Flaws(and how to fix them)
    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
  • 23. Common Design Flaws(and how to fix them)
    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
  • 24. 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)
  • 25. Free Checkers and Tools
    WAVE Toolbar for FF:
    Color contrast:
    1. webaim.org/resources/contrastchecker
    2. Juicy Studio Accessibility Toolbar for FF
    Lots more listed at WebAIM
  • 26. 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
  • 27. 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:
    Audience suggestions?
  • 28. Where can I learn more?
    Official standards:
    Section 508 (amendment to US Federal Government Rehabilitation Act of 1973)
    WCAG 2.0 (Web Content Accessibility Guidelines from W3C)
    W3C Web Accessibility Initiative
  • 29. Where can I learn more?
    Practical discussions and guides:
    WebAIM: Web Accessibility in Mind
    UC Resources for Designing Accessible Websites
    Accessibility and Drupal