Hi,

I find the Framework theme easy to work with - Andre, thanks for the great work!

Following a recent Standards.next event in London I wanted to experiment with HTML 5 in Drupal, so I chose Framework as the basis. The resulting theme is in use on my blog, and I'm writing a post about it - HTML 5 and WAI-ARIA for Drupal.

  1. The attached patch uses the new elements, <header>, footer, article, aside, nav, section and time. Article is used for nodes, and is nested for comments; <header> and footer are used for the page and for nodes; aside is used for blocks, except where they appear in the header or footer.
  2. Some Javascript goodness (embedded in page.tpl.php) documented by WHATWG and Remy Sharp helps Internet Explorer to recognise the new elements. As a bonus <abbr> now works in IE.
  3. Adding the CSS display: block for the new block elements means that they can be styled.
  4. Finally WAI-ARIA landmark roles are added to aid accessibility, and the experimental HTML 5 validators play well!
  5. Tested in Firefox 3.5, IE7 and Safari 4 - more testing to follow.

I hope this shows what is possible now with HTML5. And I'm keen to hear feedback.

Andre, I was interested in your suggestion today to use the HTML 5 Doctype - #540472: xhtml validation error.

Yours, Nick

CommentFileSizeAuthor
drupal_framework_html5aria_5aug2009.patch13.79 KBnfreear

Comments

andregriffin’s picture

andregriffin commented

Hello Nick. I have also done much of the same work recently with HTML5 and Framework. I intend in restructuring the next version to use the HTML5 DOCTYPE and possibly using the new tags as well. I will be interested to see how you have implemented the new elements. Thanks for your work and I'll get back to you soon on what progress I am making with the next version of Framework with HTML5.

andregriffin’s picture

andregriffin commented

In my research of AIRA, would you say that this is something that all users of Framework would benefit from? It seems using roles could easily replace most of the ids and classes required to style elements, however I'm not sure if that's really appropriate for standard websites and most developers. Also, the Drupal core injects so many classes and ids everywhere, it seems it would just be conflicting markup methods.

As for the html5.js, I'm not sure whether to link directly to the googlecode repository, include the file in the Framework release, or embed the script directly in the tpl, dirtying the markup a bit. The script i'm using is slightly lengthier than the one included in your patch. http://html5shiv.googlecode.com/svn/trunk/html5.js

As far as implementation of the new tags goes, I've been following the patch you provided as well as:
http://orderedlist.com/articles/structural-tags-in-html5
http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-fro...
http://html5doctor.com/html-5-reset-stylesheet/

Hopefully I'll reach a consensus and retain clarity of the markup. Please let me know your thoughts.

Thanks again.

nfreear’s picture

nfreear commented

Hi Andre,
Thanks for the positive comments.

Regarding roles, there primary purpose is to improve accessibility - see mgifford's comment/ patches. So I'm in favour of adding roles (themes are one of the appropriate places for landmark roles) - a benefit of HTML 5 over HTML 4/XHTML 1/1.1 is that the validators accept the "role" attribute in HTML 5 (and properties, eg. "aria-labelledby" which is in the patch - check!)

As an added benefit, roles can clean up styling, and I don't see it as a problem that core Drupal/3rd party modules still use classes/ids. Themes like Framework won't be able to/probably shouldn't remove all classes/ids.

I agree that embedding the html5.js shiv (or part, my approach) does muddy the code. I did it to save on downloads - possibly a mistake. I think linking to Googlecode may be appropriate (Remy suggests hotlinking) - if other sites do likewise the browser will have a copy cached already.

More soon. Would you like to collaborate more closely?

Best wishes, Nick.

andregriffin’s picture

andregriffin commented

Hey Nick,

I am nearing completion of Framework 3, built on HTML 5. Many changes are going into this release, and many additions and changes have been made to both the Framework 2 as well as the patch you provided. The development progress can be seen at d6.andregriffin.com.

I have, for now, decided not to integrate roles. Perhaps after I get the basic markup finalized, we can work on a patch.

I'm getting together a rough changelog which i'll post here just before I make the release.

Thanks again.

yannickoo’s picture

yannickoo
Location Berlin
commented
Status: Active » Needs work

Hey man,

what's up? Your site is offline and there isn't the third version of framework.

I'm very exited about Framework 3.0

yannick :)

yannickoo’s picture

yannickoo
Location Berlin
commented

Any news here?

andregriffin’s picture

andregriffin commented

I have made some strides in the past week to try and get this done by D7 release, and it still might be possible, but I'm not finding a lot of free developing time right now. I should have a better idea of what I want to include in the first release and how much is left to be done sometime next week, and it should be doable either by the D7 launch or shortly after. But yeah, gotta pay the bills, so that work comes first :)

Thanks for checking up!

andregriffin’s picture

andregriffin commented
Status: Needs work » Fixed

Framework 3 released. Test it out!

Everett Zufelt’s picture

Everett Zufelt commented

Is there a demo site where I can test it out? Curious if you wre able to get WAI-ARIA landmark roles into this release?

Status: Fixed » Closed (fixed)
Issue tags: -role, -Accessibility, -html5, -wai-aria, -landmark

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue tags: +role, +Accessibility, +html5, +wai-aria, +landmark

Restoring issue tags, see #2125755: System messages removed all issue tags during D7 upgrade.