Accessibility

<header>
   <h1>Three words</h1>
    <nav>
      <a>one word</a>
      <a>one word</a>
      <a>one word</a>
      <a>one word</a>
    </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
   <h2>three words</h2>
   <p>forty-six words</p>
   <p>forty-four words</p>
  </section>
  <section>
   <h2>seven words</h2>
   <p>sixty-eight words</p>
   <p>forty-four words</p>
  </section>
</main>
<footer>
   <p>five words</p>
</footer>

/* Add more selectors inside the :is rule if needed */
:is(a, button, input, textarea, summary) {
    --outline-size: max(2px, 0.08em);
    --outline-style: solid;
    --outline-color: currentColor;
}

:is(a, button, input, textarea, summary):focus {
    outline:
      var(--outline-size)
      var(--outline-style)
      var(--outline-color);
    outline-offset: var(--outline-offset, var(--outline-size));
}

@supports selector(:focus-visible) {
  *:focus {
      outline: none
  }

  *:focus-visible {
      outline:
        var(--outline-size)
        var(--outline-style)
        var(--outline-color);
      outline-offset: var(--outline-offset, var(--outline-size));
  }
}

<button>
  <svg class="icon">
    <use xlink:href="#icon-1" />
  </svg>
  <span class="tooltip hidden">Open menu</span>
</button>

<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="../../">
        ARIA States and Properties
      </a>
    </li>
    <li>
      <a href="./" aria-current="page">
        ARIA: `aria-current` attribute
      </a>
    </li>
  </ol>
</nav>

<img src="dinosaur.png" aria-labelledby="dino-label">
<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>

<figure>
  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
  <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption>
</figure>

Check out our guide to web performance <a href="/guide">here</a>.

Check out <a href="/guide">our guide to web performance</a>.

<header>
	<nav>...</nav>
</header>
<main>
	<section aria-label="Introduction to stamp collecting">
    <p>Stamp collecting, also known as philately, is
    the study of postage stamps, stamped envelopes,
    postmarks, postcards, and other materials relating
    to postal delivery.</p>
	</section>
</main>
<footer>
	<p>© 2022 - Stamps R Awesome</p>
</footer>

<header>
  <h1>Stamp Collecting</h1>
</header>
<main>
	<section aria-label="Introduction to Stamp Collecting">
		<h2>What is Stamp Collecting?</h2>
		<p>Stamp collecting, also known as philately, is the study of postage stamps, stamped envelopes, postmarks, postcards, and other materials related to postal delivery.</p>
	</section>

	<section aria-label="Starting a Stamp Collection">
		<h2>How to Start a Stamp Collection</h2>
    <h3>Required Equipment</h3>
    <p>...</p>

    <h3>Acquiring Stamps</h3>
    <p>...</p>

    <h3>Joining Organizations</h3>
		<p>...</p>
	</section>
</main>

<iframe title="Google Pixel - Lizzo in Real Tone"
  src="https://www.youtube.com/embed/3obixhGZ5ds"
  scrolling="auto">
</iframe>

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>

<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

<form>
  <label>
    Username:
    <input type="text">
  </label>
	<input type="image"alt="Sign in" src="./sign-in-button.png">
</form>

<form>
	<div>
		<label aria-describedby="name-description" for="promo">Name</label>
		<input id="promo" type="text" />
		<p id="name-description">Your surname and family name</p>
	</div>
</form>

<p>
  <label for="email">Email address:</label>
  <input
    type="email"
    name="email"
    id="email"
    aria-invalid="true"
    aria-errormessage="err1" />
  <span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

<header>
  <h1>Header</h1>
</header>

<nav>
  <!-- main navigation in here -->
</nav>

<!-- Here is our page's main content -->
<main>

  <!-- It contains an article -->
  <article>
    <h2>Article heading</h2>

    <!-- article content in here -->
  </article>

  <aside>
    <h2>Related</h2>

    <!-- aside content in here -->
  </aside>

</main>

<!-- And here is our main footer that is used across all the pages of our website -->

<footer>
  <!-- footer content in here -->
</footer>

<div role="button">Self-destruct</div>

<div role="button" aria-describedby="more-info">Self-destruct</div>
<div id="more-info">This page will self-destruct in 10 seconds.</div>

<div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

<div id="more-info">
  This page will self-destruct in 10 seconds.
</div>

<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>

<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>

<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>