WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: H1 before or after left nav menu?

for

From: Birkir R. Gunnarsson
Date: Jan 31, 2016 2:41AM

It depends on the page, and is not all important, as long as it is
consistent across the website.
Using landmarks I would recommend:
roleºnner:
1) Top level navigation and search
end banner

role=navigation aria-label="you are here"
2) Breadcrumbs
end navigation role
role=main:
role="navigation" descriptive aria-label
4) Left navigation menu
end left navigation

3) H1 tag = page title

5) Page text and content
end main
... well, actually assuming part of thecontent is footer, put it
outside main into role contentinfo
For screen reader users it is very convenient, they can use landmarks
to move directly to the left navigation menu, or h1 to move directly
to the main heading at the start of the content.

The setup you suggest is fine, nothing wrong with it. But it proves
the usefulness of the "n" key (moves virtual focus to next block of
text that is not a link or a button), it has been my most useful
screen reader keyboard shortcut for almost 10 years.


On 1/28/16, Sailesh Panchang < <EMAIL REMOVED> > wrote:
> It depends on the UI design and content author. If they identify the
> main content as the region that includes the left nav, the h1 may be
> at the start of the left nav.
> I have seen pages with the h1 after the left nav but the main landmark
> is the region that holds the left nav (identified as a nav landmark)
> as well.
> Then there are pages with a heading for the left nav too.
> There is no requirement for the page title and h1 text to be identical.
> Lastly, even with the above design some sites are designed in a
> manner that the left nav visually appears to be before the main
> content text etc. but the tab order goes through the links in the main
> content and then to the left nav links. Of course it can go through
> the left nav links and then to the links within main content.
> What is critical is consistency: consistency in identifying headings
> at start of main content with the same h<n> tag and consistency in
> navigation order.
> Without consistency a user will not be able to reliably use a
> technique to navigate around the pages within a website.
> Thanks,
> Sailesh Panchang
> On 1/28/16, Jonathan Cohn < <EMAIL REMOVED> > wrote:
>> As a full time Screen Reader user, I agree with Jared, but if the H1
>> header
>> is physically above both the Left Navigation area and the article,
>> wouldn't
>> putting the H1 after the Left Navigation mean that the order displayed as
>> top down no longer matches the order in the DOM?
>>
>>
>>> On Jan 28, 2016, at 13:04, Jared Smith < <EMAIL REMOVED> > wrote:
>>>
>>> Chaals McCathie Nevile wrote:
>>>
>>>>> Regardless of where H1 goes, 'skip to content' link should go directly
>>>>> to
>>>>> Page Text and Content, correct?
>>>>
>>>> Correct. Which should also be wrapped in a main element, for people with
>>>> useful modern software.
>>>
>>> Though it would be odd to have either a <main> element or the main
>>> content of the page not begin with the <h1>.
>>>
>>> If the sidebar is directly content-related (such as a table of
>>> contents for the content), then it might make sense after the <h1>.
>>> But generally I think this type of thing is more usable either before
>>> the <h1> or (probably optimally) after the content, perhaps in an
>>> <aside> element with a descriptive heading. If your structure has the
>>> sidebar after the <h1>, but the <h1> does not describe or is not
>>> applicable to the sidebar (e.g., it is site navigation), then this
>>> would not be appropriate.
>>>
>>> Jared
>>> >>> >>> >>> >>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.