headings and use in navigation
Bit of background info:
Currently working on getting a University web template AA compliant (Typical page using template)
we're using a table based layout at the moment (which i've reduced down and will release soon)
Now we've come across an issue which revolves around using headings for the main navigation (on the left) I originally marked up section link headings as headings but they are not in the correct order
- H1 is the main content of the page, h3 for 'navigation link headings' and the site name is a h2
(obviously doesn't comply correctly to the headings checkpoint spec)
Options
I put several options to Nomensa last week
1. Keeping heading element order as it is - this fails the automated checkers (but not real users it seems)
2. changing them to a list or paragraph - they felt this would also fail the same checkpoint as these elements should convey the page structure (they are headings after all)
3. changing the source order - This is not really viable at the moment
They said it was better to keep the left navigation as headings (until we can move to a css layout) as this conveyed document structure and it was better to put something in our accessibility statement that says we use headings to denote document structure but not in the correct order (al la single 'A' compliant and working towards AA)
Now I've had an interesting (and quite heated debate) with someone who is desperately seeking the AA compliance within the organisation and wants this navigation hierarchy changing.
Their argument is that they shouldn't be marked up by headings as they are not related to the page content (h1). We should mark them up as a list (which in his mind would achieve AA compliance - at least with an automated check!)
So what is the correct use of headings? W3C use headings in the same way.
This person's argument is all Headings should be related to the main page content and not for navigation elements.
My argument that all the content is meaningful and headings should be used to denote the outline of the 'whole' document
So does changing the navigation it to a list mean AA? (as i convert the headings to a structured list with a correct hierarchy )
I Say we're losing an extra level of navigation for non sighted users if it was turned into a list
I'd be interested to know someone else's take on this as it is causing a lot of heated debate (and hassle)
(the debate also came up about source order - should navigation be at the bottom in many CSS based sites.. but that's another story)[/b]
Share: 
My personal preference would be to have the main page heading as h1, and have an <h2>Site Navigation</h2> or whatever wording you want to use (hidden to visual users) to signal the start of the naviation. (Without such a heading, there's not really anything to tell no-visual users that a navigation structure is about to start.) It's then logical to use h3's to mark up what could well be argued are 'headings' within the navigation.
Having this "navigation" h2 before the main h1 is something of a clue that the h2 isn't quite subordinate to the main h1 and the rest of the page content. But at the same time, it isn't a top level heading, so doesn't get marked up as an h1. Not sure exactly how this impacts on accessibility, but it seems to me like the logical thing to do.
I dislike using h2 for the site name, since you can't really argue that it's a second level heading for any content.
(BTW: Visually your logo / site name doesn't really stand out very well on that page. Could you get hide the "Bristol UWE" plain text and use the resulting space to enlarge the logo image?)
Share:
The important thing is that headings are for the document structure, not content. You are right to insist on that. This means header, navigation, content, secondary content, footer, site features, utility links and everything else should be split into logical sections by use of headings.
As you also rightly point out, things don't need to be theoretically perfect for users to have a great experience using the site.
There was a Heading positions and title topic last month where people discussed best use of these elements. I illustrated heading trees as sections or by importance, which might help the stakeholders visualise the alternatives.
There isn't a One True Heading Tree To Rule Them All. The important thing is providing enoughof them to navigate the page and being consistant across the website.
(EDIT) Using list markup for your lists would be required for AA conformance. I think this has a more marked effect when navigating pages than whether you use <h3> instead of <h2>, especially in screen readers with a dedicated list reading mode.
Share:
Chaos > My understanding is that <h1> should be used for the main topic of the page - this is also unique to everypage (hence not putting the headings in order)
Cerbera - thanks for the input - Do you know if there is anything in the w3c that states this? I notice that the WAI help page states
| Quote: |
| The WAI site is designed for navigation using headings. Most pages include:
* Site Navigation (heading level 2) * [page title] (heading level 1) * Page Contents (heading level 2) - on pages with several sections * Sidebar (heading level 2) - for photos, icon descriptions, and other related information * [various] (heading level 2) - subheadings within the main content of the page * Document Information (heading level 2) - contact links and other footer informationUWE Most assistive technologies and some browsers facilitatenavigation by headings. |
I also read the chapter in the new web accessibility book by Jim thather that talks about navigation headings - but this person is still not convinced.
The current (main) navigation is marked up as a list already, do you think changing it to this kind of thing
| Code: |
|
<ul> <li>bristol UWE <ul> <li><a href="www.uwe.ac.uk">UWE Home</a></li> </ul> <li>Study at UWE <ul><li><a href="blah">Find a course</a></li></ul> </li></li> </ul> |
which would produce
| Code: |
|
* bristol UWE * UWE Home (link) * Study at UWE * Find a course (link) |
i.e changing the headings levels to structured (sub) <li> items
Does this not lose the structure of the document (particularly when this navigation on tis page has 3 separate sections (headings)
is this what you mean?
Share:
Also found some interesting research on this subject
http://www.usability.com.au/resources/ozewai2005/
| Quote: |
|
What are structural labels and do they help? All participants said these were very useful Did you find the headings identifying the different levels of navigation useful? * Yes: 8 * No: 0 Participant comments: * "Yes, headings are always useful" * "Yes, extremely!" * "Yes. I found these very useful" |
IN this context (i think) they mean heading navigation
EDIT: Structural Labels
Share:
Re-reading my post, I'm not sure it was all that clear... 
| Quote: |
| Chaos > My understanding is that <h1> should be used for the main topic of the page |
I agree -- and I wasn't suggesting you should change your existing use of h1 at all.
What I was suggesting is that that you add an additional h2 heading to cover the whole of the navigation, and then hide is from visual users (since it's easy for them to see that it's the navigation).
(As a separate issue, I was also suggesting that you might not want to mark up the "Bristol UWE" site title as an h2.)
I don't think it matters too much whether the navigation is one multilevel list, or some sub-headings each with their own single-level list below. Since the headings aren't links themselves (and so are different from the other meun items below them), I think I'd lean towards the sub-headings appraoch that you currently have.
Share:
Quite interesting response from a blind screen reader user -JAWS (from usability exchange)
| Quote: |
|
Personally I like the headings. I think that any means to jump to different parts of a webpage is useful and speeds up the process of finding what you want. On a page like this it's not easy to tell which heading what you're looking for will come under, so on your first visit to the site you might well end up looking through all the links. However, on subsequent visits to the site you might remember that the links you're interested in all come under the "Study at UWE" link and so will be able to find them faster. The heading levels are perhaps not so important on a page like this - they come into their own in structured documents such as manuals where you can jump from one section to another, or one sub-section to another within a section. I think the only thing I would expect on a page like this is that the main content of the page starts with a h1, which it does. The fact that h1's come after h2's doesn't bother me, although I suspect it might be bothering an automatic checker, which might be what prompted your question? |
Share:
| Quote: |
| I think the only thing I would expect on a page like this is that the main content of the page starts with a h1, which it does. The fact that h1's come after h2's doesn't bother me. |
I think we should not have headings for site navigation and save it for content only. Navigation and "site search" are usually found at the top of the page if not then with jump links so usability will not be an issue. This makes sense to me and so would Search Engines benefit this way otherwise Google often sees them as similar pages when the content is relegated to a low h number... like it does for one of my new sites (see: "in order to show you the most relevant results, we have omitted some entries very similar to the 5 already displayed".
Johan De Silva / Portfolio
Share:
Someone tell me why the W3C Web accessibility Initiative site has incorrect heading order?
http://www.w3.org/WAI/sitehelp.html
| Quote: |
|
"needs checking Headers (h1-h6): Headers' priority order is wrong." |
It fails Checkpoint 3.5
That says it all to me!
Share: