WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: heading as child of another heading - valid?

for

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

From: Tomlins Diane
Date: Fri, Mar 30 2018 12:30PM
Subject: heading as child of another heading - valid?
No previous message | Next message →

I ran into this bit of code the other day on one of our sites (for an accordion, which is bad enough in and of itself):

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseImage1" aria-expanded="true" aria-controls="collapseImage1">
<img class="centered" alt="" src="/util/images/campaigns/virtual-care/header.png">
<h2 style="text-align: center;">Healthcare excellence at your fingertips. <i aria-hidden="true" class="icon-plus-sign-2"></i></h2>
</a>
</h4>

An H2 nested INSIDE an H4. When I ran it through the Nu validator, it didn't flag this nesting as an error, not even a warning. Why is this not flagged??
I found some old references on the web where the older validator DID flag it with " Heading cannot be a child of another heading", so is it somehow not an issue any longer? I've been writing HTML for a very long time, and I would flag this as invalid.

Does this cause any issues for AT? I only have NVDA as my frame of reference.

Thanks!

Diane R Tomlins
HCA IT&S | Digital Media
Accessibility SME

From: Bourne, Sarah (MASSIT)
Date: Fri, Mar 30 2018 12:51PM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

H tags are block elements, which cannot contain other block elements. I don't know why it wasn't flagged by Nu. How AT would handle this would depend on how a particular browser handles the error. Ignore the H4, because it has no actual content itself? Ignore the H2, because it's not allowed inside of an H4?

(And what's up with those heading levels? Should it actually be an H2, or an H4? Or H-something-else-entirely?)

Is it possible that that markup is modified by scripting, so that's not what Nu saw?

sb
Sarah E. Bourne
Director of IT Accessibility
Executive Office of Technology Services and Security (EOTSS)
1 Ashburton Place, 8th Floor, Boston, MA 02108
Office: (617) 626-4502
= EMAIL ADDRESS REMOVED = | www.mass.gov/eotss


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Tomlins Diane
Sent: Friday, March 30, 2018 2:31 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] heading as child of another heading - valid?

I ran into this bit of code the other day on one of our sites (for an accordion, which is bad enough in and of itself):

<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseImage1" aria-expanded="true" aria-controls="collapseImage1">
<img class="centered" alt="" src="/util/images/campaigns/virtual-care/header.png">
<h2 style="text-align: center;">Healthcare excellence at your fingertips. <i aria-hidden="true" class="icon-plus-sign-2"></i></h2>
</a>
</h4>

An H2 nested INSIDE an H4. When I ran it through the Nu validator, it didn't flag this nesting as an error, not even a warning. Why is this not flagged??
I found some old references on the web where the older validator DID flag it with " Heading cannot be a child of another heading", so is it somehow not an issue any longer? I've been writing HTML for a very long time, and I would flag this as invalid.

Does this cause any issues for AT? I only have NVDA as my frame of reference.

Thanks!

Diane R Tomlins
HCA IT&S | Digital Media
Accessibility SME

From: Steve Faulkner
Date: Fri, Mar 30 2018 1:00PM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

It is a conformance error as per the HTML spec, headings cannot be nested.
If you test a simple case the error is shown. In the case of your example
code there is an error in the patent elements that suppresses validation of
child elements, which is probably why it does not get flagged.

On Friday, 30 March 2018, Tomlins Diane < = EMAIL ADDRESS REMOVED = >
wrote:

