Introduction

It’s a tale from another dimension: HTML markup representing not just a graphical experience but also virtual objects and their state.

HTML allows for a single element to have multiple meanings for different use cases.

You could imagine your markup as a topology with multiple layers of semantics. Or, as 3 different dimensions: visual, accessible, and machine-readable.

(And with WebXR and other emerging technologies being grafted onto the web platform, there will soon be more dimensions to consider! Spooky!)

Visual

An element’s class and style attributes are most relevant to the rendering engine that displays the visual interface. For a lot of web developers, this is just the air we breathe.

Accessibility

An element's role and aria‑* attributes are most relevant to screen readers.

Never heard of a screen reader? Most blind people don't use a mouse. Instead, they use a keyboard to operate an application that speaks the content and metadata of the currently focused element. People who are deaf-blind might use a screen reader with a refreshable Braille display.

When using a screen reader, properly marked up elements can be acted upon in unique ways. For instance, marking up all headings using heading elements (h1-h6) will compile them and make them available as a list for easier page navigation.

Interoperability

Metadata attributes such as itemprop are most relevant to digital assistants and search engines, for things like indexing and repurposing.

Audio-enabled digital assistants often parse web pages' structured data and document outlines to find information. The relevant data can be packaged into an experience that is native to that service's voice UI.

Engineering Strategies

To account for the wide range of ways HTML code can be utilized, always adhere to the HTML, ARIA, and Schema.org specifications.

In my experience, building a library of reusable, spec-compliant web components is the best way to deliver beautiful, accessible, interoperable websites.