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.
Using valid, semantic HTML is one of the most impactful ways to make your site more accessible. Writing semantic HTML means using the HTML element with the most specific, correct meaning for your task. For example, if you’re building a button, use a <button> element. With CSS and JavaScript you could make just about any element, e.g. a
, 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>
Curated by (Lifekludger) Read full article at Source
life tools 