Posted by JuliusCharles on June 24, 2012 at 10:48pm
Hi everyone.
I'm a screen reader user and I'm using the Zen theme in the site I'm building.
I just want to know if you can give some advice on rearranging the sections of a site that uses Zen. I'm happy with Zen's accessibility, but I noticed that the contents are arranged this way (in the perspective of a screen reader user):
main content
navigation links (home, about us, contact us)
search
...I would like to have the following arrangement:
Navigation links
Search
Main Content
...Thanks.
Julius
Comments
Why don't you try another?
Hello Julius,
Other than Zen, there quite a few other accessible themes. Perhaps one of those might give you the desired sequence.
I do remember a link put up on skype group discussion which pointed to an article that described accessible drupal themes and listed out 12 of those.
Even I've used Zen in the site that I'm building. But I have stuck to existing structure. The intention of the structure is such that it provides the main content first to the screen reader user instead of showing him the navigation first. In case there's a need to navigate or search, there's already a provision to jump passed main content. Such accessibility seems to be suitable enough for me.
Siddhant Chothe,
Senior Software Developer at Techvision
Accessible D7 Themes
I posted this some time ago for Drupal 6, but it hasn't been maintained:
http://openconcept.ca/blog/mgifford/function_assessment_of_valid_drupal_...
Zen's good. I'd also suggest looking at - http://drupal.org/project/adaptivetheme
Lots of interesting discussions about ordering of content vs navigation. I'm not clear there's any single agreed best practice (other than using skip links).
We certainly need to do some more reviews of existing Drupal themes.
--
OpenConcept | Twitter @mgifford | Drupal Security Guide
Thanks for all your
Thanks for all your responses. I will try looking more into Zen to perhaps rearrange the blocks or something.
You used to have to move the navbar in page.tpl
I haven't actually spent much time with Zen 6.2.x/7.2.x, but with Zen 6.1.x, you used to have to move the navbar div in the page.tpl.php file. You couldn't change the source order placement of the navbar without changing you main template file.
And after changing that, then you had to make corresponding edits to the layout.css file that would replace the Zen height and margin settings on the navbar and the content area with your own. The way Zen 6.1.x worked was that the content was given a top margin of a specific height that would allow the navbar to float in the space left by the margin above it visually, even though it followed the content in the source order. The navbar was therefore given a similar height restriction in the layout.css file.
Here is a sample of some CSS files I was working with in 2009 to create a "holy grail" 3-column version of Zen that changed the source order as you describe. But my version adds some complications because I was trying to convert Matthew James Taylor's version of the 3-column Holy Grail over to Zen. Still, these might help if you are able to read the source code okay:
http://www.cawd.ca/zen/
After moving the navbar in the page.tpl.php file, I replaced the Zen's negative margin stuff on the navbar in layout.css with:
clear:both;
float:left;
width:100%;
And I removed the margin-top setting in that file for the .withnavbar classes.
Unless Zen has changed radically, I can probably figure out what CSS settings you need fairly quickly if you change your template file and remove the extra CSS on the navbar div.
And in case, you are wondering, the reason I wanted to do this was for accessibility reasons, because the Zen theme will break when you start to do extreme zooming (200% to 500% or more) or if you start narrowing your screen width too far, because the height of the navbar must be a set value in the default Zen design in 6.1.x. You should be able to zoom up to 150% or 200% without much problem, but I wanted a navbar that would expand to multiple lines if necessary based on text resizing, and that is simply not possible with any technique that I know of without having the navbar come before the content in the source as well.
Phil.