> I ran into this bit of code the other day on one of our sites (for an
> accordion, which is bad enough in and of itself):
>
> <h4 class="panel-title">
> <a data-toggle="collapse" data-parent="#accordion"
> href="#collapseImage1" aria-expanded="true" aria-controls="collapseImage1"
> >
> <img class="centered" alt="" src="/util/images/campaigns/
> virtual-care/header.png">
> <h2 style="text-align: center;">Healthcare excellence at your
> fingertips. <i aria-hidden="true" class="icon-plus-sign-2"></i></h2>
> </a>
> </h4>
>
> An H2 nested INSIDE an H4. When I ran it through the Nu validator, it
> didn't flag this nesting as an error, not even a warning. Why is this not
> flagged??
> I found some old references on the web where the older validator DID flag
> it with " Heading cannot be a child of another heading", so is it somehow
> not an issue any longer? I've been writing HTML for a very long time, and
> I would flag this as invalid.
>
> Does this cause any issues for AT? I only have NVDA as my frame of
> reference.
>
> Thanks!
>
> Diane R Tomlins
> HCA IT&S | Digital Media
> Accessibility SME
>
>
> > > > >


--
--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

From: Tomlins Diane
Date: Fri, Mar 30 2018 1:22PM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

> Is it possible that that markup is modified by scripting, so that's not what Nu saw?
Nope, there's no scripting affecting this code. I even copy/pasted in the completely rendered code, same results.

>(And what's up with those heading levels? Should it actually be an H2, or an H4? Or H-something-else-entirely?)
Well.. yes, the heading levels are all out of whack too, that's just another battle I fight every day with our field people.


Diane R Tomlins
HCA IT&S | Digital Media
Accessibility SME








sb

Sarah E. Bourne

Director of IT Accessibility

Executive Office of Technology Services and Security (EOTSS)

1 Ashburton Place, 8th Floor, Boston, MA 02108

Office: (617) 626-4502

= EMAIL ADDRESS REMOVED = | www.mass.gov/eotss





-----Original Message-----

From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Tomlins Diane

Sent: Friday, March 30, 2018 2:31 PM

To: = EMAIL ADDRESS REMOVED =

Subject: [WebAIM] heading as child of another heading - valid?



I ran into this bit of code the other day on one of our sites (for an accordion, which is bad enough in and of itself):



<h4 class="panel-title">

<a data-toggle="collapse" data-parent="#accordion" href="#collapseImage1" aria-expanded="true" aria-controls="collapseImage1">

<img class="centered" alt="" src="/util/images/campaigns/virtual-care/header.png">

<h2 style="text-align: center;">Healthcare excellence at your fingertips. <i aria-hidden="true" class="icon-plus-sign-2"></i></h2>

</a>

</h4>



An H2 nested INSIDE an H4. When I ran it through the Nu validator, it didn't flag this nesting as an error, not even a warning. Why is this not flagged??

I found some old references on the web where the older validator DID flag it with " Heading cannot be a child of another heading", so is it somehow not an issue any longer? I've been writing HTML for a very long time, and I would flag this as invalid.



Does this cause any issues for AT? I only have NVDA as my frame of reference.



Thanks!



Diane R Tomlins

HCA IT&S | Digital Media

Accessibility SME

From: Tomlins Diane
Date: Fri, Mar 30 2018 1:46PM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

Thanks Steve, that helps to understand what the validator is doing there.
I should have thought of just putting in a simple example to check... D'oh!

>> It is a conformance error as per the HTML spec, headings cannot be nested.
If you test a simple case the error is shown. In the case of your example code there is an error in the patent elements that suppresses validation of child elements, which is probably why it does not get flagged.

>> SteveF

Diane R Tomlins
HCA IT&S | Digital Media
Accessibility SME

From: Steve Faulkner
Date: Fri, Mar 30 2018 2:55PM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

Hi Diane, this may be helpful in understanding the w3c markup checker

HTML5 – Check it Before you Wreck it with Mike[tm] Smith
<http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/>;

--

Regards

SteveF
Current Standards Work @W3C
<http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;

On 30 March 2018 at 20:46, Tomlins Diane < = EMAIL ADDRESS REMOVED = >
wrote:

> Thanks Steve, that helps to understand what the validator is doing there.
> I should have thought of just putting in a simple example to check... D'oh!
>
> >> It is a conformance error as per the HTML spec, headings cannot be
> nested.
> If you test a simple case the error is shown. In the case of your example
> code there is an error in the patent elements that suppresses validation of
> child elements, which is probably why it does not get flagged.
>
> >> SteveF
>
> Diane R Tomlins
> HCA IT&S | Digital Media
> Accessibility SME
>
>
>
>
> > > > >

From: Birkir R. Gunnarsson
Date: Sat, Mar 31 2018 11:20AM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

One more observation on this topic,.
Accessibility tester plug-ins for browsers tend not to identify most
nesting issues, because the browser tries to correct them while
building the DOM>
I did extensive testing with aXe about a year ago and it missed most
nesting issues. Granted I should repeat those checks but it is
understandable that a product that tests the DOM (which is usually the
right place to test accessibility) misses markup issues that the
browser will try to correct while parsing.
These can still be issues because there are no hard and fast rules for
how browsers should handle invalid code.
I wouldn't spend too much energy on this compared to other
accessibility issues, but make sure not to overlook this entirely and
try to run suspicious looking HTML through a checker.


On 3/30/18, Steve Faulkner < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Diane, this may be helpful in understanding the w3c markup checker
>
> HTML5 – Check it Before you Wreck it with Mike[tm] Smith
> <http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/>;
>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
>
> On 30 March 2018 at 20:46, Tomlins Diane < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Thanks Steve, that helps to understand what the validator is doing there.
>> I should have thought of just putting in a simple example to check...
>> D'oh!
>>
>> >> It is a conformance error as per the HTML spec, headings cannot be
>> nested.
>> If you test a simple case the error is shown. In the case of your example
>> code there is an error in the patent elements that suppresses validation
>> of
>> child elements, which is probably why it does not get flagged.
>>
>> >> SteveF
>>
>> Diane R Tomlins
>> HCA IT&S | Digital Media
>> Accessibility SME
>>
>>
>>
>>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.

From: Tomlins Diane
Date: Mon, Apr 02 2018 10:14AM
Subject: Re: heading as child of another heading - valid?
← Previous message | Next message →

Thanks Steve :)
"Check it before you wreck it" , love that title.

