E-mail List Archives

Search E-mail List Archives for

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

From: Catherine Roy
Date: Thu, May 16 2019 2:17PM
Subject: guidance on headings hierarchy
No previous message | Next message →

Hello all,

Looking for a little guidance on headings hierarchy. Unfortunately, I am
not at liberty to share the page that I'm going to describe.

I have a main content and a left column with some menu items.

For the main content, I have a heading that basically repeats the title
of the page. Followed by a few paragraphs of explanatory text for the
initiative in question. After which, a couple more headings to introduce
a dashboard and some project partners.

In the left column, I have two headings that introduce some links like a
menu. So, originally, this is the structure I had set up:

For the main content

The first heading is a H1 (title of the initiative), the second heading
is an H2 (Results to date for the dashboard) and the third heading is an
H2 (Our partners) as well.

So:

HA Initiative (H1)
Results to date (H2)
Our partners (H2)

In the left column, the two headings (Resources & Latest updates) that
introduce links are both H3.

So:

Resources (H3)
Latest updates (H3)

My problem is that the page originally had the logo in the left top
corner as an H1.

And from my understanding, although it's not compulsory, it's always
best to have just one H1 in the page.

What is best practice here? Personally I would prefer that the logo not
be a heading at all but simply an image with an alt text. But I know
that some people have no problem with having more than one H1 in the
same page.

How would you structure your hierarchy with this content?

Thanks,

Catherine

--
Catherine Roy
http://www.catherine-roy.net

From: Brandon Keith Biggs
Date: Thu, May 16 2019 2:27PM
Subject: Re: guidance on headings hierarchy
← Previous message | Next message →

Hello Catherine,
Logo should be a graphic with alt text at the top of the page, no heading.
Thanks,

Brandon Keith Biggs <http://brandonkeithbiggs.com/>;


On Thu, May 16, 2019 at 1:17 PM Catherine Roy < = EMAIL ADDRESS REMOVED = >
wrote:

> Hello all,
>
> Looking for a little guidance on headings hierarchy. Unfortunately, I am
> not at liberty to share the page that I'm going to describe.
>
> I have a main content and a left column with some menu items.
>
> For the main content, I have a heading that basically repeats the title
> of the page. Followed by a few paragraphs of explanatory text for the
> initiative in question. After which, a couple more headings to introduce
> a dashboard and some project partners.
>
> In the left column, I have two headings that introduce some links like a
> menu. So, originally, this is the structure I had set up:
>
> For the main content
>
> The first heading is a H1 (title of the initiative), the second heading
> is an H2 (Results to date for the dashboard) and the third heading is an
> H2 (Our partners) as well.
>
> So:
>
> HA Initiative (H1)
> Results to date (H2)
> Our partners (H2)
>
> In the left column, the two headings (Resources & Latest updates) that
> introduce links are both H3.
>
> So:
>
> Resources (H3)
> Latest updates (H3)
>
> My problem is that the page originally had the logo in the left top
> corner as an H1.
>
> And from my understanding, although it's not compulsory, it's always
> best to have just one H1 in the page.
>
> What is best practice here? Personally I would prefer that the logo not
> be a heading at all but simply an image with an alt text. But I know
> that some people have no problem with having more than one H1 in the
> same page.
>
> How would you structure your hierarchy with this content?
>
> Thanks,
>
> Catherine
>
> --
> Catherine Roy
> http://www.catherine-roy.net
>
> > > > >

From: Brian Lovely
Date: Thu, May 16 2019 2:30PM
Subject: Re: [External Sender] guidance on headings hierarchy
← Previous message | Next message →

I would want a single H1 element that described the purpose or primary
topic of the page. Assuming a site where every page has a logo in the
header, the problem with wrapping that logo in an H1 is that every page
would have the same purpose or primary topic. It's similar to having all
pages in a site with the same title.

On Thu, May 16, 2019 at 4:17 PM Catherine Roy < = EMAIL ADDRESS REMOVED = >
wrote:

> Hello all,
>
> Looking for a little guidance on headings hierarchy. Unfortunately, I am
> not at liberty to share the page that I'm going to describe.
>
> I have a main content and a left column with some menu items.
>
> For the main content, I have a heading that basically repeats the title
> of the page. Followed by a few paragraphs of explanatory text for the
> initiative in question. After which, a couple more headings to introduce
> a dashboard and some project partners.
>
> In the left column, I have two headings that introduce some links like a
> menu. So, originally, this is the structure I had set up:
>
> For the main content
>
> The first heading is a H1 (title of the initiative), the second heading
> is an H2 (Results to date for the dashboard) and the third heading is an
> H2 (Our partners) as well.
>
> So:
>
> HA Initiative (H1)
> Results to date (H2)
> Our partners (H2)
>
> In the left column, the two headings (Resources & Latest updates) that
> introduce links are both H3.
>
> So:
>
> Resources (H3)
> Latest updates (H3)
>
> My problem is that the page originally had the logo in the left top
> corner as an H1.
>
> And from my understanding, although it's not compulsory, it's always
> best to have just one H1 in the page.
>
> What is best practice here? Personally I would prefer that the logo not
> be a heading at all but simply an image with an alt text. But I know
> that some people have no problem with having more than one H1 in the
> same page.
>
> How would you structure your hierarchy with this content?
>
> Thanks,
>
> Catherine
>
> --
> Catherine Roy
>
> https://urldefense.proofpoint.com/v2/url?u=http-3A__www.catherine-2Droy.net&d=DwIGaQ&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=0TkX6P0kthoGb9RmpoDhI9BbKQRJMkp84qDzFag5wns&s=9iTQoyQ6cHWlHpCqE59sLX-bjmZfCQltspZd8dvR2TY&e>
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwIGaQ&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=0TkX6P0kthoGb9RmpoDhI9BbKQRJMkp84qDzFag5wns&s=8tx1mEQozW_XQ4Oyjpqn14YlqiKistVoXwxhNoh3YG8&e> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwIGaQ&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=MMimM36KI-FWX0bnlG1RIV6Bl3MtdwmuKJCwL2Q3WrQ&m=0TkX6P0kthoGb9RmpoDhI9BbKQRJMkp84qDzFag5wns&s=1REqyLALxqEHwfczAdfrq0R0FuUwBDYNOEMW75Z6_u8&e> >


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Amanda J. Rush
Date: Thu, May 16 2019 2:30PM
Subject: Re: guidance on headings hierarchy
← Previous message | Next message →

The only thing I would change is the heading containing the logo. I
would remove it, and have the image with the alt text. Alternatively,
you could use: <h1 logo; HA Initiative (H1)
Results to date (H2)


and then Resources (H3)
Latest updates (H3)


Amanda


On 5/16/2019 4:17 PM, Catherine Roy wrote:

> Hello all,
>
> Looking for a little guidance on headings hierarchy. Unfortunately, I
> am not at liberty to share the page that I'm going to describe.
>
> I have a main content and a left column with some menu items.
>
> For the main content, I have a heading that basically repeats the
> title of the page. Followed by a few paragraphs of explanatory text
> for the initiative in question. After which, a couple more headings to
> introduce a dashboard and some project partners.
>
> In the left column, I have two headings that introduce some links like
> a menu. So, originally, this is the structure I had set up:
>
> For the main content
>
> The first heading is a H1 (title of the initiative), the second
> heading is an H2 (Results to date for the dashboard) and the third
> heading is an H2 (Our partners) as well.
>
> So:
>
> HA Initiative (H1)
> Results to date (H2)
> Our partners (H2)
>
> In the left column, the two headings (Resources & Latest updates) that
> introduce links are both H3.
>
> So:
>
> Resources (H3)
> Latest updates (H3)
>
> My problem is that the page originally had the logo in the left top
> corner as an H1.
>
> And from my understanding, although it's not compulsory, it's always
> best to have just one H1 in the page.
>
> What is best practice here? Personally I would prefer that the logo
> not be a heading at all but simply an image with an alt text. But I
> know that some people have no problem with having more than one H1 in
> the same page.
>
> How would you structure your hierarchy with this content?
>
> Thanks,
>
> Catherine
>

From: Isabel Holdsworth
Date: Fri, May 17 2019 1:58AM
Subject: Re: guidance on headings hierarchy
← Previous message | Next message →

As others have said, you're right not to want the logo wrapped in a
heading. The heading structure for the rest of the page is fine.

