E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Joseph Sherman
Date: Thu, Jan 28 2016 10:15AM
Subject: H1 before or after left nav menu?
No previous message | Next message →

On a web page does it matter if the h1 tag is before or after a left nav menu?

Page is structured as follows:


1) Top level navigation and search

2) Breadcrumbs

3) H1 tag = page title

4) Left navigation menu

5) Page text and content

On one hand, it seems a little annoying that after going to H1 a user would have to go through a left navigation on each page. On the other hand, skipping left navigation means they miss all those choices. Regardless of where H1 goes, 'skip to content' link should go directly to Page Text and Content, correct?


Joseph

From: Moore,Michael (Accessibility) (HHSC)
Date: Thu, Jan 28 2016 10:19AM
Subject: Re: H1 before or after left nav menu?
← Previous message | Next message →

The H1 should be at the start of the content rather than the start of the side navigation. You can use html 5 section markup and/or aria landmarks to provide rapid navigation between major sections of the page for screen reader users and maybe someday for keyboard users too.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

From: Chaals McCathie Nevile
Date: Thu, Jan 28 2016 10:43AM
Subject: Re: H1 before or after left nav menu?
← Previous message | Next message →

On Thu, 28 Jan 2016 18:15:09 +0100, Joseph Sherman
< = EMAIL ADDRESS REMOVED = > wrote:

> On a web page does it matter if the h1 tag is before or after a left nav
> menu?
>
> Page is structured as follows:
>
>
> 1) Top level navigation and search
> 2) Breadcrumbs
> 3) H1 tag = page title
> 4) Left navigation menu
>
> 5) Page text and content
>
> On one hand, it seems a little annoying that after going to H1 a user
> would have to go through a left navigation on each page. On the other
> hand, skipping left navigation means they miss all those choices.

If you can get directly to the main content, and the page heading is the
same as the title, then I *suspect* it doesn't matter much which order you
go in. Unless you *want* to get to the navigation it doesn't arise.

Out of curiosity, what is in the left navigation block? Links around the
page itself? or more navigation around the site?

> 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.

cheers

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Jared Smith
Date: Thu, Jan 28 2016 11:04AM
Subject: Re: H1 before or after left nav menu?
← Previous message | Next message →

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

From: Jonathan Cohn
Date: Thu, Jan 28 2016 11:20AM
Subject: Re: H1 before or after left nav menu?
← Previous message | Next message →

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 ADDRESS 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
> > > >

From: Sailesh Panchang
Date: Thu, Jan 28 2016 1:39PM
Subject: Re: H1 before or after left nav menu?
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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
>> >> >> >> >
> > > > >

From: Birkir R. Gunnarsson
Date: Sun, Jan 31 2016 2:41AM
Subject: Re: H1 before or after left nav menu?
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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.