WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Headings or not headings?

for

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

From: Fernand en Jolanda van Olphen
Date: Wed, Feb 02 2022 4:00AM
Subject: Headings or not headings?
No previous message | Next message →

Hi,

I am trying to figure out when something is a heading or not, because I see
a lot of different implementations.

IMO there are 2 Success Criterions which apply:

- SC 1.3.1: Text that *functions* as a heading must be *coded* as a
heading. Meaning: if you use a heading, use the h-element.
- SC 2.4.6: An element *coded* as a heading must *function* as a
heading. Meaning: the heading must describe the content that follows it.

I see a lot of websites with headings that, I think, don't really describe
the content that follows it.

Example: BBC.com
(Code simplified)

<h3><a href= >World record lightning bolt lit up three US states </a></h3>
<a href=>EUROPE</a>

<h3><a href=>The overlooked geniuses of 1922</a></h3>
<a href=>CULTURE</a

My question:
To me this is a misuse of headings. Although they look like headings, they
don't really describe the content that follows it. Any thoughts?

Kind regards,
Fernand van Olphen
Accessibility Advisor
Municipality of the Hague

From: Patrick H. Lauke
Date: Wed, Feb 02 2022 4:29AM
Subject: Re: Headings or not headings?
← Previous message | Next message →

On 02/02/2022 11:00, Fernand en Jolanda van Olphen wrote:

> - SC 1.3.1: Text that *functions* as a heading must be *coded* as a
> heading. Meaning: if you use a heading, use the h-element.
> - SC 2.4.6: An element *coded* as a heading must *function* as a
> heading. Meaning: the heading must describe the content that follows it.

Slight correction on that last one: 2.4.6 is disconnected from 1.3.1. So
regardless of whether the heading is *coded* correctly or not, if the
thing/text acts as a heading, it should be sufficiently descriptive.

> I see a lot of websites with headings that, I think, don't really describe
> the content that follows it.
>
> Example: BBC.com
> (Code simplified)
>
> <h3><a href= >World record lightning bolt lit up three US states </a></h3>
> <a href=>EUROPE</a>
>
> <h3><a href=>The overlooked geniuses of 1922</a></h3>
> <a href=>CULTURE</a
>
> My question:
> To me this is a misuse of headings. Although they look like headings, they
> don't really describe the content that follows it. Any thoughts?

Pedantically, you're right, those don't "head up" any following content.
They do for stuff later on in the page (where there's an extra paragraph
of content after the heading). This would, in my mind though, be a very
borderline/mild failure (which of course means nothing, as WCAG doesn't
have nuance...it's a binary pass/fail, so there's no "mild failure" per se).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Fernand van Olphen
Date: Wed, Feb 02 2022 7:34AM
Subject: Re: Headings or not headings?
← Previous message | Next message →

Thanks Patrick!

A follow up question: what if something looks like a heading, but isn't marked up with a <h#>, is there a way to pass 1.3.1?

See this example: Gov.uk, https://www.gov.uk/education/funding-and-finance-for-students#policy_and_engagement

(code simplified)

<ul>
<li>
<a>Student finance login
<p>Your student finance online account - check payment dates, track an application, change details, reset password, find customer reference numbers
</li>

<li>
<a>Repaying your student loan
<p> When you start repaying your student loan, your monthly repayments, what to do if you have 2 jobs or are self-employed, how to get a refund if you've overpaid.
</li>

Will this pass 1.3.1?


Met vriendelijke groeten,

Fernand van Olphen
Functioneel beheerder
06 526 720 46
www.denhaag.nl<;http://www.denhaag.nl>;

Van: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > namens Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
Verzonden: woensdag 2 februari 2022 12:29
Aan: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Onderwerp: Re: [WebAIM] Headings or not headings?

On 02/02/2022 11:00, Fernand en Jolanda van Olphen wrote:

> - SC 1.3.1: Text that *functions* as a heading must be *coded* as a
> heading. Meaning: if you use a heading, use the h-element.
> - SC 2.4.6: An element *coded* as a heading must *function* as a
> heading. Meaning: the heading must describe the content that follows it.

Slight correction on that last one: 2.4.6 is disconnected from 1.3.1. So
regardless of whether the heading is *coded* correctly or not, if the
thing/text acts as a heading, it should be sufficiently descriptive.