On 16/05/2019, Amanda J. Rush < = EMAIL ADDRESS REMOVED = > wrote:
> The only thing I would change is the heading containing the logo. I
> would remove it, and have the image with the alt text. Alternatively,
> you could use: <h1 logo; HA Initiative (H1)
> Results to date (H2)
>
>
> and then Resources (H3)
> Latest updates (H3)
>
>
> Amanda
>
>
> On 5/16/2019 4:17 PM, Catherine Roy wrote:
>
>> Hello all,
>>
>> Looking for a little guidance on headings hierarchy. Unfortunately, I
>> am not at liberty to share the page that I'm going to describe.
>>
>> I have a main content and a left column with some menu items.
>>
>> For the main content, I have a heading that basically repeats the
>> title of the page. Followed by a few paragraphs of explanatory text
>> for the initiative in question. After which, a couple more headings to
>> introduce a dashboard and some project partners.
>>
>> In the left column, I have two headings that introduce some links like
>> a menu. So, originally, this is the structure I had set up:
>>
>> For the main content
>>
>> The first heading is a H1 (title of the initiative), the second
>> heading is an H2 (Results to date for the dashboard) and the third
>> heading is an H2 (Our partners) as well.
>>
>> So:
>>
>> HA Initiative (H1)
>> Results to date (H2)
>> Our partners (H2)
>>
>> In the left column, the two headings (Resources & Latest updates) that
>> introduce links are both H3.
>>
>> So:
>>
>> Resources (H3)
>> Latest updates (H3)
>>
>> My problem is that the page originally had the logo in the left top
>> corner as an H1.
>>
>> And from my understanding, although it's not compulsory, it's always
>> best to have just one H1 in the page.
>>
>> What is best practice here? Personally I would prefer that the logo
>> not be a heading at all but simply an image with an alt text. But I
>> know that some people have no problem with having more than one H1 in
>> the same page.
>>
>> How would you structure your hierarchy with this content?
>>
>> Thanks,
>>
>> Catherine
>>
> > > > >

From: Guy Hickling
Date: Mon, May 20 2019 5:00PM
Subject: Re: guidance on headings hierarchy
← Previous message | Next message →

Catherine,

Besides the logo, you were asking about the rest of the heading structure
as well, which raises the issue of the headings in the column sidebar.

To take the simplest case, suppose your sidebar was on the right side of
the page (and we will assume the markup for it therefore follows the main
content markup in the HTML source, as would usually be the case barring
floats and suchlike). To use h3 elements would be telling screen reader
users that they were logical subheadings under the last h2 heading, which
is not normally the case for sidebar headings. Often a sidebar is repeated,
unchanged, on most pages of a website. In which case any headings it has
are clearly not logical subheadings of whatever just happens by chance to
be the last h2 on any particular page!

So, in our hypothetical righthand sidebar we could not use <h3> (or
anything lower). Equally we could not use h1 elements since there should
only be one <h1> on a page. The only choice then is to use h2, and use CSS
to achieve the font-size wanted for them.

Now put the sidebar back where you have it on the left side of the page.
That should not change the heading elements, so still use h2. It seems
counter-intuitive to use h2 headings before the h1, but that is the same
problem as with sites that have a carousel or hero image at the top, with
the main page h1 heading below that. The carousel headings should all be h2
even though they come before the h1 heading. I guess screen reader users
are well used to that structure (though one screen reader, NVDA I think,
gets that wrong when displaying a list of the headings). So I would argue
the headings in your sidebar should both be changed from h3 to h2.

Regards,
Guy Hickling

From: Isabel Holdsworth
Date: Wed, May 22 2019 4:38AM
Subject: Re: guidance on headings hierarchy
← Previous message | No next message

Yes, <h2> headings would be ideal in a sidebar. But if it's
encapsulated in its own region, it's not the end of the world if the
headings are at level 3.

Cheers, Isabel

On 21/05/2019, Guy Hickling < = EMAIL ADDRESS REMOVED = > wrote:
> Catherine,
>
> Besides the logo, you were asking about the rest of the heading structure
> as well, which raises the issue of the headings in the column sidebar.
>
> To take the simplest case, suppose your sidebar was on the right side of
> the page (and we will assume the markup for it therefore follows the main
> content markup in the HTML source, as would usually be the case barring
> floats and suchlike). To use h3 elements would be telling screen reader
> users that they were logical subheadings under the last h2 heading, which
> is not normally the case for sidebar headings. Often a sidebar is repeated,
> unchanged, on most pages of a website. In which case any headings it has
> are clearly not logical subheadings of whatever just happens by chance to
> be the last h2 on any particular page!
>
> So, in our hypothetical righthand sidebar we could not use <h3> (or
> anything lower). Equally we could not use h1 elements since there should
> only be one <h1> on a page. The only choice then is to use h2, and use CSS
> to achieve the font-size wanted for them.
>
> Now put the sidebar back where you have it on the left side of the page.
> That should not change the heading elements, so still use h2. It seems
> counter-intuitive to use h2 headings before the h1, but that is the same
> problem as with sites that have a carousel or hero image at the top, with
> the main page h1 heading below that. The carousel headings should all be h2
> even though they come before the h1 heading. I guess screen reader users
> are well used to that structure (though one screen reader, NVDA I think,
> gets that wrong when displaying a list of the headings). So I would argue
> the headings in your sidebar should both be changed from h3 to h2.
>
> Regards,
> Guy Hickling
> > > > >