Published on 10 October 2017 | 2 minute read Semantics and accessibility

I used to think semantics was only about getting that little W3C badge on your website. I thought it was bragging rights.

In the past, I've been guilty of using DIV's for everything. I've also been guilty of changing a H1 to a H2, because I needed it to be smaller.

As designers, we always like to put our stamp on things. We like to make things fancy and show off our full range of talents. Then when we come to code them up, we float things right. We use absolute positioning. We style links to look like buttons. We use fancy hover states and chuck in break tags in to create whitespace. Then we marvel at how pretty our designs look. After all, as long as it looks good, that's all that matters. Right?

Well, not exactly.

By making things pretty first and correct second, we make a major mistake. We assume that everybody navigates the web the same way. With a mouse. With no colour correction. With 20/20 vision. And this couldn't be further from the truth.

There's a common misconception that people using assistive technologies are edge case. That they fall into that 1% with those that disable Javascript. But that isn't true. In my last blog post: 'Accessibility is not an edge case' I did some research. I found in the UK alone, around 9.3 million people living with a disability use the internet.

A lot of people think accessibility is all about using WAI-ARIA attributes. But when it comes to your markup, using the correct syntax gets you a lot of accessibility for free. Having the correct tags. The correct heading levels and the correct hierarchy on the page will give you a huge head start.

As Phil Sherry says, don't code for 'mobile first', code for 'screen-reader first'. Removing all the CSS and Javascript should leave something that is still coherent. Then add all the fancy stuff after.

We should be designing accessible websites because it's the right thing to do. But even as a business case, there's a potential 9.3 million people that can't use your service or buy your products.