Module 13: Accessibility-First HTML
Semantic HTML as an Accessibility Foundation
Understand why native HTML elements are usually the best starting point for accessible interfaces.
Accessibility is not a final visual polish step. The structure of a page affects how people using keyboards, screen readers, voice control, magnification, and other tools understand and operate it.
A native button already knows how to receive keyboard focus and respond to common activation keys. A link already behaves as navigation. A heading is exposed as a heading. Recreating these behaviors with generic div elements requires extra code and is easy to get wrong.
<button type="button">Open filters</button>
<a href="/help/">Read the help guide</a>
Ask what the user is trying to do. If the action navigates, use a link. If it changes something on the current page, use a button. If the user is entering information, use a form control with a label.
Then test the page without a mouse. Can you reach every control? Is the focus visible? Can you understand the page from its headings and landmarks? Do form errors explain what needs to change? Semantic HTML does not solve every accessibility problem, but it removes many avoidable ones before CSS and JavaScript are added.