A note for those at my HTML5 talk at #awdg today. I realized after I turning Skype off that I neglected to mention something important. Remember our discussion of ARIA roles? Perhaps some of you were thinking, “I don’t really care about accessibility—so what?”. Well, there’s another reason to use them. It has to do with styling the overall header and footer of the page.
As I mentioned, HTML5 gives us a new ability to section content—allowing us to create a self-contained outline for different portions of our document’s content. This means that within a single document, we can easily have multiple headers and footers as well as H1, H2, etc. In order to style the content of the document’s main header and footer in a different way, we’ll need some sort of hook.
Clearly we could give our main header a class or ID. But why not use some accessible, semantic richness? Something that actually means something. If you use ARIA roles, your main header will look like this:
<header role=”banner”>
Using an attribute selector allows you to target that specific selector as well as the headings within. So in the example site I showed you, I used these selectors:
[role=”banner”] {
/* styles for the main document header go here */
}
[role=”banner”] h1 {
/* styles for the main document header’s H1 element go here */
}
[role=”banner”] h2 {
/* styles for the main document header’s H2 go here */
}
Do Attribute Selectors work everywhere?
Attribute selectors are supported in all browsers including Internet Explorer 7 & 8, but alas, Internet Explorer 6 is incapable without a crutch. If you still need to support that geriatric browser fully, you can use Dean Edwards ie7.js script. Dean’s script fixes many HTML/CSS problems with IE6 making it behave more like a standards-compliant browser. You could also use jQuery, like I showed with the sectioned navigation content, to target the first header and last footer on the page (if that’s semantically where your main header/footer are located). No matter what you do, remember to place the fix in an Internet Explorer Conditional Comment so that you don’t cause unneeded HTTP requests to be made by compliant browsers.
In this same way, I used the [role=”main”] to target the main section of the document (<section role=”main”>) as well as [role=”contentinfo”] to target my document’s footer (<footer role=”contentinfo”>). This is just another way to cut down on extraneous classes and IDs and increase the rich information in your document.
It was great to be with you guys today! I just realized this was an important bit I neglected to share. 
I’ll put the resource links I promised up shortly.
