{"id":9094,"date":"2021-01-11T15:16:18","date_gmt":"2021-01-11T20:16:18","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=9094"},"modified":"2025-11-18T13:40:25","modified_gmt":"2025-11-18T18:40:25","slug":"headings","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/","title":{"rendered":"Headings"},"content":{"rendered":"<p>Headings provide structure, help visitors scan content quickly, and allow screen reader users to understand and navigate the page. Proper heading structure is required across all School of Medicine websites. This page summarizes the key accessibility guidelines. For detailed instructions, on creating headings, see the <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/headings\/\">Headings<\/a> page in the User Guide.<\/p>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Why Accessible Headings Matter<\/h2>\n<ul>\n<li>Screen readers rely on headings, not text size or color, to understand page structure.<\/li>\n<li>Proper headings make long pages easier to skim and improve overall usability.<\/li>\n<li>Clear hierarchy improves <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/analytics-and-seo\/\">SEO<\/a> by helping search engines understand how your content is organized.<\/li>\n<\/ul>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Key Requirements for Accessible Headings<\/h2>\n<h3>1. Use Headings for Structure<\/h3>\n<ul>\n<li>Use headings to organize content into meaningful sections, not to make text large or bold.<\/li>\n<li>Headings make pages easier to scan and read. Visitors rely on them to quickly identify where new topics begin and locate information of interest.<\/li>\n<\/ul>\n<h3>2. Heading Styles<\/h3>\n<ul>\n<li>A\u00a0<strong>common accessibility mistake<\/strong>\u00a0is bolding text to make it look like a heading instead of applying the actual heading level through the editor.<\/li>\n<li>Do not manually changing heading fonts, colors, or sizes. These styles are already built into the School of Medicine theme for consistency and accessibility.<\/li>\n<\/ul>\n<h3>3. Follow Proper Hierarchy (H1 \u2192 H2 \u2192 H3 \u2192 H4)<\/h3>\n<ul>\n<li>Headings should be used in descending order.<\/li>\n<li>Each page should only have one H1. The page title automatically serves as the page\u2019s H1.<\/li>\n<li>Use H2 through H6 headings within the main content area to organize sections and sub-sections of content.<\/li>\n<li>Do <strong>not<\/strong> skip heading levels (e.g., from H2 to H4).<\/li>\n<\/ul>\n<h3>4. Headings Should Be Descriptive and Clear<\/h3>\n<ul>\n<li>Headings should accurately reflect the content that follows.<\/li>\n<li>Keep each heading unique and relevant so users, and search engines, can quickly understand the page structure.<\/li>\n<\/ul>\n<h3>5. Do Not Use All Caps for Headings<\/h3>\n<ul>\n<li>All caps are harder to read and can cause issues for screen readers and voice dictation tools.<\/li>\n<\/ul>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Continue to the Full How-To<\/h2>\n<p>For step-by-step guidance on adding headings, see our <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/headings\/\"><strong>Headings<\/strong><\/a> documentation.<\/p>\n<hr  style=\"margin:30px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"videos\"><\/a>Related Accessibility Videos<\/h2>\n<div class=\"row  oscitas-bootstrap-container\">\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/9ylBqOnEXos\" title=\"Making Headings and Lists More Accessible\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Making Headings and Lists More Accessible<\/h3>\n<p style=\"text-align: center;\">Learn how screen reader users navigate using headings and lists.<br \/>\n4 min. 38 sec.<\/p>\n<\/div>\n<div class=\"col-lg-6 col-md-6 col-xs-12 col-sm-6 oscitas-bootstrap-container\">\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/QP1rzxMRap4\" title=\"Web Headings for Screen Readers\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" 0=\"allowfullscreen\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\n<h3 style=\"text-align: center;\">Web Headings for Screen Readers<\/h3>\n<p style=\"text-align: center;\">A blind presenter demonstrates real-world heading navigation.<br \/>\n1 min. 52 sec.<\/p>\n<\/div>\n<\/div>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"resources\"><\/a>Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/webaim.org\/techniques\/semanticstructure\/\">WebAIM: Semantic Structure: Regions, Headings, and Lists<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/headings\/\">World Wide Web Consortium (W3C): Headings<\/a><\/li>\n<\/ul>\n<hr  style=\"margin:40px 0\"class=\" rule-thin osc-rule\" \/>\n<h2><a id=\"example\"><\/a>Example<\/h2>\n<figure id=\"attachment_14372\" class=\"thumbnail wp-caption alignnone\" style=\"width: 561px\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14372\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png\" alt=\"\" width=\"551\" height=\"2560\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-scaled.png 551w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-768x3570.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-441x2048.png 441w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/07\/heading-example-241x1120.png 241w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><figcaption class=\"caption wp-caption-text\">Example of a well-structured webpage using multiple heading levels.<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Headings provide structure, help visitors scan content quickly, and allow screen reader users to understand and navigate the page. Proper heading structure is required across all School of Medicine websites. This page summarizes the key accessibility guidelines. For detailed instructions, on creating headings, see the Headings page in the User Guide. Why Accessible Headings Matter &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\" aria-label=\"Read more about Headings\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":9092,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9094","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=9094"}],"version-history":[{"count":38,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9094\/revisions"}],"predecessor-version":[{"id":14956,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9094\/revisions\/14956"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9092"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=9094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}