Semantic HTML means it's semantic, right? Right?

What if your semantic HTML isn't actually accessible? Learn why common tags fail in screen readers and how to verify your code in the accessibility tree.

#1about 6 minutes

How browsers create the accessibility tree from HTML

Browsers parse HTML into the DOM for visual display and simultaneously create an accessibility tree to convey semantic information to assistive technologies.

#2about 2 minutes

Categorizing semantic HTML as good, bad, or ugly

Semantic HTML elements can be categorized as good (meaningful and accessible), bad (non-semantic like divs), or ugly (semantic but with accessibility caveats).

#3about 3 minutes

Making the section element accessible with ARIA labels

A section element is ignored by the accessibility tree unless it is given an accessible name via an `aria-label` or `aria-labelledby`, which promotes it to a landmark region.

#4about 2 minutes

How context affects header and footer accessibility

The header and footer elements are only exposed as landmarks to assistive technologies when they are direct children of the body element.

#5about 2 minutes

Using anchor tags for navigation and buttons for actions

Anchor tags should be used for navigation to a new page or location, while buttons should be used to perform an on-page action to meet user expectations.

#6about 2 minutes

Why text styling tags are ignored by screen readers

Semantic tags for emphasis or importance like ``, ``, ``, and `` are not audibly announced by screen readers, requiring alternative methods to convey meaning.

#7about 3 minutes

The inconsistent screen reader support for del and ins tags

The `<del>` and `<ins>` elements, often used for pricing, have improving but still unreliable support across screen readers and browsers, which can lead to confusion.

#8about 2 minutes

Accessibility issues with hr, br, and abbr tags

Elements like `<hr>`, ` `, and `<abbr>` can create disruptive experiences or have unreliable support, demonstrating that browser compatibility does not equal screen reader compatibility.

#9about 1 minute