Guide to Accessible Semantic Markup

Web Content Accessibility Guideline 1.3, “Adaptable” is defined as: Creating content that can be presented in different ways (for example simpler layout) without losing information or structure.

HTML was originally designed to deliver documents with a structure that represented the importance and order of information. The creators of HTML were actually scientists who wanted a way to share technical documents. They didn’t really care about the visual look of the document as viewed on a screen—it just needed to correctly convey the information.

Semantics and accessibility are a part of HTML by design. Still, they are not useful unless used appropriately. Understanding how to write semantic code properly means knowing how that code works, and how users and machines will read it.

Semantic markup is a fancy term for common-sense HTML usage: if you write a headline or section heading, mark it with a heading tag (<h1>, <h2>). If you write paragraph text, place the text between paragraph tags (<p>…</p>). If you wish to emphasize an important phrase, mark it with strong emphasis (<strong>… </strong>).  Never choose an HTML tag based on how it looks in a web browser. You can adjust the visual presentation of your content later with CSS to get the look you want for headlines, quotations, emphasized text, and other typography.

HTML also contains semantic code elements that are not visible but are extremely useful behind the scenes. There are code cues that make “reading” the page with assistive technology not only possible, but also efficient. Remember—we are simply providing good instructions with our HTML, and those instructions need to work well with assistive technology, too.

Semantic HTML structure

Content, Presentation, and Behavior

Separating the content from the presentation and from the behavior allows us more efficient control over the different elements that make up a web page. For example, by keeping the presentational elements (styles) isolated in a separate CSS file, we can quickly change the look of a single element or restyle the entire site without ever having to touch the content.

Semantic vs. Non-semantic (Presentational) tags

By using semantic tags and styles instead of using presentational tags, which are only visual, the meaning is not carried through by a technology that only reads the code.

Deprecated presentation tags

For every presentational tag that has been deprecated, there is a CSS equivalent:

<center> tags can use a text-align property, <bold> tags can use a font-weight property and so on.

The Web Standards Model

Structural Semantics

We’ve discussed semantic elements that affect our text many times; elements like <h1> – <h6>, <p>, and <li>. Table-based layouts were slowly replaced by containers called <div>s and <span>s. These elements are considered generic and don’t really offer any semantic value. But now we have HTML5…

HTML5

There are elements introduced in HTML5 that help considerably with structure and truly give us meaning to our web page containers. A partial list includes:

  • <header>
  • <main>
  • <article>
  • <aside>
  • <footer>

While there are many other elements introduced, these elements will be covered in more detail during this month’s webinar.

Text-level Semantics

Let’s stick to the basics and think about a few of the text-level elements as replacements for the deprecated presentation tags we talked about earlier. In fact some of those tags are available for use within the HTML5 specification. The key here is that the tags have a purpose; there is meaning behind these tags. Examples include:

  • <strong>
  • <em>
  • <small>
  • <code>

WAI-ARIA

WAI-ARIA is a specification that has been added specifically to add accessibility and semantic value to a web page. An example would be to specify a list of links as a navigation menu. WAI-ARIA roles may be helpful with scripting, dynamic content, and advanced user controls. Examples of WAI-Aria roles include:

  • <alert>
  • <checkbox>
  • <slider>
  • <tab>
  • <tabpanel>
  • <treeitem>

Want to learn more about semantic markup accessibility?

Watch our on-demand webinar “Semantic Markup Matters to Web Accessibility”.





Download the semantic markup webinar




Your email address will not be published. Required fields are marked *

*

by Kevin Rydberg
October 23rd
2014

Subscribe to Blog Updates