HTML Tutorial / Accessibility Basics: Headings, Links, Images, and Keyboard

Accessible HTML starts with choosing elements for their meaning. Use headings in a logical order, write links that reveal their destination, give images appropriate alternatives, and make sure people can complete interactions with a keyboard.

Use headings to describe hierarchy

A heading is not merely large text. It marks a level in the document: a page topic may use h1, major sections h2, and their subsections h3. Do not jump to h4 because you like its default size; adjust appearance with CSS. Someone reading only the headings should be able to understand the page's outline.

For example, “Delivery information” can be a main section, with “Delivery areas” and “Delivery times” as subsections. Avoid empty headings or headings that do not match the text below. The heading hierarchy helps people scan visually and navigate with assistive technology.

Make links and images understandable

A list of links all named “here” gives little clue about their destinations. Write the purpose in the link text, as in <a href="guide.html">Read the user guide</a>. If the link downloads a file, make its type clear in the surrounding context.

An informative image's alt text should convey the information it contributes here. A purely decorative image that repeats nearby text may use alt="". An image used as a link must also convey the link's purpose, such as “Open the user guide.” Avoid listing every visible color or shape when the function is what matters. The W3C WAI image decision tree helps decide which alternative is appropriate.

Try the page without a mouse

1. Use Tab to move through links, form fields, and buttons.
2. Check that the focused element is visibly identifiable.
3. Activate controls using Enter or Space as appropriate.
4. If a form reports an error, read it, return to the field, correct the value, and submit again.

A div with only a click handler does not automatically gain a button's meaning or keyboard behavior. Use a for navigation and button for actions. If a menu or disclosure opens and closes, check where keyboard focus moves afterward. Focus should not disappear into hidden content, and the navigation order should roughly match the reading order.

Typically, a focused link opens with Enter, while a button activates with Enter or Space. Choosing an element that matches navigation or action gives keyboard users the behavior they expect, rather than forcing a link to imitate a button or vice versa.

Understand what testing can and cannot prove

An automated checker can find some markup errors, but it cannot always judge whether a link is understandable or an image description is useful in context. Combine tool results with keyboard testing, zooming, and, when appropriate, a screen reader. Start with the site's important user journeys rather than treating a zero-error report as a guarantee. The MDN guide to HTML accessibility covers more native HTML patterns.