Semantic HTML and accessibility basics, with a responsive page skeleton

Semantic HTML means using the element that describes what something is: a <button> for a button, a <nav> for navigation. Browsers, search engines, and assistive technology such as screen readers rely on that meaning, so good structure gives you much of accessibility for free.

A minimal responsive skeleton

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact us | Example Shop</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <header>
    <a href="/">Example Shop</a>
    <nav aria-label="Main">
      <ul>
        <li><a href="/products">Products</a></li>
        <li><a href="/contact" aria-current="page">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main id="main">
    <h1>Contact us</h1>
    <img src="team.jpg" alt="Our support team at the front desk" width="800" height="450">

    <form>
      <label for="email">Email</label>
      <input id="email" name="email" type="email" autocomplete="email" required>

      <label for="message">Message</label>
      <textarea id="message" name="message" rows="5"></textarea>

      <button type="submit">Send</button>
    </form>
  </main>

  <footer>
    <p>Example Shop</p>
  </footer>
</body>
</html>

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #ffffff;
}

main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
img  { max-width: 100%; height: auto; }

label, input, textarea { display: block; width: 100%; }
input, textarea { margin-bottom: 1rem; font: inherit; padding: 0.5rem; }

:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem; }

The viewport meta tag makes phones render the page at device width instead of shrinking a desktop layout. max-width: 100% stops images from overflowing small screens, and setting width and height attributes lets the browser reserve space so the layout does not jump while images load.

Structure: landmarks and headings

• Use <header>, <nav>, <main>, <aside>, and <footer>. Screen reader users can jump between these landmarks.
• Have one <h1> describing the page, then <h2> for sections and <h3> inside those, without skipping levels. Pick headings by meaning; change their size with CSS.
• Set lang on <html> so screen readers use the right pronunciation.

Forms need labels

Every input needs a visible <label> whose for matches the input’s id. Clicking the label then focuses the field, and screen readers announce it. Placeholder text is not a label: it disappears as you type and is often low contrast.

Images need alt text

• Describe what the image conveys in context: alt="Line chart: sign-ups doubled in March".
• Purely decorative images get an empty alt="" so screen readers skip them. Do not omit the attribute.
• Do not start with “image of”; the screen reader already announces it as an image.

Keyboard and focus

Everything clickable must work with the keyboard. Use <button> for actions and <a href> for navigation; a <div onclick> cannot be focused or activated with Enter or Space without extra work. Never remove focus outlines without replacing them; :focus-visible shows them for keyboard users without bothering mouse users. Try your page using only Tab, Shift+Tab, Enter, and Space.

Color contrast

WCAG level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and for important UI parts such as input borders and focus indicators. Browser DevTools show the ratio in the color picker. Do not rely on color alone; pair a red error border with an error message.

Reach for ARIA last

ARIA attributes such as aria-label and aria-current fill gaps that HTML cannot express, but a native element is almost always better than a <div> with ARIA roles. Check your work with an automated audit such as Lighthouse in Chrome DevTools, then with a real screen reader: VoiceOver on macOS or NVDA on Windows.