Diane R Tomlins
HCA IT&S | Digital Media
Accessibility SME
>Hi Diane, this may be helpful in understanding the w3c markup checker

>HTML5 – Check it Before you Wreck it with Mike[tm] Smith <https://urldefense.proofpoint.com/v2/url?u=http-3A__html5doctor.com_html5-2Dcheck-2Dit-2Dbefore-2Dyou-2Dwreck-2Dit-2Dwith-2Dmiketm-2Dsmith_&d=DwIGaQ&cŸZnZOgPWmHmvevlab4V4DSjtBMjorSlbQYfK_MauDg&r=XUJIZqLpwbvdWkWIC6JMexv3V64IzMTzZybhWfY7YUk&m=hYt6PIewTzgLhcpxsnx6GK3q4F4luCdKMjnY4Lm62gk&sÊRVbX6zQIlixtWXSctGVhPEr9SA22_teoubi1cS78s&e=>
--

>Regards
>SteveF

From: Tomlins Diane
Date: Mon, Apr 02 2018 10:22AM
Subject: Re: heading as child of another heading - valid?
← Previous message | No next message

Thanks Birkir, makes sense.
Yes, the nested heading thing isn't one I'm going to lose sleep over, our content publishers create more egregious a11y issues than nesting headings. We're working on a training program for our people out in the divisions, so that should help cut down on some of the errors I see every day.

Diane R Tomlins
HCA IT&S | Digital Media
Accessibility SME

>Accessibility tester plug-ins for browsers tend not to identify most nesting issues, because the browser tries to correct them while building the DOM> I did >extensive testing with aXe about a year ago and it missed most nesting issues. Granted I should repeat those checks but it is understandable that a product >that tests the DOM (which is usually the right place to test accessibility) misses markup issues that the browser will try to correct while parsing.
>These can still be issues because there are no hard and fast rules for how browsers should handle invalid code.
>I wouldn't spend too much energy on this compared to other accessibility issues, but make sure not to overlook this entirely and try to run suspicious looking HTML through a checker.