Looking for reviewers for Adaptivetheme for Drupal 7

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Jeff Burnz's picture

Hi peeps - I'm looking for anyone who might stick their hand up and volunteer to help review the Drupal 7 version of Adaptivetheme - I really want this to be the most accessible version of the theme ever and I need some help and feedback from real users.

There are a couple of areas I need to hone in on:

  1. Structure (sectioning and headings).
  2. Custom theme settings forms.

With regards to structure - the theme is coded in HTML5 which allows us many more sectioning type elements, where each section can have an H1 element. I have a version of the theme that leverages this to the max and uses hgroup and other sectioning elements to build a highly logical DOM structure. However I do not really know the accessibility implications of this, or if I am doing this in an optimal way. What I'm looking for here is to test the heading navigation capability of the theme - I think its going to be very good, but needs testing from real users. The current alpha1 version of the theme which you can download does not have this same structure and is more traditional (as in Drupal tradition), and what I would like to do is compare them side by side and see which one users prefer.

The theme has many custom theme settings, which of course uses a form built with FAPI. I have taken note what brandonojc outlines in http://groups.drupal.org/node/56703#comment-170798 with regards to fieldsets and radio / check boxes and built this by hand using FAPI. It would be great to get some testing of these forms to see if they hold up.

If your daring and want to download the alpha release and test it out locally its here: http://drupal.org/project/adaptivetheme , just take the alpha or the DEV since both are very similar (and stable). The more radical version I talked about earlier is not committed, yet... (I'll send that to you if you want to test it locally also).

I'm setting up a couple of test sites so if you're interested give me a buzz on Skype or drop a comment in here and I'll send you over a login - you need full admin access to test it out properly so I don't really want to hand that out in the open.

Comments

I have the first test site

Jeff Burnz's picture

I have the first test site setup - this version of the theme is the more radical, uncommitted version.

http://sitespring.eu/drupal-7.0-beta1

User/pass is demo/demo (you can add nodes and edit them etc).

It uses hgroup and H1 and H2 heading for the site name and slogan (they are always H1 and H2, on every page). Now, where this theme really differentiates from most themes is that when you view the Full node view the page title is inside the node wrapper, as opposed to above it like a normal Drupal theme. Why do this you ask? Well, to cut a very long story short it comes down to structure. If we allow the page title to appear outside the node wrapper (which uses the HTML5 article element) we will have an untitled section - indeed, arguably the most important section on the page will not be properly sectioned because it will have no heading element. The page will get the heading element and this really changes the entire structure of the document - for better or worse I don't really know right now.

In HTML5 we have this thing called the "outline" - which shows the structure of the page quite clearly. In the demo site linked to above the page structure for a node looks like this - http://bit.ly/drOqqZ (uses an outlining tool to display the page outline). There's a couple of things we need to look at here - first there are two main trees - one for the page and another one for the node (comments are children of the node in this outline). This differs tremendously from a normal Drupal site where the H1 would be in the "page" for full node view and actual node section would have no title, you would have to guess that the page title somehow related to the untitled section "somewhere" down the DOM.

I suspect that what I am really asking here is - so what. So what if the DOM is not entirely correct in a traditional Drupal theme, does it really make a difference to the accessibility of the site? That is my big question - and its a big question because, if assistive technologies start leveraging the DOM structure for building "section level" outlines for navigation then there could be some issue there, but I am not sure. This is entirely plausible because in HTML5 you can't really rely on the heading levels anymore for structure, its about the sectioning elements.

I really open to all comers on this, its something I have been playing around with and probably getting overly obsessive about, however it would be very interesting if the results from testers dramatically preferred one or the other.

Interesting...

mgifford's picture

I can't get too passionate about the heading issue. Generally I figure the page is more important than the site, so would like the title wrapped in the H1 rather than the Sitename/mission.

Anyways, I got a 404 on the link to your test site. I was looking at taking a peak & trying to stir up some feedback on Twitter.

Heading tags don't provide

Jeff Burnz's picture

Heading tags don't provide the structure in an HTML5 document the same way as HTML4. In HTML5 the sectioning elements provide the macro structures of the DOM, the heading tags nest inside those sectioning elements to provide sub branches - but you don't even need them, its totally legit to not use any and provide all structure with no headings, eg you can quite legitimately use something like this:

<article>
<header>my header</header>
<footer>by me, today</footer>
<section>one</section>
<section>two</section>
<nav>some links</nav>
</article>

Thats not exactly good markup in HTML5 because each section should "ideally" have a heading, and look more like this (this is totally legit and valid HTML5) - in fact this is pretty much what nodes and comments are going to look like in Adaptivetheme 7.

<article>
<header><h1>my header</h1></header>
<footer><h3>by me, today</h3></footer>
<section>
  <h2>one</h2>
  <div> something about one</div>
  </section>
<section>
  <h2>two</h2>
  <div> something about two</div>
</section>
<nav>some links</nav>
</article>

Now, when I say "ideally", what I really mean is that "it most certainly should if not must have a heading", otherwise the section is untitled. Think of a machine reading the page and finding an article with no title, but somehow its supposed to know the title ABOVE it and NOT IN its section somehow has meaning to it - that is the precise issue I am point out here.

Let me show you:

This is how we used to do it in HTML4 / XHTML1.1

<h2>node title</h2>
<div class="node">
  some content
</div>

but in html5 its should ideally be like this:

<article>
  <h2>node title</h2>
  <div class="style-hook">some content</div>
</article>

AHA, now we have a proper section with a header, this means something now and builds a nice branch in the DOM. Like I mentioned earlier regarding assistive technologies - they won't be able to rely as heavily on headings in HTML5 because we can dance footloose with them, instead they're going to be looking at sections and section headers, and of course ARIA roles (of course Adaptivetheme 7 makes heavy use of ARIA roles).

I keep saying stuff like "ideally" because HTML5 is very liberal. However, I'm being very anal about this because I want to push the outer limits of Drupals templating system to generate well structured content (all the time, not just some of the time, but 80% of the time, if possible...)

I found a blog post which features this and is actually scarily like Adaptivetheme 7: http://edward.oconnor.cx/2009/09/using-the-html5-sectioning-elements , except I don't use ASIDE element for sidebars. I've used it for a "mini sidebar", where you might use it like a pullout.

...

Jeff Burnz's picture

I'd just add that if you're onto it in D7 you'll quickly realize the node structure/markup example follows D7's fields capability and indeed makes heavy use of field level templates...

<article> <- a node

<section> <- a field, but wait, could also be a block!

Adaptivetheme 7 has context aware templates so it knows if the block or field has a "title" (a label in fields), so it knows if they should be sections or plain jane div's.

Just saying like :) (jeepers sorry for all the edits peeps, my fingers are not talking strait today...)

I dislike the H3 heading for

smk-ka's picture

I dislike the H3 heading for the post author/"submitted by" line, it looks semantically wrong to me. You probably added it since...

in HTML5 ... each section should "ideally" have a heading

However, the HTML5 spec clearly says:

The footer element is not sectioning content; it doesn't introduce a new section.

Additionally, they're nowhere using a heading element inside footer in their examples (except I overlooked one), probably because it's simply no sectioning element.

-Stefan

Initially I was rather

Jeff Burnz's picture

Initially I was rather confused regarding the footer element and sectioning, thanks for pointing that out. I agree absolutely the h3 can be toast and is not needed.

Great 2 know

alexrayu's picture

Great to know that it will be there for D7 and ready for html 5!

...

Jeff Burnz's picture

Looks like I can't edit my posts here - had to nuke the other site, something was majorly not right in that version of Drupal7, heres the working one:

http://sitespring.eu/at7-dom_test/node

user/pass demo/demo

Quick Review Via WebAim's WAVE

mgifford's picture

Thanks for this Jeff. I did a very quick review using http://wave.webaim.org/toolbar

Mostly it was great. Ran into one problem here:
http://sitespring.eu/at7-dom_test/search/node/

In the advanced search "Only of the type(s)" is listed as a label. It should be a label, but should be associated with the list of checkboxes. This is possibly a D8 issue http://drupal.org/node/504962

Though I do think it could be over-ridden by a theme. Haven't checked mind you.

Good point Mike, the problem

Jeff Burnz's picture

Good point Mike, the problem with Advanced search is that each criterion group is code in a DIV, whereas it should probably be a fieldset with a legend, but theres no theme function for these, however we could use a form_alter to wrap those div's in a fieldset with legend, not a bad idea.

It will be good to have examples out there

mgifford's picture

I'm certainly interested in finding more best practices out there. Finding ways to add in stuff we couldn't get into D7 like this issue with the fieldsets.

Anyways, hopefully we can find some way to pull this together. I do also wonder what things we should be over-writing in the theme and what stuff should ultimately be taken care of by http://drupal.org/project/accessible

The Accessible Helper Module could well be to D7 what i18n is to D6 (and frankly to D7). A module to enhance what was done in core. Also a space to experiment & learn more about issues before they go into core.

Anyways, don't want to have both a module & a theme overwriting the same core D7 function.

I have implemented the

Jeff Burnz's picture

I have implemented the hook_form_alter to modify the advanced search form to place each sub-grouping into fieldsets with legends.

http://sitespring.eu/at7-dom_test/search/node/

Love to hear from unsighted users if this is big improvement.

This can be done in the module or the theme - be aware that the theme will always get last crack at form alters, so my themes implementation will trounce the modules (as it is here, we're overriding node modules own form alter). Ideally this could be done in core (much better if it was).

I really wanted to do this form alter anyway because core is taking so dam long to fix the issue with the submit button being lighter in weight than the local language fields, which I fixed in my form alter also.

Edit: theres something not right with the form array, see how the fieldset legends have down arrows, they acting as though they're collapsible but they're not, its set to FALSE, I have look at this more closely.

Looks like I have solved the

Jeff Burnz's picture

Looks like I have solved the structural issues by simply making the #main-content wrapper context aware - i.e. if the page has a title make the wrapper a section element, if the page does not have a title make it a div. This is exactly how the field and block templates work in this theme also. This generates the correct structural outline for the front page, nodes, and node listings (no title, title, title) which should cover the vast majority of pages a Drupal site generates.

That leaves a couple of issues I need help with reviewing - the theme settings forms and the advanced search form.

Reviews

drupal a11y's picture

I´ll try to check it out next week with my current d7-setup.

Idea for New Theme

JamesBLK's picture

Hi,

I think it's a great milestone you are going to start, first of all just create a theme for a sample page and share with others, then we can figure out the improvements, editing sections as well as errors.

Theme development

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: