What is the role of semantic HTML in accessibility, and which elements should you prioritize?

Question

Accepted Answer

Semantic HTML means using HTML elements for their meaning rather than their appearance. It is the foundation of web accessibility.

This matters because assistive technologies like screen readers interpret HTML structure to present content to users. A button created with a button tag will automatically be announced as a button, be keyboard focusable, and activatable with Enter or Space. A div styled to look like a button will be none of these without additional work.

Structural elements called landmarks allow screen reader users to quickly navigate between sections. These include header for site or section header. Nav for main navigation. Main for primary content, which should appear only once per page. Footer for the page footer. Aside for complementary content. Section and article for structuring content.

Native interactive elements should be used appropriately. Use button for actions, a for navigation links, input with appropriate types for forms, and select for dropdown lists.

Heading hierarchy using h1 through h6 should form a logical hierarchy without skipping levels. A screen reader user can navigate heading by heading to understand page structure.

Lists use ul for unordered lists, ol for ordered lists, and dl for definition lists. Screen readers announce the number of items in a list.

The golden rule is this. Before using div or span with ARIA, ask if there is a native HTML element that already fulfills this function. The first rule of ARIA is precisely to not use ARIA if you can use native HTML.