You may have heard the need for semantic markup mentioned by accessibility experts in presentations in articles, but what does it really mean, and why does it matter?
To understand what is meant by semantics when designing and developing for the web, you may find it helpful to think about how meaning can be conveyed through markup. Marking up a list correctly, using <ul> or <ol> and <li> is a simple example of using semantic markup correctly. You can style your list, but when you use the basic markup, a screen reader "knows" immediately whether the list is a set of general bullets or whether it is a numbered list. A screen reader identifies each list item. And, as a user reaches the list, the screen reader announces how many items there are in it. Semantically marking up a list, then, provides a screen reader user with the same kinds of information that you can see at a glance.
Generally, screen readers and other assistive technologies depend on the markup of the content as they communicate with the browser to provide assistive technology users with the information they need to navigate a page, review data in tables, complete forms, search for information, etc.
Often, designers and developers convey meaning only through visual presentation, via styling (such as by font and color). While this approach may be adequate for some site visitors, it won't serve everyone.
Individuals who use screen readers or voice-input need the information that semantics offer in order to navigate a site or web application quickly and confidently. For example, when heading markup (h1 through h6) is used, a screen reader user can quickly skim the headings on a page and have a sense of the page's content via the heading structure. Even when websites function more like applications than pages, headings are still valuable. Whereas traditional pages may have headings that represent a structure, similar to a table of contents, headings in a web application serve a similar purpose. they serve to orient a user, make sections of the page clear, and provide a consistent experience.
Assistive technology users need to be able to complete tasks such as moving to the "next paragraph," or activating a button or link, with ease. To assure that this is possible, you can think of coding in terms of the role, name, state, value, and/or properties needed to allow a user to understand the information on a site, take appropriate action (such as activating a link or button), and/or confirm that the action taken has had the expected result. Basic and correct HTML is often the best choice, but when it is not an option, the Accessible Rich Internet Application (WAI-ARIA specification -- latest candidate recommendation) is very helpful.
To learn more about how assistive technologies, such as screen readers and voice-input software, know how to identify semantics in combination with browsers, see two articles from the Paciello Group's blog:
In the end, using correct semantic markup goes a long way toward providing all users with a similar site experience, and it can even help with styling since markup should be predictable and consistent.
- Tutorial on Page Structure - Web Accessibility Initiative
- Tutorial on Tables - Web Accessibility Initiative
- Semantic Structure - WebAIM
- Accessibility APIs A Key To Web Accessibility - Smashing Magazine
- Accessible Rich Internet Applications (WAI-ARIA) 1.1 - Web Accessibility Initiative