Unveiling the Advantages of Semantic HTML Elements for Accessibility

Here’s something you might encounter:

Custom Button

This is a code smell that catches my attention because there’s a semantic element available. There’s also a discussion about mixing anchors (e.g., we have a guide on it.

A semantic

element is preferable over a

due to semantics. Some semantic benefits of a

include:

• Interactive states
• Focus indicators
• Keyboard support

However, I struggle to clearly define these benefits. They’re more like retained talking points than clear reasons for choosing

over

. But as I go through Sara Soueidan’s Practical Accessibility course, I’m understanding why

is a best practice.

Let’s compare the two approaches:

Did you know you can inspect the semantics of these directly in DevTools? I didn’t know this before watching Sara’s course.

Post Tags: #accessibility#articles#benefits#code#course#custom#discussion#focus#go#guide#html#html elements#it#keyboard#practice#semantics#support