RE: Should a heading's styling match its programmatic level?

WCAG 2.1 success criterion 1.3.1 includes the requirement that “structure and relationships conveyed through presentation can be programmatically determined”.

With regard to headings, there is a longstanding convention that each level of subheading is smaller than the previous one. Translating this into HTML, it means that an h6 must be smaller than an h5, which must be smaller than an h4 and so on.

It also means that if two headings look the same (within the same logical section of the page), then they must be the same level. However, it does not necessarily mean that all the headings at a given level must look the same.

Most pages are divided into two or more logical sections, so I would argue that the hierarchy of physical sizes does not necessarily apply to the entire page. For instance, a typical website might comprise a wide column containing the main content and a narrow column containing other content that is not hierarchically related (such as a contact form, newsletter sign-up, social media links etc.) In this case, an h2 heading in the wide column might well be larger than an h2 in the narrow column.

Steve Green
Managing Director
Test Partners Ltd


From: Aimee Wyld <aimee.wyld@mayden.co.uk>
Sent: 12 November 2020 13:47
To: w3c-wai-ig@w3.org
Subject: Should a heading's styling match its programmatic level?

Hello,

I'm looking for some clarification on accessible headings if someone can help please? I've been using Microsoft Accessibility Insights tool to check a site, and one of the guided checks states that 'A heading's programmatic level must match the level that's presented visually' - does this mean that if a page has an h1 and an h2, then the h2 must be visually different from the h1?

Thank you,

Aimée



[Mayden]
Mayden | The Old Dairy, Melcombe Road | Bath | BA2 3LR
Tel: 01249 701100 | www.mayden.co.uk<http://www.mayden.co.uk/>
[Twitter]<http://twitter.com/@maydentweets> [Facebook] <http://www.facebook.com/pages/Mayden/162138743809797>  [LinkedIn] <http://www.linkedin.com/groups?mostPopular=&gid=3674398>
This email and any attachments are confidential and intended for the addressee only.. If you are not the named recipient, you must not use, disclose, reproduce, copy or distribute the contents of this communication; instead, please contact the sender and delete this email from your system.
Company information<https://mayden.co.uk/contact-us/> | Privacy Policy<https://mayden.co.uk/legal/#privacy> | Disclaimer<https://mayden.co.uk/legal/#disclaimer>