> I see a lot of websites with headings that, I think, don't really describe
> the content that follows it.
>
> Example: BBC.com
> (Code simplified)
>
> <h3><a href= >World record lightning bolt lit up three US states </a></h3>
> <a href=>EUROPE</a>
>
> <h3><a href=>The overlooked geniuses of 1922</a></h3>
> <a href=>CULTURE</a
>
> My question:
> To me this is a misuse of headings. Although they look like headings, they
> don't really describe the content that follows it. Any thoughts?

Pedantically, you're right, those don't "head up" any following content.
They do for stuff later on in the page (where there's an extra paragraph
of content after the heading). This would, in my mind though, be a very
borderline/mild failure (which of course means nothing, as WCAG doesn't
have nuance...it's a binary pass/fail, so there's no "mild failure" per se).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer

From: Mark Magennis
Date: Wed, Feb 02 2022 8:05AM
Subject: Re: Headings or not headings?
← Previous message | Next message →

I guess this comes down to semantics. Are those semantically headings? Or is a list of link/description pairs sufficient semantics? You could argue that this should be coded as a description list using <dl> <dt> <dd>.

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Fernand van Olphen
Sent: 02 February 2022 14:34
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] Re: [WebAIM] Headings or not headings?

[You don't often get email from = EMAIL ADDRESS REMOVED = . Learn why this is important at http://aka.ms/LearnAboutSenderIdentification.]

Thanks Patrick!

A follow up question: what if something looks like a heading, but isn't marked up with a <h#>, is there a way to pass 1.3.1?

See this example: Gov.uk, https://www.gov.uk/education/funding-and-finance-for-students#policy_and_engagement

(code simplified)

<ul>
<li>
<a>Student finance login
<p>Your student finance online account - check payment dates, track an application, change details, reset password, find customer reference numbers
</li>

<li>
<a>Repaying your student loan
<p> When you start repaying your student loan, your monthly repayments, what to do if you have 2 jobs or are self-employed, how to get a refund if you've overpaid.
</li>

Will this pass 1.3.1?


Met vriendelijke groeten,

Fernand van Olphen
Functioneel beheerder
06 526 720 46
www.denhaag.nl<;http://www.denhaag.nl>;

Van: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > namens Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
Verzonden: woensdag 2 februari 2022 12:29
Aan: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Onderwerp: Re: [WebAIM] Headings or not headings?

On 02/02/2022 11:00, Fernand en Jolanda van Olphen wrote:

> - SC 1.3.1: Text that *functions* as a heading must be *coded* as a
> heading. Meaning: if you use a heading, use the h-element.
> - SC 2.4.6: An element *coded* as a heading must *function* as a
> heading. Meaning: the heading must describe the content that follows it.

Slight correction on that last one: 2.4.6 is disconnected from 1.3.1. So regardless of whether the heading is *coded* correctly or not, if the thing/text acts as a heading, it should be sufficiently descriptive.

> I see a lot of websites with headings that, I think, don't really
> describe the content that follows it.
>
> Example: BBC.com
> (Code simplified)
>
> <h3><a href= >World record lightning bolt lit up three US states </a></h3>
> <a href=>EUROPE</a>
>
> <h3><a href=>The overlooked geniuses of 1922</a></h3> <a
> href=>CULTURE</a
>
> My question:
> To me this is a misuse of headings. Although they look like headings,
> they don't really describe the content that follows it. Any thoughts?

Pedantically, you're right, those don't "head up" any following content.
They do for stuff later on in the page (where there's an extra paragraph of content after the heading). This would, in my mind though, be a very borderline/mild failure (which of course means nothing, as WCAG doesn't have nuance...it's a binary pass/fail, so there's no "mild failure" per se).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Patrick H. Lauke
Date: Wed, Feb 02 2022 8:10AM
Subject: Re: Headings or not headings?
← Previous message | Next message →

On 02/02/2022 14:34, Fernand van Olphen wrote:

> A follow up question: what if something looks like a heading, but isn't marked up with a <h#>, is there a way to pass 1.3.1?

That gets into the very subjective "does that *look* and more
importantly *act* as a heading?" question. To me, it's reasonably clear
that those aren't headings per se, but individual items...they just
happen to be visually styled a bit bigger.

And there's the dirty secret of WCAG...there is much more
subjectivity/vagueness than what the SCs initially seem to suggest.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Fernand van Olphen
Date: Thu, Feb 03 2022 4:17AM
Subject: Re: Headings or not headings?
← Previous message | Next message →

2.4.6 Headings and labels

In a note it says:
The term label is not limited to the label element in HTML.

It doesn't say:
The term heading is not limited tot the h element in HTML.

I was thinking - overthinking probably- that a caption, a legend or a dt can also function as "content that acts as a heading".

But am I right in thinking that Headings in this case points exclusively to the h-element?





Van: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > namens Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
Verzonden: woensdag 2 februari 2022 16:10
Aan: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Onderwerp: Re: [WebAIM] Headings or not headings?

On 02/02/2022 14:34, Fernand van Olphen wrote:

> A follow up question: what if something looks like a heading, but isn't marked up with a <h#>, is there a way to pass 1.3.1?

That gets into the very subjective "does that *look* and more
importantly *act* as a heading?" question. To me, it's reasonably clear
that those aren't headings per se, but individual items...they just
happen to be visually styled a bit bigger.

And there's the dirty secret of WCAG...there is much more
subjectivity/vagueness than what the SCs initially seem to suggest.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer

From: Detlev Fischer
Date: Thu, Feb 03 2022 5:28AM
Subject: Re: Headings or not headings?
← Previous message | Next message →

I would not see it limited to h1-h6 and stuff with role=heading.
I see 2.4.6 as applying whenever there is a semantic heading function
for stuff subsumed (legend for radio groups, th for column content,
invisible labels for nabigation regions, and so on). It assesses the
"descriptiveness" (itself not an easy concept and to be evaluated with
the context in mind) of such elements rather than aspects of
programmatic determination.

Am 03.02.2022 um 12:17 schrieb Fernand van Olphen:
>
> 2.4.6 Headings and labels
>
> In a note it says:
> The term label is not limited to the label element in HTML.
>
> It doesn't say:
> The term heading is not limited tot the h element in HTML.
>
> I was thinking - overthinking probably- that a caption, a legend or a dt can also function as "content that acts as a heading".
>
> But am I right in thinking that Headings in this case points exclusively to the h-element?
>
>
>
>
>
> > Van: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > namens Patrick H. Lauke < = EMAIL ADDRESS REMOVED = >
> Verzonden: woensdag 2 februari 2022 16:10
> Aan: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
> Onderwerp: Re: [WebAIM] Headings or not headings?
>
> On 02/02/2022 14:34, Fernand van Olphen wrote:
>
>> A follow up question: what if something looks like a heading, but isn't marked up with a <h#>, is there a way to pass 1.3.1?
> That gets into the very subjective "does that *look* and more
> importantly *act* as a heading?" question. To me, it's reasonably clear
> that those aren't headings per se, but individual items...they just
> happen to be visually styled a bit bigger.
>
> And there's the dirty secret of WCAG...there is much more
> subjectivity/vagueness than what the SCs initially seem to suggest.
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > > De disclaimer van toepassing op e-mail van de gemeente Den Haag vindt u op: http://www.denhaag.nl/disclaimer
> > > > --
Detlev Fischer
DIAS GmbH
(Testkreis is now part of DIAS GmbH)

Mobil +49 (0)157 57 57 57 45

http://www.dias.de
Beratung, Tests und Schulungen für barrierefreie Websites

From: Patrick H. Lauke
Date: Thu, Feb 03 2022 5:33AM
Subject: Re: Headings or not headings?
← Previous message | No next message

On 03/02/2022 12:28, Detlev Fischer wrote:
> I would not see it limited to h1-h6 and stuff with role=heading.
> I see 2.4.6 as applying whenever there is a semantic heading function
> for stuff subsumed (legend for radio groups, th for column content,
> invisible labels for nabigation regions, and so on). It assesses the
> "descriptiveness" (itself not an easy concept and to be evaluated with
> the context in mind) of such elements rather than aspects of
> programmatic determination.

Indeed. 2.4.6 is more softly about "anything that acts as heading or
label", but because too many folks were confused and thought label <label> the clarification was added that it's not just <label>. But the
fact that the understanding does *not* make a similar clarification
regarding headings doesn't mean that it *does* just apply to semantic
headings. It's more that understanding docs (and techniques, etc) can't
be comprehensive because otherwise they'd be 100 pages long and try to
boil the ocean to explain explicitly all the cases where this
does/doesn't apply.

And it's possible that it might even apply to humble <p>, <span>, <div>
elements that act that way (which yes, likely fail 1.3.1 for not being
properly marked up, but then that's a different SC ... for 2.4.6 you're
really subjectively evaluating the stuff "as you see it" whether it's
actually marked up semantically in the right way or not).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke