Step 7: Accessibility polish and finish

The last step is polish. Add a skip link so keyboard users can jump past the navigation, and a clear focus outline so they can see where they are. Then run through the checklist below.

Examplehtml

<style>
:root { --bg: #ffffff; --fg: #1f2330; --accent: #0b6b4a; --card: #f1f3f5; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.6; background: var(--bg); color: var(--fg); }
header { background: var(--accent); color: #fff; padding: 28px 20px; text-align: center; }
header h1 { margin: 0; font-size: 2rem; }
nav { margin-top: 12px; }
nav a { color: #fff; margin: 0 10px; font-weight: 600; }
main { max-width: 860px; margin: 0 auto; padding: 20px; }
h2 { border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 2px; }
footer { text-align: center; padding: 20px; color: #5b6270; }
#projects .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
article { background: var(--card); padding: 16px; border-radius: 10px; border-top: 4px solid var(--accent); }
article h3 { margin-top: 0; }
@media (max-width: 640px) {
  #projects .cards { grid-template-columns: 1fr; }
  nav { display: flex; flex-direction: column; gap: 6px; }
  nav a { margin: 0; }
  header h1 { font-size: 1.6rem; }
}
body.dark { --bg: #14161d; --fg: #e8eaf0; --card: #20232d; --accent: #3ddc97; }
body.dark header { color: #0b0d12; }
body.dark nav a { color: #0b0d12; }
#theme { position: fixed; top: 10px; right: 10px; padding: 6px 12px; border-radius: 6px; border: 0; cursor: pointer; background: #ffffffcc; color: #111; }
form { display: grid; gap: 10px; max-width: 420px; }
label { font-weight: 600; }
input, textarea { padding: 8px; border: 2px solid #8a90a0; border-radius: 6px; font: inherit; background: var(--bg); color: var(--fg); }
input.invalid, textarea.invalid { border-color: #c62828; }
.error { color: #c62828; min-height: 1.2em; margin: 0; }
body.dark .error { color: #ff8a80; }
button.send { background: var(--accent); color: #fff; border: 0; padding: 10px 16px; border-radius: 6px; cursor: pointer; font-weight: 700; }
body.dark button.send { color: #0b0d12; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: #ffd54a; color: #000; padding: 6px 10px; z-index: 10; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #ffb300; outline-offset: 2px; }
</style>
<a class="skip" href="#about">Skip to content</a>
<button id="theme" aria-pressed="false">Dark mode</button>
<header>
  <h1>Ada Lovelace</h1>
  <p>Front-end developer in London</p>
  <nav aria-label="Main">
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section id="about">
    <h2>About me</h2>
    <p>I build fast, friendly websites and I love teaching others how the web works.</p>
  </section>
  <section id="projects">
    <h2>Projects</h2>
    <div class="cards">
    <article><h3>Weather app</h3><p>A small app that shows the forecast.</p></article>
    <article><h3>Recipe finder</h3><p>Search recipes by ingredient.</p></article>
    <article><h3>Quiz game</h3><p>Test your web knowledge.</p></article>
    </div>
  </section>
  <section id="contact">
    <h2>Contact</h2>
    <p>Say hello: ada@example.com, or use the form.</p>
    <form id="contact-form" novalidate>
      <label for="name">Name</label>
      <input id="name" name="name" autocomplete="name">
      <p class="error" id="name-error" role="alert"></p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email">
      <p class="error" id="email-error" role="alert"></p>
      <label for="msg">Message</label>
      <textarea id="msg" name="msg" rows="3"></textarea>
      <p class="error" id="msg-error" role="alert"></p>
      <button class="send">Send message</button>
      <p id="status" role="status"></p>
    </form>
  </section>
</main>
<footer><small>&copy; 2026 Ada Lovelace</small></footer>
<script>
var themeBtn = document.getElementById("theme");
function applyTheme(dark) {
  document.body.classList.toggle("dark", dark);
  themeBtn.setAttribute("aria-pressed", String(dark));
  themeBtn.textContent = dark ? "Light mode" : "Dark mode";
}
themeBtn.addEventListener("click", function () {
  applyTheme(!document.body.classList.contains("dark"));
});
function isValidEmail(text) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(text.trim());
}
function check(id, ok, message) {
  var field = document.getElementById(id);
  document.getElementById(id + "-error").textContent = ok ? "" : message;
  field.classList.toggle("invalid", !ok);
  return ok;
}
document.getElementById("contact-form").addEventListener("submit", function (e) {
  e.preventDefault();
  var okName = check("name", document.getElementById("name").value.trim().length >= 2, "Please enter your name.");
  var okEmail = check("email", isValidEmail(document.getElementById("email").value), "Enter a valid email address.");
  var okMsg = check("msg", document.getElementById("msg").value.trim().length >= 10, "Write at least 10 characters.");
  document.getElementById("status").textContent = okName && okEmail && okMsg ? "Thanks! Your message is ready to send." : "";
});
</script>

Open in editor »

Final checklist: one h1; headings in order; every field has a label; colours have enough contrast; the page works at phone width; every interactive thing works with the keyboard (try pressing Tab); links say where they go. You now have a complete, accessible, responsive page. To publish it, save it as index.html and upload it to any static host.

Going further: replace the three placeholder projects with real ones, add images with alt text, add a favicon and a <title>, and link your own profiles.

Quick check

What is the purpose of a skip link?

Lets keyboard users jump past repeated navigationSkips the footerOpens a new tab

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.