Accessibility: Adding Semantics

Posted by John Durance 

A problem that screen readers often face is drawing sufficient semantic meaning from a document.

Semantics are important, for example, in defining what a widget does. If the available information is limited to just element names, like div or span – which don’t mean much – screen readers will not announce what a widget does, nor that a user can interact with it. Also, by default, ‘divs’ and ‘spans’ are not focused and do not receive keyboard events. Where possible, it’s much better to use more meaningful markup. And not only for widgets; the structure of a document can be given better semantics too, helping screen readers to better understand it. Like using the ‘nav' element to markup main navigation links.

The following code will not be understood as an article, nor will a button be announced by a screen reader, nor will the button do anything by hitting the enter key:

<div id="article">


<div class="button">Submit</div>


All three problems are solved, if semantic markup is used (it’s much cleaner too):


Related Blog posts