I know y'all are talking about getting all fancy with sub-themes and other bells & whistles, but my main interest in the Zen Theme is accessibility, which is one of the advantages of separating content from presentation.
I'm doing a Web site for my church, and making sure the site is available to everyone is not just a technical issue, but a moral one. I need to serve content before navigation and include access keys and skip navigation links, for example. I use Dive Into Accessibility to keep up with accessible design principles. They also have a list of tips by publishing tool, and Drupal isn't even listed, unlike GreyMatter, Blogger et al. I realize those are straight blogging tools, but still.
I know how to do the important stuff in XHTML, but with Drupal, I'm at a loss, because I don't know PHP. (Yeah, yeah, it's on the list, right after perfecting my pie crust.)
I'm assuming the theme is the place to address this, but I could be barking up the wrong tree. If I am, let me know.
Thanks.
Comments
Yes Please
I've been meaning to go through and put together an accessibility checklist for Zen.
You should put together a wish list and submit it to the Zen issue queue.
-= Jeff Robbins | Lullabot | Drupalize.me =-
Cool!
I'll get right on that! No, really; I'm not kidding.
I was thinking maybe I should give you guys an example of XHTML with all the doo-dads in it to work from. If you could point me to a site that's using Zen right now, I could add the relevant markup to the resulting XHTML. I haven't upgraded to Drupal 5 yet, or I'd just use my own site.
Bless you a thousand times.
Shakin' the bushes, boss
I haven't forgotten about y'all—had to update my CiviCRM, which turned hairy for some reason.
Anyway, I've gathered a bunch of reports and info, but haven't whittled it down into anything usable yet.
But forget what I said about content-first (not helpful), and accesskeys are meh.
Accessibility idea
I also think accessibility is important (although I may not always get it right!)
In a couple of sites I've tried to introduce skip navigation and access keys, but this has been by directly shoving html into the page.tpl.php file.
It's also hard to agree on what is the 'best' way of doing things, but it seems to me as though 'skip navigation' should be the first thing a screen reader 'sees' on a page, with a link to 'accessibility info' and a site map soon after.
So, in the past, I've just coded that in at the top of the page. BUT with zen I've been able to understand a little more (thank you) and so created a new region (via the template.php file) at the very start of the page (above the 'header' region) and called it 'accessibility area'.
Now I can create a new block and assign it to the accessibility area through the drupal admin tools.
[to add the region....at line 40 in template.php....
function zen_regions() {return array(
'left' => t('left sidebar'),
'right' => t('right sidebar'),
'content_top' => t('content top'),
'content_bottom' => t('content bottom'),
'header' => t('header'),
'footer' => t('footer'),
'access' => t('accessability area')
);
}
and then need to add
<?php print $access; ?>in the page.tpl.php - I put it just after the page div on line 14. All this is well documented elsewhere.
]
A skip navigation link can then be made easily using just the administrator tools on the site. I suggest creating a block assigned to the accessibility region, configured to show a link like:
<a href="#contentStart" accesskey="s">skip navigation</a>Of course this needs a bit of code adding to page.tpl.php around the 'main' div
<a id="contentStart"></a>All this is a long way round to say that if the 'accessibility region' and the 'start navigation anchor' were either in zen or added in a read me file, then the final task of assigning skip navigation links and making links to other nodes once they have been created (e.g accessibility statement page) can be done much more easily by the end user via normal drupal tools (i.e. creating blocks) rather than having to hack the template files.
For access keys, in the past I have created those as 'hidden links' (by using css) - so again hopefully a screen reader would pick them up, as would someone browsing with style turned off. These could also go in the accessibility area.
I hope that is clear, and perhaps even useful. Please contact me if you want to!
What really works
caprenter’s tip is a very good one.
Unfortunately caprenter says “in the past I have created those as 'hidden links' (by using css) - so hopefully a screen reader would pick them up.” (emphasis added)
All too often CSS designers (myself included!) have made accessiblity links hidden by using either
display: noneorvisibility: hidden;without actually testing it in a screen reader!I would say this is a case of ”the blind leading the blind” except that, in this case, it would actually be really useful to have a blind person leading us! :-)
Has anyone tested these techniques in screen readers? Or has links to someone who has?
- John (JohnAlbin)
Screen reader
You could use the Lynx browser to test..
If you drink more than you think, will you drink more if you think more......?
If you drink more than you think, will you drink more if you think more......?
Lynx not necessarily a good idea
The problem with using Lynx to test, is that it won't be affected by stylesheets and what not.
As I understand it, the most common screenreaders, such as JAWS, are assistive technologies which run on top of Internet Explorer or Firefox. So somethings that are removed from the screen - using CSS or JavaScript - will not be read out by JAWS but would be shown in Lynx.
So long as you bear this in mind, Lynx is a really good tool. But it doesn't cover all bases.
Hidden Stuff
Guilty as charged! I haven't tested 'hidden links' in a screen reader (and there are lots of them to test in), but others have (see links below) -and generally it's not a good idea! But...I'm also guilty of not making myself entirely clear.
I don't think that hiding 'skip navigation' 'accessibility info' or 'site map' is a good idea, because it's not just screen readers we're catering for.
It's the (other) access keys that I've created as hidden links (this is probably not a good thing either, but here's my problem/thinking on the subject)
!Firstly access keys is a whole can of worms in itself, so bear that in mind!
On a drupal site I can create a contact form and enable it in the menus and call it 'contact' and I can get to it at ?q=contact, but how do I create an access key for that, or any other, menu item? I don't know, and I don't believe there has been a sucessful resolution to this in the drupal community yet because of issues of internationalization, different browsers using different keys, handling forms and so on.
My answer is to publish an access keys page and state what you're doing, assign access keys as you see fit (in the light of my understanding so far) and invite comments from site users on whether or not this has been helpful.
To make an access key work for the contact page I have to have another link to 'contact' somewhere on each page of the site, where I can add the 'accesskey=' bit into the html link code.
This is the type of link I chose to hide, partly because I'm not sure where it should go and because there is a non-hidden link available on the page anyway. It's a hack to get the access key to work. (This also applies to access keys for 'Home' and the login page and any other page you create in drupal that you want to be made accessible with access keys)
Now I'm not entirely happy with this hack. One reason is that it's not something that can be changed through the administration tools of a site - it needs a bit more knowledge and skill (not much, but it's not a content managed function).
I welcome any comments on this approach. Even as I write this I'm thinking - "Why not just make them visible and place them in footer?" I'll think about this.
Anyway, a couple of places to start your own investigation into hidden things on your site:
http://css-discuss.incutio.com/?page=ScreenreaderVisibility
http://www.webaim.org/techniques/css/invisiblecontent/
and automatic access keys in drupal:
http://drupal.org/node/23628
Bad news about JAWS and CSS
I was themeing a site last night and decided to actually look closely at the “Skip to Navigation” CSS stuff…
From the JAWS website (http://www.freedomscientific.com/fs_support/BulletinView.cfm?QC=1165):
So neither method works. On this last site I used a link with the same color as the background:
#skipToNav { line-height: 1em; margin-bottom: -1em; } /* optional */#skipToNav a:link, #skipToNav a:visited, #skipToNav a:hover { color: [same as background]; }
But that will only work on a site with a solid (and not a patterned) background, so we’ll need a better solution.
- John
Albin.Net : friendly web development
- John (JohnAlbin)
Use absolute positioning...
I have only been writing code for a couple of months now, but on my site I am using absolute positioning to position the links....
something like this:
position: absolute;
left: -9000em;
This should solve the problems that you have I think...Not sure, but I thought i would throw it out there...
James
I have used the technique
I have used the technique outlined here for hiding headers that I have replaced with an image; but it also contains info on skip to navigation links. Do you think this would work?
http://www.webaim.org/techniques/css/invisiblecontent/
learn one, teach one, do one
Yes, it will work
Yes, Magdelaine, you can rely on the techniques presented by WebAIM to give you valid solutions to accessibility problems.
I'm really glad to see this discussion of accessibility in Drupal going on, but it's a little disturbing that the last comment was over a year and a half ago. Is there another thread or group on this topic?