Make your HTML easier for everyone to use

One idea at a time

People use pages in different ways: a keyboard, a touch screen, magnification, or a screen reader. Accessible HTML gives them useful structure and names. Keyboard focus is the element that receives your next keypress; browsers usually mark it with an outline. Accessibility is part of writing the page, not a final decoration. A page can look clear while still making navigation or form controls difficult to understand.

Use a real link for navigation and a real button for an action. These elements bring keyboard behavior that a clickable paragraph does not have. Give links text that identifies their destination. A list of repeated Click here links is difficult to understand without the surrounding paragraphs.

Labels should remain visible when a user enters text. For images, describe the information or function they contribute in context. An empty alt value is appropriate for a purely decorative image; leaving out alt is not the same thing. If an image is the only content of a link, its alternative text should explain the link's destination.

The example reuses a, nav, and main from the earlier lessons. A textarea is the multi-line text field introduced in the forms lesson; connect its label with matching for and id values, and keep its closing tag even when it starts empty. The skip link points to main's id. tabindex="-1" lets main receive focus without adding it to the normal Tab sequence, so it can serve as the skip-link destination.

Make names and destinations work together

Walk through an example

<a href="#main">Skip to main content</a>
<nav aria-label="Main"><a href="#recipe">Read the pancake recipe</a></nav>
<main id="main" tabindex="-1">
  <h1 id="recipe">Pancakes</h1>
  <p>A simple weekend breakfast.</p>
  <label for="comment">Your cooking note</label>
  <textarea id="comment" name="comment"></textarea>
</main>

Tab reaches the skip link before the navigation. Activating it moves to main so the reader can bypass repeated navigation. tabindex=-1 allows main to receive focus without adding it to the ordinary Tab sequence. The textarea has a visible associated label, so clicking the words focuses the control.

See it happen: try a small change

<a href="#main">Skip to main content</a>
<nav aria-label="Main">
<a href="#notes">Click here</a>
</nav>
<main aria-label="Lesson example" id="main" tabindex="-1">
<h1 id="notes">Garden notes</h1>
<p>Three seeds sprouted.</p>
<label for="note">New observation</label>
<textarea id="note" name="note">
</textarea>
</main>

Try a small accessibility review

Start at the top and use Tab to move forward, Shift+Tab to move backward, and Enter to follow a link. Look for a visible focus indicator and a sensible order. Do not add positive tabindex values to force a visual order; keep the document itself in a logical reading order.

Read the headings on their own. They should outline the content. Then read the link text without its surrounding sentences: does each link still communicate a destination? Finally, inspect image alternatives and try clicking form labels. These small checks catch useful problems, but they are not a complete accessibility audit.

Clean indentation helps you and other authors maintain the HTML. Lowercase tag names are a consistent convention, not what makes a page accessible. Automated validation can find markup errors, while human checks are still needed to decide whether a description or reading order makes sense.

Try it in your browser

Add the skip link before your page navigation and give the existing main the matching id and tabindex. Keep one main region. Save and refresh, then press Tab until the skip link has focus and press Enter. Continue with Tab and Shift+Tab to check that you can reach the notes field without using a pointer.

A common wrong turn

Placeholder text disappears when someone types and should not replace a visible label. Also avoid removing the focus outline merely because you dislike its appearance. Keyboard users need to know which control will respond next.

Change one thing

Use the keyboard to activate the skip link, then click the textarea label. Compare descriptive link text with vague link text in the preview. Explain the improvement without referring to color.

Go to the source

• MDN: Make your HTML easier for everyone to use ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.