translate
  1. Learn
  2. Quicksheets
  3. Semantics and Web Accessibility

Semantics and Web Accessibility

Semantic markup provides the basic means to make a large portion of the web content accessible just by making sure that the correct HTML elements are used for the correct purpose at all times.

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. Although for a list a simple style can be used, when using the basic semantic markup, a screen reader "knows" immediately whether the list is a set of general bullets or whether it is a numbered list, and it is able to identify each list item. As a user reaches the list, the screen reader announces how many items there are in it. Thus, by semantically marking up a list, it provides a screen reader user with the same kinds of information that a person without visual problems can get at a glance.

Screen readers and other assistive technologies depend on the semantic 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, web content 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. Using heading markup (h1 through h6) allows a screen reader user to quickly skim the headings on a page and have a sense of the page's content via the heading structure, similar to a table of contents of any document.

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 recommendation is very helpful.

Resources