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
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…
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:
While there are many other elements introduced, these elements will be covered in more detail during this month’s webinar.
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:
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: