Screen Readers

One of the reasons you use semantic HTML is because a webpage is not always seen, even if the visitor is a human. Some of us use screen readers. You may not have any experience with screen reading software, so you will have to find other humans from whom to learn. Watch Hadi Rangin of the University of Washington demonstrate how he uses a screen reader to navigate the web:

Watch accessibility engineer LĂ©onie Watson do live walkthroughs of several public-facing websites:

Watson discusses another means of communicating semantics to screen readers: Accessible Rich Internet Applications (ARIA). ARIA is a specification first introduced in 2006, when HTML4 offered few ways to declare an element's semantic meaning. The ARIA specification defined a set of attributes that could be added to tags to fill this hole.

For example, a web developer of the time might have used a div tag to create a custom button. Screen reader users would likely have no idea what the purpose of the div was unless the developer added its ARIA role as an attribute:

<div role="button">next</div>

Many other roles are defined in the standard.

HTML5 lessened but did not eliminate the need for the semantic cues that ARIA attributes provide. Where possible, semantic HTML elements should be used. Other elements, including div and span, should be given ARIA attributes to maximize their accessibility.