tbolt

Accessibility Through Semantic HTML

Great article by Laura Kalbag on why semantic HTML is better for usability and accessibility:

As developers, we like to use divs and spans as they’re generic elements. They come with no associated default browser styles or behaviour except that div displays as a block, and span displays inline. If we make our page up out of divs and spans, we know we’ll have absolute control over styles and behaviour cross-browser, and we won’t need a CSS reset.

Absolute control may seem like an advantage, but there’s a greater benefit to less generic, more semantic elements. Browsers render semantic elements with their own distinct styles and behaviours. For example, button looks and behaves differently from a. And ul is different from ol. These defaults are shortcuts to a more usable and accessible web. They provide consistent and well-tested components for common interactions.

It’s pretty common to see “div-itis.” Where there’s a semantic HTML element nested many layers deep in a series of divs. I’m certainly guilty of this, but i’m conscious of it and try to look for ways to improve. Developers should really start paying attention to their HTML. It’s seems to be the first thing ignored.

Also:

Good usability is good accessibility

This is my experience as well. In fact, when I previously performed in-person usability testing with blind participants, one individual even stated that often times sites or apps are not usable at all, nevermind accessibility issues.

Posted on April 26th, 2018