{"id":303,"date":"2018-12-10T15:56:42","date_gmt":"2018-12-10T15:56:42","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=303"},"modified":"2022-06-20T14:33:12","modified_gmt":"2022-06-20T14:33:12","slug":"wai-aria-landmarks","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/wai-aria-landmarks\/","title":{"raw":"WAI-ARIA Landmarks","rendered":"WAI-ARIA Landmarks"},"content":{"raw":"WAI-ARIA landmarks are used to define regions on a web page. They provide a means for assistive technology users to effectively navigate the various areas of a page. WAI-ARIA landmarks should be used with other means of within-page navigation, such as bypass links and page headings. These two latter means of navigating have been around for much longer, and many will continue to use these elements as their primary method of moving around within a web page.\r\n\r\n<strong>There are eight landmark roles. <\/strong>\r\n\r\nFollow the links below to read about each type of landmark:\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#banner\">banner<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#complementary\">complementary<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#contentinfo\">contentinfo<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#form\">form<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#main\">main<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#navigation\">navigation<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#region\">region<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#search\">search<\/a><\/li>\r\n<\/ul>\r\nIn the following short video, you will see how ChromeVox interacts with landmarked regions for the next activity coming up in this unit. Use it as a model for implementing your own landmarks. Aim to have your activity submission operate the same as it does in the video.\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/embed\/T3KfkwgZImc target=_blank\" rel=\"noopener noreferrer\">WAI-ARIA Landmarks Demo<\/a>\u00a0<\/strong>(1:07)\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/T3KfkwgZImc[\/embed]\r\n\r\nTo help visualize landmarked regions, the figure below presents well-defined areas on the page, each of which serves a different purpose. Banner areas, the element that contains the content of each banner region, would be assigned <code>role=\"banner\"<\/code>. The menu on the left would have its container assigned <code>role=\"navigation\"<\/code>, as would other navigation bars or menus if they were present. The main content area, assigned <code>role=\"main\"<\/code>, is where the primary content of the page appears. There should only be <em>one<\/em> main region. The region on the right containing secondary information, assigned <code>role=\"complementary\"<\/code>, is where you might find advertising or related resources. And, finally, the container around the footer area would be assigned <code>role=\"contentinfo\"<\/code>. This is where details such as copyright, a privacy statement, contact information, etc., would be located.\r\n\r\nWebsites may be laid out in a multitude of ways; this particular layout is just an example. The landmarks assigned to any given region should reflect the function of that particular region, regardless of where it might appear on the page. If advertising were spread across a region at the bottom of the page, for example, then that region would be assigned <code>role=\"complementary\"<\/code>.\r\n\r\n<strong>Example of landmarked regions of a web page:<\/strong>\r\n\r\n<img src=\"http:\/\/pressbooks.library.ryerson.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-1024x1014.png\" alt=\"The visual layout of WAI-ARIA landmarks, described above.\" class=\"wp-image-155 alignnone\" width=\"832\" height=\"824\" \/>\r\n<h2>Custom Regions<\/h2>\r\nWhile most of the landmarks are relatively self-explanatory in terms of what they should contain, <code>role=\"region\"<\/code> needs some explanation. This landmark role can be used to contain specific information that is not effectively described by one of the other landmark roles and is important enough that a user might want to navigate directly to that area of the page. When it is used, it must be accompanied by <code>aria-label<\/code> or <code>aria-labelledby<\/code> if there is an existing element on the page that describes the region (such as a heading).\r\n\r\nFor example, you may want to define a specific area on each page where contact information or a contact form is located. The following markup might be used to define a \u201ccontact region.\u201d\r\n<div style=\"height: 160px; width: 100%; overflow: hidden;\">[h5p id=\"6\"]<\/div>\r\n<h2>Other Considerations When Using Landmarks<\/h2>\r\n<ul>\r\n \t<li><strong>The whole page defined in regions<\/strong>: When landmarks are used, it is considered best practice to contain all information presented on a page within a region, so no information is orphaned outside the defined regions.<\/li>\r\n \t<li><strong>Duplicate roles<\/strong>: For landmarks that may be used for multiple regions, such as <code>role=\"navigation\"<\/code>, these regions should be distinguished from one another. For instance, use <code>aria-label<\/code> or <code>aria-labelledby\u00a0<\/code>to describe a \u201cmain navigation\u201d bar and a \u201ccontent menu.\u201d Both are considered navigation features, even though they serve different purposes.<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/GL\/wiki\/Using_ARIA_landmarks_to_identify_regions_of_a_page\">Using ARIA landmarks to identify regions of a page<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/regions\/\">Page Regions (WAI Web Accessibility Tutorials)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/landmark-regions\/\">ARIA Landmarks Example<\/a><\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<p>WAI-ARIA landmarks are used to define regions on a web page. They provide a means for assistive technology users to effectively navigate the various areas of a page. WAI-ARIA landmarks should be used with other means of within-page navigation, such as bypass links and page headings. These two latter means of navigating have been around for much longer, and many will continue to use these elements as their primary method of moving around within a web page.<\/p>\n<p><strong>There are eight landmark roles. <\/strong><\/p>\n<p>Follow the links below to read about each type of landmark:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#banner\">banner<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#complementary\">complementary<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#contentinfo\">contentinfo<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#form\">form<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#main\">main<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#navigation\">navigation<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#region\">region<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#search\">search<\/a><\/li>\n<\/ul>\n<p>In the following short video, you will see how ChromeVox interacts with landmarked regions for the next activity coming up in this unit. Use it as a model for implementing your own landmarks. Aim to have your activity submission operate the same as it does in the video.<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/embed\/T3KfkwgZImc target=_blank\" rel=\"noopener noreferrer\">WAI-ARIA Landmarks Demo<\/a>\u00a0<\/strong>(1:07)<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"WAI-ARIA Landmarks Demo\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/T3KfkwgZImc?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>To help visualize landmarked regions, the figure below presents well-defined areas on the page, each of which serves a different purpose. Banner areas, the element that contains the content of each banner region, would be assigned <code>role=\"banner\"<\/code>. The menu on the left would have its container assigned <code>role=\"navigation\"<\/code>, as would other navigation bars or menus if they were present. The main content area, assigned <code>role=\"main\"<\/code>, is where the primary content of the page appears. There should only be <em>one<\/em> main region. The region on the right containing secondary information, assigned <code>role=\"complementary\"<\/code>, is where you might find advertising or related resources. And, finally, the container around the footer area would be assigned <code>role=\"contentinfo\"<\/code>. This is where details such as copyright, a privacy statement, contact information, etc., would be located.<\/p>\n<p>Websites may be laid out in a multitude of ways; this particular layout is just an example. The landmarks assigned to any given region should reflect the function of that particular region, regardless of where it might appear on the page. If advertising were spread across a region at the bottom of the page, for example, then that region would be assigned <code>role=\"complementary\"<\/code>.<\/p>\n<p><strong>Example of landmarked regions of a web page:<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-1024x1014.png\" alt=\"The visual layout of WAI-ARIA landmarks, described above.\" class=\"wp-image-155 alignnone\" width=\"832\" height=\"824\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-1024x1014.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-150x150.png 150w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-300x297.png 300w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-768x761.png 768w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-65x64.png 65w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-225x223.png 225w, https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-content\/uploads\/sites\/57\/2018\/12\/aria-landmarks-350x347.png 350w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><\/p>\n<h2>Custom Regions<\/h2>\n<p>While most of the landmarks are relatively self-explanatory in terms of what they should contain, <code>role=\"region\"<\/code> needs some explanation. This landmark role can be used to contain specific information that is not effectively described by one of the other landmark roles and is important enough that a user might want to navigate directly to that area of the page. When it is used, it must be accompanied by <code>aria-label<\/code> or <code>aria-labelledby<\/code> if there is an existing element on the page that describes the region (such as a heading).<\/p>\n<p>For example, you may want to define a specific area on each page where contact information or a contact form is located. The following markup might be used to define a \u201ccontact region.\u201d<\/p>\n<div style=\"height: 160px; width: 100%; overflow: hidden;\">\n<div id=\"h5p-6\">\n<div class=\"h5p-content\" data-content-id=\"6\"><\/div>\n<\/div>\n<\/div>\n<h2>Other Considerations When Using Landmarks<\/h2>\n<ul>\n<li><strong>The whole page defined in regions<\/strong>: When landmarks are used, it is considered best practice to contain all information presented on a page within a region, so no information is orphaned outside the defined regions.<\/li>\n<li><strong>Duplicate roles<\/strong>: For landmarks that may be used for multiple regions, such as <code>role=\"navigation\"<\/code>, these regions should be distinguished from one another. For instance, use <code>aria-label<\/code> or <code>aria-labelledby\u00a0<\/code>to describe a \u201cmain navigation\u201d bar and a \u201ccontent menu.\u201d Both are considered navigation features, even though they serve different purposes.<\/li>\n<\/ul>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/GL\/wiki\/Using_ARIA_landmarks_to_identify_regions_of_a_page\">Using ARIA landmarks to identify regions of a page<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/page-structure\/regions\/\">Page Regions (WAI Web Accessibility Tutorials)<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/landmark-regions\/\">ARIA Landmarks Example<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-303","chapter","type-chapter","status-publish","hentry"],"part":31,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":23,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/303\/revisions"}],"predecessor-version":[{"id":1962,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/303\/revisions\/1962"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/31"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/303\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=303"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=303"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}