{"id":2837,"date":"2025-11-17T15:15:46","date_gmt":"2025-11-17T20:15:46","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2837"},"modified":"2025-12-03T21:57:12","modified_gmt":"2025-12-04T02:57:12","slug":"aria-landmarks","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/","title":{"rendered":"ARIA Landmarks"},"content":{"rendered":"    <section class=\"cc--component-container cc--hero-basic  hero-basic color-light-gray\">\n\n<div class=\"c--component c--hero-basic\">\n        \n<div class=\"outer-wrapper\">\n    <div class=\"inner-wrapper\">\n        <div class=\"text-container\">\n            <div class=\"text-wrapper\">\n\t\t\t\t<div class=\"f--field f--page-title \"><h1>ARIA Landmarks<\/h1>\n\n<\/div><!-- f--field f--page-title -->\n\t\t\t\t<div class=\"f--field f--text \"><\/div><!-- f--field f--text -->\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n<\/div><!-- c--component c--hero-basic -->\n\n    <\/section><!-- cc--component-container cc--section -->\n\n\n    <section class=\"cc--component-container cc--rich-text  rich-text\">\n\n<div class=\"c--component c--rich-text\">\n        \n    <div class=\"f--field f--rich-text \"><p>Many screen reader users navigate your site through landmarks, which are \u201cregions\u201d that you have created on your page. You can achieve this by using a combination of HTML5 and ARIA labels. ARIA is used to provide instructions to assistive technology, letting them how to identify, read out, or interact with an element on the page.<\/p>\n<h2><strong>Appropriate use<\/strong><\/h2>\n<p>It is recommended that you start with using HTML 5 semantic regions. These are the following:<\/p>\n<pre><code>\r\n&lt;header&gt;, &lt;nav&gt;, &lt;main&gt;, &lt;section&gt;, &lt;aside&gt;, &lt;footer&gt;\r\n\r\n<\/code><\/pre>\n<p>These should correspond to the regions on your page:<\/p>\n<figure class=\"rudr-image align-none \"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-content\/uploads\/sites\/16\/2025\/11\/aria_landmarks.png\" alt=\"\" width=\"538\" height=\"684\" \/><\/figure>\n<p>It is common for you to have multiple navigation, sections, and sometimes side items. For these it\u2019s important that you are providing a usable label so that the end user can discern one element from the other.<\/p>\n<p>In the example below we\u2019ve coded two navigation items:<\/p>\n<pre><code>&lt;nav aria-label=\"Main Navigation\"&gt; ... &lt;\/nav&gt;\r\n...\r\n&lt;nav aria-label=\"Book Chapters\"&gt; ... &lt;\/nav&gt;\r\n\r\n<\/code><\/pre>\n<h2><strong>How to test for compliance<\/strong><\/h2>\n<p>We recommend using the\u00a0<a href=\"https:\/\/chromewebstore.google.com\/detail\/skipto-landmarks-headings\/fjkpbfcodhflpdildjbmdhhmcoplghgf?pli=1\">Skip to Headings browser extension<\/a>\u00a0on Google Chrome. This will allow you to visually see the landmark structures on your page.<\/p>\n<h2><strong>Common mistakes<\/strong><\/h2>\n<p><strong>Not labeling landmarks:\u00a0<\/strong>A very common mistake we see is not providing an ARIA label to your sections. This results in the screen reader listing:<\/p>\n<ul>\n<li>Navigation<\/li>\n<li>Navigation<\/li>\n<li>Complimentary Region<\/li>\n<li>Complimentary Region<\/li>\n<li>Complimentary Region<\/li>\n<\/ul>\n<p>This does not provide any usable information that allows the user to navigate your site.<\/p>\n<h2><strong>Other resources<\/strong><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/patterns\/landmarks\/examples\/main.html\">W3C ARIA Landmark Examples<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-descriptive.html\">Using Landmarks to identify regions<\/a><\/li>\n<\/ul>\n<h2><strong>WCAG standards<\/strong><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/content-structure-separation-programmatic.html\">WCAG 1.3.1: Info and Relationships<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/navigation-mechanisms-descriptive.html\">WCAG 2.4.6: Headings and Labels<\/a><\/li>\n<\/ul>\n<\/div><!-- f--field f--rich-text -->\n\n    <\/div><!-- c--component c--rich-text -->\n\n    <\/section><!-- cc--component-container cc--section -->\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":257,"featured_media":0,"parent":2827,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-mini-site.php","meta":{"_acf_changed":false,"footnotes":""},"page-category":[],"class_list":["post-2837","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>ARIA Landmarks - Digital Accessibility<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ARIA Landmarks - Digital Accessibility\" \/>\n<meta property=\"og:url\" content=\"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Accessibility\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T02:57:12+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/accessible-web-content\\\/aria-landmarks\\\/\",\"url\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/accessible-web-content\\\/aria-landmarks\\\/\",\"name\":\"ARIA Landmarks - Digital Accessibility\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/#website\"},\"datePublished\":\"2025-11-17T20:15:46+00:00\",\"dateModified\":\"2025-12-04T02:57:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/accessible-web-content\\\/aria-landmarks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/accessible-web-content\\\/aria-landmarks\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/accessible-web-content\\\/aria-landmarks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Digital Accessibility\",\"item\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessible Web Content\",\"item\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/accessible-web-content\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"ARIA Landmarks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/#website\",\"url\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/\",\"name\":\"Digital Accessibility\",\"description\":\"A Rutgers IT Service\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/it.rutgers.edu\\\/digital-accessibility\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ARIA Landmarks - Digital Accessibility","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/","og_locale":"en_US","og_type":"article","og_title":"ARIA Landmarks - Digital Accessibility","og_url":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/","og_site_name":"Digital Accessibility","article_modified_time":"2025-12-04T02:57:12+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/","url":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/","name":"ARIA Landmarks - Digital Accessibility","isPartOf":{"@id":"https:\/\/it.rutgers.edu\/digital-accessibility\/#website"},"datePublished":"2025-11-17T20:15:46+00:00","dateModified":"2025-12-04T02:57:12+00:00","breadcrumb":{"@id":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/aria-landmarks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Digital Accessibility","item":"https:\/\/it.rutgers.edu\/digital-accessibility\/"},{"@type":"ListItem","position":2,"name":"Accessible Web Content","item":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/"},{"@type":"ListItem","position":3,"name":"ARIA Landmarks"}]},{"@type":"WebSite","@id":"https:\/\/it.rutgers.edu\/digital-accessibility\/#website","url":"https:\/\/it.rutgers.edu\/digital-accessibility\/","name":"Digital Accessibility","description":"A Rutgers IT Service","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/it.rutgers.edu\/digital-accessibility\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/2837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/users\/257"}],"replies":[{"embeddable":true,"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/comments?post=2837"}],"version-history":[{"count":2,"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/2837\/revisions"}],"predecessor-version":[{"id":2933,"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/2837\/revisions\/2933"}],"up":[{"embeddable":true,"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/pages\/2827"}],"wp:attachment":[{"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/media?parent=2837"}],"wp:term":[{"taxonomy":"page-category","embeddable":true,"href":"https:\/\/it.rutgers.edu\/digital-accessibility\/wp-json\/wp\/v2\/page-category?post=2837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}