update with message about the landmark accessibilty issue

microsoft · Nov 17, 2023 · 09038e1 · 09038e1
1 parent 12d60aa
commit 09038e1
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/site/src/components/layout.md b/site/src/components/layout.md
@@ -38,7 +38,7 @@ The basic boilerplate for a layout is as follows:
 <html class="layout layout-{nameoflayout}">
 	<body class="layout-body">
 		<header style="layout-body-header">Header</header>
-		<div class="layout-body-hero">Hero</div>
+		<section aria-label="hero" class="layout-body-hero">Hero</section>
 		<nav class="layout-body-menu">Menu</nav>
 		<main class="layout-body-main">Main</main>
 		<aside class="layout-body-aside">Aside</aside>
@@ -136,6 +136,10 @@ The specification for this layout is as follows.
 | Desktop    | Menu, main, aside are side by side. Main is wider than menu.                                                                  |
 | Widescreen | Same as desktop with scaling gutter that keeps combined width of menu, main, aside to the width of the widescreen breakpoint. |
 
+## Accessibility and ARIA landmarks
+
+Due to the [recommendation that all content be rendering into ARIA landmark regions](https://dequeuniversity.com/rules/axe/4.7/region), the hero element should be a `<section>` element with an unique aria-label (or aria-labelled by).
+
 ## Advanced topic - switching layouts on the fly
 
 Because layouts generally contain the same elements and because the current layout is determined by a singular class on the `.layout` element, changing layout is as easy as swapping out a class.