OverviewHeadings create important structure for a web page, allowing readers to browse content by topic. Users are much more likely to discover topics of interest if they are marked with a heading.This structure is especially important for screen reader users. The majority of screen reader users say skimming for headings is the first thing they do when they open a page. Headings allow screen reader users to listen to a list of the headings and skip to the topic they want. Headings also…Eliminate walls of textPromote readabilityAllow for skimmingSave formatting (when copy and pasting) Best Practices Headings must have the appropriate style applied (not just bolded and enlarged)Never skip a heading level Applying Heading StylesAside from the visual style, heading level 1, heading level 2, etc. have meaning to a screen reader user.Heading level 1 is the title of the website and/or page. There are usually no more than two of these styles.Heading level 2 should be nested under heading level 1. Heading level 3 should be nested under heading level 2 etc. Do not skip heading levels as it will make the content's hierarchical structure confusing. Screen readers can pull up a list of headings on a webpage. Here is an example of the Headings Menu from VoiceOver on Mac. Each number that corresponds to a heading represents the heading style number. Example Think of a page's heading structure like a table of contents where each heading level is nested appropriately without skipping any levels. In the example screenshot, the heading levels are labeled on the webpage using Editorially so they are easier to see. The top most heading is a Heading Level 2 for, “Maintaining CPACC Certification.”Underneath that there is a Heading Level 3 titled, “What counts as CAEC?” As we continue down the page, notice how the heading levels keep changing, but a heading level is never skipped as we drill down.Having a clear and predictable structure will help improve readability for everybody, including those who use screen readers. FAQ Can I use heading styles for block quotes? No! Using a heading style for a block quote may visually look appealing, but to a screen reader user, it won't make any sense. Instead, use the block quote feature. In Site Builder, the icon looks like a quotation mark. The heading style I'm supposed to use does not visually look how I want it to. It's too big/small, what do I do? You can have your webpage look how you want it to while still preserving the proper heading structure. Many content management systems have an option to adjust the size of the heading style without compromising the style's code. If this option does not work, reach out to Web Development Services for a custom solution. Never break a heading structure. Can I just bold text and make it large instead of applying a style? No, a heading style must be applied to all headings. How do I apply a heading style? Most content editors will have a drop down menu where you can change the heading style. The default style is usually, “paragraph.” Testing for Accessibility TestUse this headings bookmarklet or automated testing tool like WAVE to discover headings on a page.Do all visually formatted headings have a semantic h-tag?Do headings nest in outline level hierarchy properly?ResourcesWebAim's piece on creating semantic structure in Web contentWCAG 1.3.1: Info and RelationshipsWCAG 2.4.6: Headings and Labels Related articles Headings Lists Tables Links Alternative Text Identify Languages Animations