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.
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.
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.