Semantic HTML

Accessibility isn’t dark magic. Most of it comes down to using meaningful (semantic) HTML5.

Why? All technology interacting with a website depends on what’s in the DOM, the API that is generated by all the PHP, HTML, CSS and JavaScript in WordPress’s code. If the DOM is constructed with meaningful HTML5, all technology knows how to use and understand the website. This includes browsers, screen readers, voice recognition software, your iWatch, etc. Search engines will also benefit if you use semantic HTML as they understand the code.

If you inspect a page with the inspector of your browser you can see the DOM. And the DOM must make sense.
The DOM in the browser inspector

HTML is a markup language HTML is a markup language

Most HTML elements have specific meanings:

  • HTML5 landmarks like <header><nav><main><aside> and <footer> give structure to a page.
  • Headings (<h1> up to <h6>), paragraphs (<p>), images (<img>), lists (<ul> and <ol>), and for example quotes (<blockquote>) give meaning to the content.
  • Buttons(<button>) and links(<a>) add interaction with the page.

When you use the right elements for the job, your site works better on all devices. You can always change the way they look by using CSS if the native view of an element is not to your liking.

Note: Adding <h1>s to every <section> in a page, as proposed in early HTML5, is no longer valid, because no browser supports the HTML5 outline. Use of this model hinders screen reader users in understanding the web page. If you’re not convinced, read Computer says NO to HTML5 document outline by Steve Faulkner.

For example For example

Incorrect use of HTML Incorrect use of HTML

// Incorrect, a div doesn’t get keyboard focus.
<div class="menu-toggle"></div>

// Also incorrect. You should use <a> only for a change of location, not to invoke an action.
<a class="menu-toggle" href="#">Menu</a>

Top ↑

Correct use of HTML Correct use of HTML

// Correct, works on every device.
<button class="menu-toggle">menu</button>

// Also correct: If you want to hide text 
// from vision, use the screen-reader-text class.
<button class="menu-toggle">
    <span class="screen-reader-text">menu</span>

Read more on the screen-reader-text class.

Top ↑

Test Tools Test Tools

How do you test if the HTML you are using is valid? There are several tools for this:

It’s harder to check if your HTML is meaningful, because this highly depends on the content of your web page. Use common sense: search for the right element for the content and don’t suffer from Divitis.

Top ↑

Resources Resources

If you are a developer, consider what ends up in the DOM, because that’s what your users and their technology will receive. Take the time to study and learn HTML5 thoroughly.

Top ↑

A good overview of all HTML5 elements A good overview of all HTML5 elements

Top ↑

Style guides for Markup for WordPress Style guides for Markup for WordPress

Top ↑

About the use of semantic HTML5 About the use of semantic HTML5

Top ↑

Screen reader text class Screen reader text class