W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2017

RE: Heading structure with 1.3.1 Info and Relationships and 2.4.1 Bypass Block

From: Gunderson, Jon R <jongund@illinois.edu>
Date: Tue, 3 Jan 2017 14:30:17 +0000
To: "Sean Murphy (seanmmur)" <seanmmur@cisco.com>, Matthew Putland <matthew.putland@mediaaccess.org.au>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Message-ID: <46739F12637CC94E82F75FF874E4A14763114863@CITESMBX6.ad.uillinois.edu>
I disagree, I believe headings (H1-H6) should be used structurally as the HTML markup language semantics intended them to be used.

People who come up with their own definition of heading usage and expect the rest of the world to adapt to their interpretation are the people who are being inconsistent with the heading semantics defined in HTM4 and HTML5.

This is even more important as we now have HTML5 sectioning elements creating ARIA landmarks.

We need best practices for the use of landmarks and headings so even between websites structural markup is consistent.


Example of headings and landmarks working together for accessibility (with visualization feature):


From: Sean Murphy (seanmmur) [mailto:seanmmur@cisco.com]
Sent: Monday, January 2, 2017 9:22 PM
To: Matthew Putland <matthew.putland@mediaaccess.org.au>; w3c-wai-ig@w3.org
Subject: RE: Heading structure with 1.3.1 Info and Relationships and 2.4.1 Bypass Block

Adding to your discussion, I have seen references to web content structure that states only a single h1 should be present on a site. In practise, I have seen this not being followed which I don't think is really a issue. Jumpping from a h1 to a h3 also I don't see as an issue for a disable user. I think the most important aspect is if there is consistency for the structure of the page.

For argument sakes: If a site had the following structure (for give the formatting):

<H1>1.1 text</h1>
  <h3>sub-header 1</h3>
  <h3>sub-header 21</h3>
    <h4>Important text</h4>
  <h3>sub-header 3</h3>
<h1>2. Some other text</h1>
  <h2>sub-header 1</h2>
    <h3>minor section 1</h3>
      <h4>important text</h4>
    <h3>minor section 2</h3>
  <h2>sub-header 2</h2>

Based upon the above, The H1 has broken up the content of the page into two major sections. Having or not having the h2 tag, the user should still be able to understand the structure.

In relation to your 2nd part of the question. This is really an assistive technology solution at this present time. I recall someone creating Javascripts or a plugin for Firefox to simulate the screen reader hot keys. Personally I think this should be built into the web browser using the currently defined keystrokes used by screen readers. Generically speaking they use the first letter of the tag in most cases. Then keyboard users can benefit from this feature.

Sean Murphy
Accessibility Software engineer
Tel: +61 2 8446 7751       Cisco Systems, Inc.
The Forum 201 Pacific Highway

 Think before you print.
This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.

From: Matthew Putland [mailto:matthew.putland@mediaaccess.org.au]
Sent: Tuesday, 3 January 2017 1:49 PM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Heading structure with 1.3.1 Info and Relationships and 2.4.1 Bypass Block

Hi WAI interest group,

This is an issue that's been doing my head in for a while. I'm sure that we can all agree that skipping heading levels (like jumping from a <h1> element to a <h3> element) is not recommended. The main issue here is that the relationships of the headings can become confused and heading navigation using assistive technologies becomes more limited (e.g. using the number 1-6 on a keyboard allows you to skip to specific heading levels when using screen readers like JAWS and NVDA, but becomes fairly useless in web content with poor heading structure).

Despite these issues, can anyone explain why skipping heading levels fails/doesn't fail 1.3.1 Info and Relationships<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_UNDERSTANDING-2DWCAG20_content-2Dstructure-2Dseparation-2Dprogrammatic.html&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=AHduGi95DATB5tvUGORMm7RsDkgsj97ehSEpEBLLvhM&e=>? If presentation is used to visually show different heading levels, then surely the headings on the page must also have a semantic and sequential heading structure? There's also technique H42<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_2016_NOTE-2DWCAG20-2DTECHS-2D20161007_H42&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=HlqOkywbd7ct0jNGou_H4AZ6_qPc6u-DDnlRtywnRRk&e=>, which talks about using headings in a semantic and sequential way.

I find that many website developers/designers will assign a certain style to a heading level, and then base their heading structure on the presentation of the headings and don't pay any attention to the sequential heading structure of the page.

There's also the case of 2.4.1 Bypass Block<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_UNDERSTANDING-2DWCAG20_navigation-2Dmechanisms-2Dskip.html&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=lMfjOfY7cPOPYWU3ZaPa0fKI0pISlblnvSeXrEQqG8k&e=> which boggles my mind as well. How is having an semantic and sequential heading structure an acceptable replacement for a skip-to-content link? Sure, headings are great for screen reader users, but people who are unable to use a mouse for any reason cannot skip to headings using a keyboard without assistive technology or access keys (as far as I know).


Matthew Putland
Senior Analyst, Digital Accessibility | Media Access Australia
61 Kitchener Avenue, Victoria Park WA 6100
Tel: 08 9311 8230 (direct) 02 9212 6242 (main) Mobile: 0431 924 288 Web: www.mediaaccess.org.au<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.mediaaccess.org.au_&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=cHy3IlSapSsh5z7gltKQJ5AaH0B3an3a2E0DlU-z0Fg&e=>

My working hours are from 11am-7:30pm AEST (8am-4:30pm AWST).

Media Access Australia<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.mediaaccess.org.au_&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=cHy3IlSapSsh5z7gltKQJ5AaH0B3an3a2E0DlU-z0Fg&e=> - inclusion through technology and Access iQ(r)<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.accessiq.org_&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=FmVgiANXuXs78e4pShPMjwQCK-8TVwo6B-_k-yzhWts&e=> - creating a web without limits. Follow us on Twitter @mediaaccessaus<https://urldefense.proofpoint.com/v2/url?u=https-3A__twitter.com_mediaaccessaus&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=lIJyHhqcBiNNQz1CokSROxNKvTShCD2L8fkCLr6Ms9M&e=> @AccessiQ<https://urldefense.proofpoint.com/v2/url?u=https-3A__twitter.com_accessiq&d=DQMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=bZujjczVTYPMSQ4uugSQLQ&m=k4uk_Pib7SXHOFOyf1TAAbiG_ttU_cHR-qjRuNYAsS4&s=YYhSoF68kItjcFV6yGwdnz_TchKwODz4BdHQe104a3o&e=>
Received on Tuesday, 3 January 2017 14:31:06 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 3 January 2017 14:31:06 UTC