Tweaks for an Accessible Drupal Site

Getting a Drupal 6 Site up to FAE Standards

FAE

This is a short talk I gave the other day. I'm looking for feedabck. code is at:

http://staff.ed.uiuc.edu/jbarclay/accessible/accessible.zip

and

http://staff.ed.uiuc.edu/jbarclay/accessible/fck_accessibility_tweaks.zip

Many themes in Drupal are fairly accessible out of the box. But some tweaks may be needed to meet Functional Accessibility Evaluator standards. Similar tweaks are needed in themeing drupal in general. You would like to be able to apply such changes

1. User Content. Setting up FCK.
2. Theming. Picking a good theme and tweaking it.
3. Fixing Other Module's Content
   • Theme overrides
   • hooks

User Content.

Train the user to use html properly, and take away whatever markup you don't want them to have.  I use FCK editor module which has a configurable toolbar and ability to apply styles. 

FCK Resources:

• FCK Editor Module
• Drupal + FCK Documentation.  Great module documentation.

I'm going to walk through some relevant accessibility configuration steps for FCK in Drupal. 
 

Configure Toolbar

To configure the toolbar, you must get into the code of the fck editor code and create a toolbar that works for you. In fckeditor.config.js, I add:

for my toolbar. You will also want to create a css file for css that the user can apply. As with most GUI html editors, don't expect the selector part of these styles to behave well; they won't know that a rule with p.first span.silly {...} can only be applied within the p.first context.

I call the css pulldown configuration file fckstyles.xml and the styles that are applied in the GUI userapplied.css.  I put both it in my generic college module in /sites/all/modules/coe/.  This way its accessible from all themes and doesn't get overwritten when I upgrade the fckeditor module.  

It controlls the pulldown and what element as style is applied in. You'll want to make sure these are in your site's css file of course or include the userapplied.css in your theme.

Other FCK Configurations

On the configuration page, change the default state to disabled.  The WYSIWYG will get in the way on many forms and you don't want to have to write a long list of urls or fields to include or exclude.

Theming

FAE wants headers above menu lists and headers should be added to most content blocks. In garland, the block.tpl.php template will leave headings out if they are empty, but author often wants an offscreen header. So block.tpl.php needs to be changed to included an "offscreen" class so an offscreen heading can be added. It also needs to put the h2 directly above menu ul's, but not other block content. This is done by overriding the garland block.tpl.php template.

In page.tpl.php h1s are used that need to be demoted to h2s. This is a simple modification of page.tpl.php on 41, 45, 75,

Theming Resources

• http://drupal.org/theme-guide/6
• Drupal 6 Themes
• Pro Drupal Development
• Dojo Screencasts
• form theming

A helper module for hooks

If you're going to use the same functionality in many sites or want to avoid editing a contributed module or overriding its theme .tpl files

For accessibility, I have an accessible.module I've made. For tweaks specific to a given site I use a SITENAME.module module. Then I have a catch all module for general practices called coe.module.

accessibe.module functionality

<

ul>

general ability to class a block heading to "offscreen"

fix for google cse module's bad form

<

ul>

Resources

• hook_form_FORM_ID_alter
• hook_form_alter lesson (Note that hook_form_FORM_ID_alter is generally preferrable in drupal 6)