Accessible theme suggestions needed

Posted by emmajane on July 23, 2010 at 4:56pm

For most of the new D7 book that I'm working on I'll be using Bartik for screen shots. The theming chapter will include instructions on how to re-colour Bartik and Garland as well as give some good alternate themes. There will be little (if any) information on how to manipulate .tpl.php files. This is a pointy-clicky site building beginner book. (Yes, Front End Drupal will be updated for v7 next year.)

I have a few favourite themes that I plan to include in the book as part of the recommendations in the theming chapter. I would also like to use different themes for the sample sites that I'll be giving step-by-step instructions on how to build.

Here are the themes that I'm looking at featuring. If you have others you'd like to showcase (or reasons not to show case these), please let me know what they are.

Acquia Marina - http://drupal.org/project/acquia_marina
Acquia Slate - http://drupal.org/project/acquia_slate
Celju - http://drupal.org/project/celju
Corolla - http://drupal.org/project/corolla
Magazeen - http://drupal.org/project/magazeen
Pluralism - http://drupal.org/project/pluralism
Pixture Reloaded - http://drupal.org/project/pixture_reloaded/

Please note:

I'm looking for complete themes, not just base themes.
I know that some of these themes don't have D7 versions. I've contacted all of the maintainers to ask if they need help upgrading their themes.
Top Notch Themes knows about the accessibility problems with their Suckerfish menus. This will be resolved for their D7 themes.

Comments

Where to start...

Posted by mgifford on July 23, 2010 at 8:57pm

Hi,

Thanks for asking this important question. At the moment I'd only suggest Zen & Core Themes.

However, I think the first is trying to find who has made the #D7CX pledge. That's easy enough thanks to Solr:
http://drupal.org/project/themes?solrsort=sis_project_release_usage%20de...

Then finally, looking at those themes which have a good record for accessibility in D6. I think this is still one of the better lists:
http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_...

The only Zen theme has made the #D7AX pledge. Hopefully more will do so shortly.

--
OpenConcept | Twitter @mgifford | Drupal Security Guide

+1

Posted by k8 on July 24, 2010 at 12:39am

I've used Zen, Acquia Marina, and most recently Genesis - happily: "validates XHTML Strict, CSS3 and is WCAG AAA and WAVE compliant."
http://drupal.org/project/genesis

Hi there, I am the maintainer

Posted by Jeff Burnz on July 24, 2010 at 3:29am

Hi there, I am the maintainer of Pixture Reloaded and I've just taken the #D7CX pledge!

I think its a good theme to include especially the D7 version since its one of the few with ARIA Roles and being based on Adaptivetheme (the D7 version is a subtheme) a lot of time and effort has gone into its underlying accessibility. The color schemes (Pixture Reloaded is re-colorable) are the worst thing about it, however at the moment I am working up a number of color schemes just for vision impaired users similar to Christian Zwahlen's Text Size module. I'm also going to include font-family and font-size theme settings. Both these features should be in the theme within a couple of days (I've built them, just need a tad more testing).

Also because of all the theme settings piled into Pixture Reloaded (coming from Adaptivetheme core) its a very good "pointy clicky" sort of theme - which is the whole point of it really :)

Genesis and Adaptivetheme both have excellent accessibility (perhaps for a "list of accessible starter themes"), recently a user sent me nice feedback saying they now use Genesis exclusively because they build US Gov websites and its Section 508 compliant out of the box.

accessabilty

Posted by jjsarton on July 24, 2010 at 12:05pm

For my feeling the genesis has some errors, there are some css values which are expressed in px. WCAG 2 tell that the size of large textes shall be the user agent default (mostly 16px). The fixed layout shall also have the wifth/height for all elements expressed in em. Picture shall also be scaled according to the font-size of the user agent,...

Not quite right there

Posted by Jeff Burnz on July 24, 2010 at 2:29pm

Not quite right there mate.

All fonts, padding's and margins, most borders and all but one thing is positioned using ems. Theres a couple of table td borders in px and thats about it (most table borders are in ems). A lot of time was spent overriding Druapl 6 core to achieve this.

The user agent sets the font sizes, not me - I just specify a bunch of relative defaults - its up the user to scale texts appropriately for there comfortable viewing (I can never predict what that is), indeed this is exactly what WCAG 2 says to allow for.

The theme can be fixed, fluid or elastic width, furthermore the whole entire layout can be switched to using percentages (fluid columns) or ems (elastic columns) in a heartbeat. Even the fixed width default is flexible (min/max width). If you'd read the documentation that comes with the theme you would have seen this:

/**
 * Width Setting
 *
 * Genesis supports Elastic, Fluid and Fixed width values.
 * Elastic layouts are dynamic and will expand or contract when 
 * the font size is changed. Fluid widths change when the browser 
 * is resized and fixed width layouts stay the same width even 
 * when the broswer is resized or the font size is changed.
 *
 * Elastic layouts use ems,       e.g. 80em
 * Fluid layouts use percentages, e.g. 85%
 * Fixed widths use pixels,       e.g. 960px
 */

And in the Layout documentation:

  ii.Each variant uses a different unit (em, percentage or pixel):
  
     a variants are em's (elastic sidebars)
     b variants are percentages (fluid sidebars)
     c variants are pixels (fixed width sidebars)
     

  All layout variations:
  
  genesis-1a  -  Left (20em)  |  Content  |  Right (20em)
  genesis-1b  -  Left (25%)   |  Content  |  Right (25%)
  genesis-1c  -  Left (240px) |  Content  |  Right (240px)
       
  genesis-2a  -  Content  |  Left (20em)  |  Right (20em)
  genesis-2b  -  Content  |  Left (25%)   |  Right (25%)
  genesis-2c  -  Content  |  Left (240px) |  Right (240px)
     
  genesis-3a  -  Left (20em)  |  Right (20em)  |  Content
  genesis-3b  -  Left (25%)   |  Right (25%)   |  Content
  genesis-3c  -  Left (240px) |  Right (240px) |  Content

There was a lot of thought put into the defaults (obviously the choice is wide), and in any case they are very trivial to change. In D7 Genesis is fluid width by default - the ONLY reason I did this was because people keep overlooking the very good documentation and think its fixed width only...

Scaling pictures has nothing to do with this theme, its a starter theme - that is up to the theme developer and how they want to size and scale images.

If you have a problem with the accessibility of a theme post and issue or fix it and post a patch, this is not really the forum.