This is the fourth post in a series on accessibility from Shopify’s UX team. We’re publishing posts every two weeks. Check out the introduction.
This being is the reason semantic HTML is important for accessibility. Browsers have different behaviour depending on what an element is, not what it looks like. These differences can have a big impact on user experience.
How semantic HTML affects users
Consider this example (also available as a CodePen):<div class="btn" onclick="alert('something')">do something</div><a href="#" class="btn" onclick="alert('something')">do something</a><button type="button" class="btn" onclick="alert('something')">do something</button>