Making Accessible Drupal Sites - June 2009 - UW Staff Web Server

closebunkieAI and Robotics

Nov 15, 2013 (3 years and 10 months ago)

79 views

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


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


Information management


Categories


Taxonomies


Keywords


Navigation structures generated for you


Easy to add Web2.0 features

…Even More Cool


Authentication, roles


Workflow


Customization based on default
designs, templates, styles


Intercepts, overrides, and subthemes

Being Accessible

WCAG 2.0 Guidelines


Perceivable


Operable


Understandable


Robust


Web Content Accessibility Guidelines (WCAG) 2.0

http://www.w3.org/TR/WCAG20/

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

1.
Install

2.
Update

3.
Select theme

4.
Add modules

5.
Build blocks

6.
Apply your design

1. Install


Installing Drupal

http://www.washington.edu/computing/web/publishing/drupal.ht
ml


SQL Database

http://www.washington.edu/computing/web/publishing/mysql.ht
ml

2. Update


Updates are essential


Each time the administrator logs in
Drupal will display messages of needed
updates


Do them promptly


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

Managing 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

http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_6_themes


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


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

Managing Modules

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


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


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 Selection: Consider the colorblind

Color Scheme


Contrast: 5:1 or more for
text:background contrast

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 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


Accessibility Group

http://groups.drupal.org/accessibility


The Eleven Most Accessible Drupal 6 Themes

http://openconcept.ca/blog/mgifford/function_assessment_of_valid_dru
pal_6_themes


Accessibility Best Practices in Drupal Theming

http://szeged2008.drupalcon.org/program/sessions/accessibility
-
best
-
practices
-
drupal
-
theming

Evaluating Your Drupal Site


WAVE

http://wave.webaim.org/


Functional Accessibility Evaluator

http://fae.cita.uiuc.edu/


WebAnywhere

http://wa.cs.washington.edu


Yellowpipe Lynx Viewer

https://addons.mozilla.org/en
-
US/firefox/addon/1944


Wickline Colorlab


http://colorlab.wickline.org/colorblind/colorlab/


Paciello Group Color Contrast Analyzer

http://www.paciellogroup.com/resources/contrast
-
analyser.html