HTML / Accessibility
Every HTML element has a purpose; use them wisely
Choose elements for their meaning and built-in behaviour before deciding how they should look.
HTML elements describe different kinds of content and interaction. Choosing the right element gives browsers and assistive technology a useful starting point.
Distinguish actions from destinations
<a href="/articles">Read the articles</a>
<button type="button">Pause animation</button>
A link navigates to a resource. A button performs an action. Styling one to resemble the other does not change this distinction.
Keep generic containers available
A div is appropriate for a layout group with no semantic meaning. A section represents a thematic group, generally with a heading. An article represents a self-contained composition.
Use lists for collections, labels for form controls and headings for document structure. Do not choose a heading level just because its default size looks right.
Semantic markup does not guarantee accessibility or search ranking. Test the complete interaction, including keyboard operation, focus visibility and understandable labels.