WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Navigation lists and headers - best practise?

for

From: Jon Gunderson
Date: Aug 25, 2006 9:10AM

These are the header rules we are using with the Functional Accessibility Evaluator[1]:

Section Headings
Rule 1: Header elements should preceed lists that are primarily links (Navigation bars)

Rule 2: Each page should have a unique h1 element and header elements that follow it should be properly nested.

Rule 3: The percentage of text content contained in header elements (h1..h6) should range between approximately 3 and 9.

Rule 4: H1 content should be a subset of the TITLE element content

Rule 5: There should be no more than 2 H1 on a web resource

I would be interested in comments on these rules.

Jon

[1] Functional Web Accessibility Evaluator
http://fae.cita.uiuc.edu


---- Original message ----
>Date: Fri, 25 Aug 2006 09:29:50 -0500
>From: "Moore, Michael" < <EMAIL REMOVED> >
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>
>Just thought that I would throw my two cents worth into the discussion.
>
>My experience with screen readers is that headings are extremely useful
>when navigating a page using screen readers. Much more so than "skip"
>links.
>
>Thus a heading used to navigation can be very useful. I can move from
>content to navigation sections quickly or the reverse through the
>headings list or by using the "h" key in JAWS.
>
>I went to a panel discussion at SXSW this past spring where Eric Myer
>discussed a strategy that he has used for setting headings:
> <h1> is the most important thing on the page.
> <h2> etc. set up relative levels of importance for the subject
>matter on the page.
>He also said that many folks would label him a heretic to web standards,
>I am paraphrasing of course. And sitting in the audience, my gut
>reaction was "No! this totally violates heading structure."
>
>Having had a few months to mull it over though it makes sense. If I
>Identify my navigation sections through lower level headings, and have
>my main topic for the page headed with an <h1> I can create a very
>structurally useful page for everyone.
>
>Consider the following page structure.
>
>Top area: includes a branding logo, skiplink, style switcher, search
>form, main navigation, and some nice decorative graphics. The main
>navigation is prefaced with an <h2> and contained within a list. The
><h2> may be a graphic and may not be obvious to someone using a
>graphical browser without a screen reader.
>
>Left side: section navigation contained within a list and prefaced with
>an <h2>
>
>Right side: Main content, Primary article leads with an <h1> and is the
>destination for the skip link. The content is organized with a properly
>nested heading structure.
><h1>Topic<h1>
> <h2>subTopic 1<h2>
> <h2>subTopic 2<h2>
> <h3>sub-subTopic</h3>...
>
>Now if I view this page with a graphical browser I understand the
>organization visually, assuming that I have styled things well.
>
>If I explore the page with JAWS (the screen reader used by my agency), I
>can quickly get to the content using the skip link, a couple of taps on
>the "h" key or a single tap on the "1" key. I can move to the
>navigation menus with either the "h" key, the headings list, the "2"
>key, using the links list, or even by bringing up a list of lists. These
>options all improve usability of the site with the reader.
>
>If this site is visited by a bot, it can be effectively, and accurately
>indexed.
>
>So, in all I think that the use of headings can greatly improve the
>usability of sites with screen readers and browsers that support heading
>navigation. Strict adherence to heading nesting is far less important
>than logical and consistent use of headings based upon the "importance"
>of the section within a page.
>
>So call me a heretic, I will be in good company.
>
>Mike
>
>
>-----Original Message-----
>From: <EMAIL REMOVED>
>[mailto: <EMAIL REMOVED> ] On Behalf Of Philip Kiff
>Sent: Friday, August 25, 2006 12:01 AM
>To: WebAIM Discussion List
>Subject: RE: [WebAIM] Navigation lists and headers - best practise?
>
>ph O'Connor wrote:
>> Philip Kiff wrote:
>>> I think it can be handy for some users if navigation menu lists are
>>> preceded by headings, and I have begun to think that adding them is a
>
>>> generally good idea, but I don't think it makes sense in all
>>> circumstances. And it certainly would not make sense to specify h2
>>> as the particular heading level to use.
>>
>> Phil,
>>
>> I concur that it is useful "for some users" to precede navigation menu
>
>> lists with headings, but am not sure why H2 would not be used and
>> moreover feel that it is useful for all users. Is there research or
>> are there WCAG 1.0 guidelines against this practice?
>
>I am not aware of any specific research into this. I mention one
>contentious guideline interpretation below. But just to be clear, I do
>think that this use of headings can be useful, and I think that using h2
>may be the best choice on many sites, and generally I think this
>practice supports and complements WCAG 1.0 and other web accessibility
>guidelines for the reasons suggested by Jon.
>
>My comments were not meant to suggest that one should not use h2 heading
>elements. All I'm trying to get at is that I am not sure that naming h2
>as the specific level to use is something that one should view as a
>generally accepted "best practice".
>
>>From my unscientific observations, I would say that the use of a
>>heading to
>mark up "off-left" text to introduce an unordered list used as a
>navigation menu is something that many accessible designers may be
>inclined towards and some are putting into practice, but it does not yet
>have the status of a widely accepted "best practice". Maybe my
>observations are wrong on this latter point, though this seems to be
>where I am tending myself. But assuming one accepts the idea of using
>headings in this way, my question is whether one should specify using h2
>level heading elements or if it might not be better just to leave it at
>a recommendation to use "an appropriate"
>heading element.
>
>I think one will find that there are legitimate, and possibly
>irreconcilable, differences of opinion about the correct use of heading
>elements generally. For instance, some people advocate the use of just
>a single h1 heading element on each page, while others see that as a
>waste of a heading level, especially when creating large documents which
>actually make use of all 6 heading levels on some pages. Some people
>suggest that the h1 should more or less duplicate the information in the
>title element from the html head section. Others suggest that the h1
>element should mark up the top banner of each page, thereby ensuring
>that the site/brand identity is part of every page structure: the h2
>would then be used as the first page-specific content heading, and if
>you follow the previous method, then the h2 might therefore contain more
>or less a duplicate of the title element from the html head section. I
>personally haven't yet seen a convincing argument that one or the other
>of these positions is clearly better (more accessible, more usable, more
>standards-compliant) than the other. If that's the case, then it is
>difficult to say that h2 should always be the heading used since on two
>almost identical pages the relative level of h1 and h2 elements may be
>interchanged.
>
>Also, according to the WCAG 1.0, you are not supposed to skip headings:
>"Since some users skim through a document by navigating its headings, it
>is important to use them appropriately to convey document structure.
>Users should order heading elements properly. For example, in HTML, H2
>elements should follow H1 elements, H3 elements should follow H2
>elements, etc.
>Content developers should not "skip" levels (e.g., H1 directly to H3).
>Do not use headings to create font effects; use style sheets to change
>font styles for example."
>(HTML Techniques, 1.2.1 Section headings,
><http://www.w3.org/TR/WCAG10-HTML-TECHS/#document-headers>;)
>
>This will not affect all sites, but you can see that in a case where the
>navigation menu appears before anything else on the page, then it will
>be technically incorrect to apply an h2 heading level to it, since an h2
>should only appear _after_ an h1 has already appeared. Now there are
>differences of opinion I think about whether or not this is actually an
>accessibility issue, despite what it states in the WCAG Guidelines. And
>I am not clear on whether this would actually present any real
>accessibility issue for anyone.
>But it would still make more sense to me in such cases to use an h1
>there.
>And once you've done that, then you could use another h1 for your page
>title. Your h1 headings would then act as a link to your navigation
>menu and your main contents. This seems defensible to me as a method of
>coding.
>
>> but am not sure why H2 would not be used and moreover feel that it is
>> useful for all users.
>
>I think again it depends on the design and coding of the site. For
>instance, on a site where the nav menu is the first thing that appears
>on a page (before a logo, before a title, before anything), then I don't
>really see these inserted headings (h2 or h1 or whatever) as
>particularly useful for any user. The navigation menu is the first
>thing that any browser is going to get (visual or aural). If the user
>wants to go to the navigation menu, they will not enter into a headings
>reading mode, they will just start to read again at the top of the page
>or jump to the top of the page. The addition of a heading in such a
>case is just slowing down a screen reader's access to your menu since
>they have to listen to the heading before they get to listen to your
>menu. I can even imagine a case where a user wants to jump to the page
>content by using some kind of heading reading mode, and that user would
>have to repeatedly listen to the menu heading when what they really
>wanted was to use the headings specifically to skip the navigation menu.
>That's not saying that the content becomes inaccessible, but in terms of
>a streamlined interface (i.e. best practices in terms of "usability"), I
>can imagine particular cases where using the h2 in this way is not
>useful for all users, and hence why I'm not sure about identifying it as
>a "best practice".
>
>Phil.
>
>
> Address list
>messages to <EMAIL REMOVED>
>
>
>


Jon Gunderson, Ph.D.
Director of IT Accessibility Services
Campus Information Technologies and Educational Services (CITES)
and
Coordinator of Assistive Communication and Information Technology
Disability Resources and Education Services (DRES)

Voice: (217) 244-5870
Fax: (217) 333-0248
Cell: (217) 714-6313

E-mail: <EMAIL REMOVED>

WWW: http://cita.rehab.uiuc.edu/
WWW: https://netfiles.uiuc.edu/jongund/www/