making accessible drupal sites n.
Skip this Video
Loading SlideShow in 5 Seconds..
Making Accessible Drupal Sites PowerPoint Presentation
Download Presentation
Making Accessible Drupal Sites

Loading in 2 Seconds...

play fullscreen
1 / 25

Making Accessible Drupal Sites - PowerPoint PPT Presentation

  • Uploaded on

Making Accessible Drupal Sites. Rick Ells UW Technology. About Drupal. Standards Based; xhtml, css, PHP Large user community Many templates to choose from Many modules to choose from. Drupal Is Cool. Centralized management Templates and modules Styles Scripting

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Making Accessible Drupal Sites' - amberly

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
making accessible drupal sites

Making Accessible Drupal Sites

Rick EllsUW Technology

about drupal
About Drupal
  • Standards Based; xhtml, css, PHP
  • Large user community
  • Many templates to choose from
  • Many modules to choose from
drupal is cool
Drupal Is Cool
  • Centralized management
    • Templates and modules
    • Styles
    • Scripting
  • Content creation, editing, and maintenance can be done without technical Web knowledge
  • Changes in styles, layout can be done across the site without content maintainers involvement
more cool
…More Cool
  • Information management
    • Categories
    • Taxonomies
    • Keywords
  • Navigation structures generated for you
  • Easy to add Web2.0 features
even more cool
…Even More Cool
  • Authentication, roles
  • Workflow
  • Customization based on default designs, templates, styles
    • Intercepts, overrides, and subthemes
being accessible
Being Accessible

WCAG 2.0 Guidelines

  • Perceivable
  • Operable
  • Understandable
  • Robust

Web Content Accessibility Guidelines (WCAG) 2.0

accessible design efficiency
Accessible Design Efficiency
  • Templates, stylesheets, modules can address many aspects of accessible design
  • Content authors and editors do not have to know as much about…
    • Skip to content
    • Font sizing
    • Color choices
    • Labeling, Alt texts
    • Semantic markup
    • Page layout
steps to accessible design
Steps to Accessible Design
  • Install
  • Update
  • Select theme
  • Add modules
  • Build blocks
  • Apply your design
1 install
1. Install
  • Installing Drupal
  • SQL Database
2 update
2. Update
  • Updates are essential
  • Each time the administrator logs in Drupal will display messages of needed updates
  • Do them promptly
3 select theme
3. Select Theme
  • Tables or tableless?
    • Tableless layouts best, especially if fluid
      • Controllable with CSS
      • Reading order can be independent of layout position
      • Fluid sizing allows scaling by user as needed
    • Table layout not so good
      • Imposes reading sequence
      • Presentation only somewhat controllable with CSS
    • Nested tables bad
      • Navigation nightmare
  • Many theme design philosophies
accessible themes
Accessible Themes

Box_grey Theme

Blue Bars Theme

Blue Lake Theme

Celju Theme

Clean Theme

CWS Theme

Flexible 2 Theme

Genesis Theme

Pluralism Theme

Pixture Reloaded Theme

Tendu Theme

Zen Theme

The Eleven Most Accessible Drupal 6 Themes

theme problems
Theme Problems
  • Non-nested use of h-elements
    • One h1 per page; main topic
    • h2; subtopics
    • h3; subsubtopics, etc.
  • Inconsistencies among modules in how headings are done
  • Deeply nested tables
  • Not specifying default language
4 add modules
4. Add Modules
  • Hundreds of modules are available
  • Offer a wide range of functionality
    • Editors, games, feeds, tools
  • Most are standards compliant
    • Problem: Inconsistent implementations among modules
  • Frequently updated
5 build blocks
5. Build Blocks
  • Blocks contain the code fragments for the different areas of your layout
  • Blocks are placed in page regions
  • Must be well-formed and strictly compliant to fit in context
    • Structured, semantic markup very desireable to get CSS to work
  • How you add things like “Skip to Content”
semantic markup
Semantic Markup
  • Use elements according to their logical type
    • Make headings with h-elements, not big bold paragraphs
  • Properly nest h-elements
    • H1 is the main page topic, h2s are subtopics, h3s are subsubtopics, etc.
  • Choose a content editor that makes semantic markup possible, even if you have to go into html mode sometimes
6 apply your design
6. Apply Your Design
  • Use subtheme, intercept, and override methods
    • Never modify original templates, stylesheets,
  • Customize templates
  • Customize CSS
    • Layout adjustments
    • Color scheme
    • Font size
    • Contrast
color scheme
Color Scheme
  • Color Selection: Consider the colorblind
color scheme1
Color Scheme
  • Contrast: 5:1 or more for text:background contrast
maintaining accessibility
Maintaining Accessibility
  • Do
    • Validate all modifications - strictly compliant
    • Choose editor that makes semantic HTML
    • Consider content flow in page structure
    • Add aids such as “Skip to Content”
    • Use semantic markup
    • Use scripting libraries and methods that support accessibility
maintaining accessibility1
Maintaining Accessibility
  • Don’t
    • Invent non-semantic elements (divs) when appropriate semantic elements are available
    • Used fixed sizes
    • Reduce contrast for artistic effect
    • Put essential content exclusively in media
    • Have visual media without captioning
drupal accessibility activity
Drupal Accessibility Activity
  • Accessibility Group
  • The Eleven Most Accessible Drupal 6 Themes
  • Accessibility Best Practices in Drupal Theming
evaluating your drupal site
Evaluating Your Drupal Site
  • WAVE
  • Functional Accessibility Evaluator
  • WebAnywhere
  • Yellowpipe Lynx Viewer
  • Wickline Colorlab
  • Paciello Group Color Contrast Analyzer