Semantic HTML as an Accessibility Foundation
Use native landmarks, headings, links, buttons and form labels to create a stronger accessibility base.
Introduction
Semantic HTML communicates purpose through the element itself. A button already supports keyboard activation, a heading contributes to document structure and a label names a form control. Starting with the correct element gives browsers and assistive technologies dependable information before any ARIA attribute is added.
How the topic works
Use one main landmark for primary content and descriptive header, nav, section and footer regions where appropriate. Headings should describe the hierarchy rather than serve as text-size shortcuts. Links navigate to a location; buttons perform an action. Every input needs a programmatically associated label, and errors should identify both the problem and the correction.
Practical workflow
- Read the unstyled document and outline its landmarks and heading hierarchy.
- Replace clickable div elements with native links or buttons according to behaviour.
- Associate every form control with a visible label and useful instructions.
- Navigate in a logical sequence using only the keyboard.
- Run an automated check, then manually verify names, roles and states.
Tools and technologies
- Browser accessibility tree
- Keyboard-only testing
- An automated accessibility checker
Example
A “Save settings” div with a click handler should become a button. It then receives focus and keyboard activation by default. If saving is asynchronous, a nearby status region can announce whether the operation succeeded without moving focus unexpectedly.
Common mistakes
- Choosing heading levels based only on appearance
- Adding button roles while missing keyboard behaviour
- Using placeholder text as the only form label
Security and best practice
Prefer native elements before ARIA. Keep visible focus, do not trap keyboard users, and test at browser zoom rather than fixing layouts to one text size.
Portfolio task
Key takeaways
- Native semantics provide behaviour and meaning.
- Heading order represents structure, not decoration.
- Automation supports but does not replace manual testing.