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.
, look like a button, but it won’t be a button.
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):do something<a href="#" class="btn" onclick="alert('something')">do something</a><button type="button" class="btn" onclick="alert('something')">do something</button>