Skip to content

Instantly share code, notes, and snippets.

@luismartinezs

luismartinezs/landmarks.html

Last active September 5, 2022 13:31
Show Gist options
  • Save luismartinezs/736e6ca32a89f900dca89e593a414097 to your computer and use it in GitHub Desktop.
Save luismartinezs/736e6ca32a89f900dca89e593a414097 to your computer and use it in GitHub Desktop.
Download ZIP
Landmarks page example #a11y
Raw
landmarks.html
<!-- https://scottaohara.github.io/landmarks_demo/ -->
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head>
<meta charset="utf-8" />
<title>Landmarks Demonstration</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
// remove no-js and add 'js' to the HTML
document.documentElement.className =
document.documentElement.className.replace("no-js", "js");
</script>
<style>
*,
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: arial;
}
* {
margin-bottom: 0;
}
body,
html {
background: #fafafa;
color: #450c13;
font-size: 18px;
line-height: 1.3;
margin: 0;
padding: 0;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
.content-area {
padding: 1.5em;
margin: auto;
max-width: 800px;
}
a {
color: #921c2b;
}
a:focus,
a:hover {
color: #c12f48;
outline: solid 2px;
}
p {
margin: 0 0 1.25em;
}
h1 {
margin-bottom: 0.5em;
}
code {
font-weight: 700;
background: #eee;
}
p:last-child {
margin: 0;
}
details,
details div {
margin-top: 0.5em;
}
h1,
h2,
h3 {
margin-top: 0;
}
h1 + p,
h1 + p:last-child,
h2 + p,
h2 + p:last-child,
h3 + p,
h3 + p:last-child {
margin-top: 1.25em;
}
aside,
header,
main {
border-bottom: 1px solid;
}
.nav-search {
max-width: 800px;
padding: 1.125em;
margin: auto;
}
.nav-search li {
flex: 1 0;
text-align: center;
}
.nav-search nav {
flex: 1 0;
margin-bottom: 1.25em;
}
.nav-search ul {
display: flex;
padding: 0;
list-style: none;
margin: 0 0 0 -0.25em;
}
.nav-search a {
display: block;
padding: 0.45em 0.5em;
border: 1px solid;
margin: 0 0.25em;
}
@media screen and (min-width: 600px) {
.nav-search {
display: flex;
align-items: center;
}
.nav-search nav {
margin: 0;
}
.nav-search > div {
flex-grow: 0;
padding-left: 1em;
}
}
button,
input,
select,
textarea {
border-radius: 0;
box-sizing: border-box;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: normal;
margin: 0;
overflow: visible;
text-transform: none;
}
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
font-family: inherit;
font-size: inherit;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
[role="search"] {
border: 1px solid #565656;
display: block;
padding-right: 2.5em;
position: relative;
}
[role="search"] svg {
display: block;
fill: #fff;
}
[role="search"] > input[type="search"] {
border: 0;
border-right: 1px solid #565656;
padding: 0.5em;
width: 100%;
}
[role="search"] > [type="submit"] {
background: #a0001e;
border: 0;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 2.5em;
}
[role="search"] > [type="submit"]:focus,
[role="search"] > [type="submit"]:hover,
[role="search"] > input[type="search"]:focus {
box-shadow: inset 0 0 0 1px #a0001e;
outline: #a0001e solid 1px;
outline-offset: 0;
}
[role="search"] > input[type="search"]:focus {
border-right-color: #450c13;
}
[role="search"] > [type="submit"]:focus,
[role="search"] > [type="submit"]:hover {
background: #450c13;
}
[role="search"] > [type="submit"]:focus svg,
[role="search"] > [type="submit"]:hover svg {
fill: #fff;
}
/**
* For browsers that support focus within,
* show off an outline around each of the different
* landmarks in the document.
*/
header:focus-within,
footer:focus-within,
main:focus-within,
aside:focus-within,
nav:focus-within {
box-shadow: inset 0 0 0 4px blue;
}
[role="search"]:focus-within {
box-shadow: 0 0 0 4px blue;
}
</style>
</head>
<body id="body">
<header>
<div class="content-area">
<p style="font-size: 1.75em; margin: 0">Pretend_Imma_logo</p>
<details>
<summary>Header/Banner information</summary>
<div>
<p>
A <code>header</code> receives a <code>role="banner"</code> if it
is the closest <code>header</code> scoped to the
<code>body</code> element.
</p>
<p>
A <code>banner</code> landmark typically contains global
information to a site/application and can house other landmarks
like <code>navigation</code> and <code>search</code>.
</p>
<p>
There is no heading element in this <code>header</code>, and
that's a-ok. The <code>h1</code> is far more useful setting the
primary topic of a document, than it is housing brand
identification.
</p>
</div>
</details>
</div>
<div class="nav-search">
<nav aria-label="ARIA specification links">
<ul>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#banner">Banner</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#search">Search</a>
</li>
<li>
<a href="https://www.w3.org/TR/wai-aria-1.1/#navigation"
>Navigation</a
>
</li>
</ul>
</nav>
<div>
<form role="search">
<input type="search" id="srch" name="srch" title="Search Site" />
<button type="submit" aria-label="Search">
<svg
style="max-width: 100px"
viewBox="50 461 23 23"
aria-hidden="true"
focusable="false"
>
<path
d="M65.7857143,470.571429 C65.7857143,468.919635 65.1986666,467.506702 64.0245536,466.332589 C62.8504406,465.158476 61.4375083,464.571429 59.7857143,464.571429 C58.1339203,464.571429 56.720988,465.158476 55.546875,466.332589 C54.372762,467.506702 53.7857143,468.919635 53.7857143,470.571429 C53.7857143,472.223223 54.372762,473.636155 55.546875,474.810268 C56.720988,475.984381 58.1339203,476.571429 59.7857143,476.571429 C61.4375083,476.571429 62.8504406,475.984381 64.0245536,474.810268 C65.1986666,473.636155 65.7857143,472.223223 65.7857143,470.571429 Z M72.6428571,481.714286 C72.6428571,482.178574 72.473216,482.580355 72.1339286,482.919643 C71.7946412,483.25893 71.3928595,483.428571 70.9285714,483.428571 C70.4464262,483.428571 70.0446445,483.25893 69.7232143,482.919643 L65.1294643,478.339286 C63.531242,479.446434 61.7500098,480 59.7857143,480 C58.5089222,480 57.2879523,479.752235 56.1227679,479.256696 C54.9575835,478.761158 53.9531292,478.091522 53.109375,477.247768 C52.2656208,476.404014 51.5959846,475.399559 51.1004464,474.234375 C50.6049082,473.069191 50.3571429,471.848221 50.3571429,470.571429 C50.3571429,469.294636 50.6049082,468.073667 51.1004464,466.908482 C51.5959846,465.743298 52.2656208,464.738844 53.109375,463.895089 C53.9531292,463.051335 54.9575835,462.381699 56.1227679,461.886161 C57.2879523,461.390623 58.5089222,461.142857 59.7857143,461.142857 C61.0625064,461.142857 62.2834763,461.390623 63.4486607,461.886161 C64.6138451,462.381699 65.6182994,463.051335 66.4620536,463.895089 C67.3058078,464.738844 67.975444,465.743298 68.4709821,466.908482 C68.9665203,468.073667 69.2142857,469.294636 69.2142857,470.571429 C69.2142857,472.535724 68.6607198,474.316956 67.5535714,475.915179 L72.1473214,480.508929 C72.4776802,480.839287 72.6428571,481.241069 72.6428571,481.714286 Z"
id="icon_search"
stroke="none"
fill-rule="evenodd"
></path>
</svg>
</button>
</form>
</div>
</div>
</header>
<main id="site_main" aria-label="content">
<div class="content-area">
<h1>Welcome to the main</h1>
<p>
The <code>main</code> landmark wraps the primary content of a
document.
</p>
<p>
<a
href="https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html"
>Read more about <code>main</code></a
>.
</p>
<article aria-labelledby="article_heading">
<h2 id="article_heading">Article Heading</h2>
<p>
<code>article</code>s are not landmarks. However, they may be
surfaced by certain screen readers, especially if given an
accessible name.
</p>
<p>
VoiceOver + Safari on macOS will surface articles that have been
given an accessible name in an "articles" router menu. You can give
an <code>article</code> an accessible name by setting an
<code>aria-label</code> or
<code>aria-labelledby="..."</code> attribute.
</p>
<p>
<a
href="https://www.w3.org/TR/html/sections.html#the-article-element"
>Read more about <code>articles</code></a
>
</p>
</article>
<div role="region" aria-label="Important area" style="margin-top: 2em">
<h2>Region Heading</h2>
<p>
Using a <code>role="region"</code> creates a generic sort of
landmark that can be used to promote an important section of
content, that would not be better classified under one of the more
specifically named landmarks.
</p>
<p>
The usage of <code>region</code>s should be limited, as adding more
"important" areas to a page conversely decreases the importance of
other areas of the same page.
</p>
<p>
<a href="https://www.w3.org/TR/wai-aria-1.1/#region"
>Read more about <code>region</code>s</a
>.
</p>
</div>
<form role="form" aria-labelledby="dummy" style="margin-top: 2em">
<h2 style="font-size: 1.125em; margin-bottom: 1em" id="dummy">
A dummy form
</h2>
<label for="name"> Your Name: </label>
<div>
<input type="text" id="name" readonly />
</div>
<p style="margin-top: 1.2em">
An example form to showcase it as a landmark. Nothing to submit
here...
</p>
<button type="submit" disabled>This button don't work</button>
</form>
<section aria-label="A section" style="margin-top: 2em">
<h2>A section that was given an accessible name</h2>
<p>
Another way to create a <code>region</code> landmark is by providing
a <code>section</code>
element with an accessible name.
</p>
</section>
</div>
</main>
<aside aria-label="content">
<div class="content-area">
<h2 style="font-size: 1.25em">Just an aside</h2>
<p>
An <code>aside</code> is treated as a
<code>complementary</code> landmark. The content should be able to
stand on its own, but would be considered related and useful to the
content that which it expands upon.
</p>
<p>
<a href="https://www.w3.org/TR/wai-aria-1.1/#complementary"
>Read more about <code>complementary</code></a
>.
</p>
</div>
</aside>
<footer role="contentinfo">
<div class="content-area">
<h2 style="font-size: 1.125em">This is the footer</h2>
<p>
Prior to Safari 13, VoiceOver on macOS did not recognize a
<code>footer</code>, as a direct child of the
<code>body</code> element, as a valid landmark.
</p>
<p>
This could have been fixed by using <code>role="contentinfo"</code>,
but should no longer be necessary.
</p>
<p>
<a href="https://www.w3.org/TR/wai-aria-1.1/#contentinfo"
>Read more about <code>contentinfo</code></a
>.
</p>
<hr />
<p>
Check out the
<a href="https://github.com/scottaohara/landmarks_demo"
>source for this document on GitHub</a
>.
</p>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment