{"id":1062,"date":"2017-01-17T15:30:51","date_gmt":"2017-01-17T23:30:51","guid":{"rendered":"http:\/\/blogs.lanecc.edu\/webteam\/?p=1062"},"modified":"2019-09-17T23:57:05","modified_gmt":"2019-09-18T06:57:05","slug":"understanding-wcag-2-0-2-4-6-heading-and-labels","status":"publish","type":"post","link":"https:\/\/blogs.lanecc.edu\/webteam\/2017\/01\/17\/understanding-wcag-2-0-2-4-6-heading-and-labels\/","title":{"rendered":"Understanding WCAG 2.0: 2.4.6 – Heading and Labels"},"content":{"rendered":"

The next standard we’ll explore in our series on understanding WCAG 2.0 is 2.4.6, Multiple Ways<\/a>. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here’s the complete text:<\/p>\n

\n
\n

2.4.6 Headings and Labels:<\/strong> Headings and labels describe topic or purpose. (Level AA)<\/p>\n<\/div>\n<\/blockquote>\n

For a really short standard, there’s a lot to unpack.<\/p>\n

The first thing you might notice is this standard doesn’t explicitly require headings or labels. While labels are definitely required<\/a>, there’s actually no specific requirement to have headings on your pages. If it’s appropriate to not have any headings, you are (from an accessibility standpoint) welcome to have nothing but paragraph after paragraph after paragraph.<\/p>\n

But situations where it’s appropriate to not have any headers are rare, and adding headers makes your document more navigable. For example, most PDF readers will automatically generate a clickable table of contents for you, as in this picture:<\/p>\n

\"Screenshot<\/a>Screen readers can take advantage of headers in a similar way. Imagine if you were stuck listening to your computer reading you all 624 pages of that book sequentially. It’d be almost useless to you. Being able to jump to certain headers would help a lot.<\/p>\n

Standard 2.4.6 simply says that if you’re using headers, you need to use headers that describe the topic or the purpose of the subsequent section.<\/p>\n

But buried further down on that post, in a little green note, there’s a bit of text that says “Note: <\/em> Headings and labels must be programmatically determined, per Success Criterion 1.3.1<\/a>”<\/p>\n

Programmatically determined is a tricky phrase. Just about anything is programmatically determinable<\/a> – so that seems like a phrase ripe for abuse. Fortunately, WCAG 2.0 provides a definition<\/a>:<\/p>\n

determined by software from author-supplied data provided in a way that different user agents<\/a>, including assistive technologies<\/a>, can extract and present this information to users in different modalities<\/p><\/blockquote>\n

So if we do use headings, not only do that have to be programmatically determinable, they need to be programmatically determinable by the software that interprets that page.<\/p>\n

If that doesn’t make sense, it might be easier to look at some examples. The paragraph in the example comes courtesy of wikipedia<\/a>, which has some surprisingly awesome writing.<\/p>\n

Parentheses<\/p>\n

Parentheses may be nested (generally with one set (such as this) inside another set). This is not commonly used in formal writing (though sometimes other brackets [especially square brackets] will be used for one or more inner set of parentheses [in other words, secondary {or even tertiary} phrases can be found within the main parenthetical sentence]).<\/p><\/blockquote>\n

That example fails, because the heading above is a paragraph element – there’s no way to determine that it describes the subsequent content.<\/p>\n

Parentheses<\/strong><\/p>\n

Parentheses may be nested (generally with one set (such as this) inside another set). This is not commonly used in formal writing (though sometimes other brackets [especially square brackets] will be used for one or more inner set of parentheses [in other words, secondary {or even tertiary} phrases can be found within the main parenthetical sentence]).<\/p><\/blockquote>\n

This one looks ok, but isn’t. Boldface isn’t a heading standard, so most user agents wouldn’t consider it one.<\/p>\n

#Parentheses<\/p>\n

Parentheses may be nested (generally with one set (such as this) inside another set). This is not commonly used in formal writing (though sometimes other brackets [especially square brackets] will be used for one or more inner set of parentheses [in other words, secondary {or even tertiary} phrases can be found within the main parenthetical sentence]).<\/p><\/blockquote>\n

This one is different, because rather than HTML it’s a format called markdown. Markdown<\/a> has very specific rules about formatting text, which make it easy to determine where a heading is. Remember: the WCAG guidelines apply to all documents.<\/p>\n

\n

Parentheses<\/h1>\n

Parentheses may be nested (generally with one set (such as this) inside another set). This is not commonly used in formal writing (though sometimes other brackets [especially square brackets] will be used for one or more inner set of parentheses [in other words, secondary {or even tertiary} phrases can be found within the main parenthetical sentence]).<\/p><\/blockquote>\n

That’s probably the best example here – we’re using the H1 tag for the heading. Not only does the browser apply some styles to make it obvious to most folks where the heading is, but we’re using semantic HTML<\/a> and adhering to a standard browsers can use to navigate pages.<\/p>\n

One last example:<\/p>\n

\n

The Marathon<\/h1>\n

Parentheses may be nested (generally with one set (such as this) inside another set). This is not commonly used in formal writing (though sometimes other brackets [especially square brackets] will be used for one or more inner set of parentheses [in other words, secondary {or even tertiary} phrases can be found within the main parenthetical sentence]).<\/p><\/blockquote>\n

This example uses a heading with the correct markup, but it doesn’t provide the topic in any way, so it fails this guideline.<\/p>\n

At Lane, to keep pages consistent, any page that will be interpreted by the browser as HTML should use semantic HTML, with headings and other elements used correctly. Documents that aren’t HTML are a little trickier. In Microsoft Word, for instance, many people use font sizes and bold face to create headings. That’s really not ok – you should be using the headers tools.<\/p>\n

\"Example<\/a>If you’d like to read more about the headers and labels guideline, you may also be interested in these techniques<\/a>, which provides examples and more detail.<\/p>\n

Interested in more? Check out the listing of all the posts in this series<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The next standard we’ll explore in our series on understanding WCAG 2.0 is 2.4.6, Multiple Ways. This standard is required for WCAG level AA compliance, which is part of what Section 508 requires. Here’s the complete text: 2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA) For a really short standard, … Continue reading “Understanding WCAG 2.0: 2.4.6 – Heading and Labels”<\/span><\/a><\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":"","_wpscppro_dont_share_socialmedia":false,"_wpscppro_custom_social_share_image":0,"_facebook_share_type":"","_twitter_share_type":"","_linkedin_share_type":"","_pinterest_share_type":"","_linkedin_share_type_page":"","_instagram_share_type":"","_medium_share_type":"","_threads_share_type":"","_google_business_share_type":"","_selected_social_profile":[],"_wpsp_enable_custom_social_template":false,"_wpsp_social_scheduling":{"enabled":false,"datetime":null,"platforms":[],"status":"template_only","dateOption":"today","timeOption":"now","customDays":"","customHours":"","customDate":"","customTime":"","schedulingType":"absolute"},"_wpsp_active_default_template":true},"categories":[31],"tags":[6],"class_list":["post-1062","post","type-post","status-publish","format-standard","hentry","category-wcag-20","tag-accessibility"],"_links":{"self":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1062","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/comments?post=1062"}],"version-history":[{"count":6,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1062\/revisions"}],"predecessor-version":[{"id":1307,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/posts\/1062\/revisions\/1307"}],"wp:attachment":[{"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/media?parent=1062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/categories?post=1062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.lanecc.edu\/webteam\/wp-json\/wp\/v2\/tags?post=1062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}