Accessible structure starts with ordinary HTML. Use headings, links, buttons and form labels to communicate what a page contains and what each control does, before adding visual styling.
Describe the structure with native elements
Use main for the main content, nav for a group of navigation links and meaningful heading levels for sections. A heading should describe the section that follows. Choosing an h2 because it looks smaller than an h1 mixes presentation with structure; control the appearance with CSS instead.
Match the element to the action
A link takes someone to a destination. A button performs an action, such as opening a dialog or submitting a form. A styled div does not automatically gain keyboard behaviour, focus handling or an accessible name. Native elements provide a stronger starting point, although the surrounding design still needs testing.
Label inputs and preserve keyboard access
Associate a visible label with its input using matching for and id values. Placeholder text disappears while typing and should not be the only label. Test the page with Tab and Shift+Tab, keep focus visible and ensure an error explains how to recover. Images need alternative text appropriate to their purpose; purely decorative images can use an empty alt attribute.
Worked example
A contact form can be understood without its colours or icons: the heading explains the section, the label names the email field and the button states the action. Open it in a browser and check that selecting the label focuses the input.
<main>
<h1>Contact the team</h1>
<form>
<label for="email">Email address</label>
<input id="email" name="email" type="email" required>
<button type="submit">Send message</button>
</form>
</main>Check your understanding
Try each question before opening its explanation. These are free practice prompts; they do not use game chances.
Should a navigation link be a button?
Normally no. Use an anchor with a real href for navigation so users can copy, open or bookmark the destination. Use a button for an action within the page.
Does adding ARIA fix every accessibility problem?
No. Accessible names and roles matter, but they do not repair missing keyboard interactions, poor reading order or unclear instructions. Start with suitable native HTML and test the complete task.
What is wrong with a placeholder-only email field?
Its instruction vanishes when the user types and may not provide a reliable persistent label. Add a visible associated label, then use a placeholder only for optional supplementary guidance.
Sources and further reading
These original examples explain foundational concepts. Use the official references for complete, current details and version-specific behaviour.
About this guide: AI-assisted educational content with original examples and linked primary references. Found an issue? Tell us what to improve.