How Does HTML Microdata Help With Accessibility?

And what are those item-something attributes for, anyway?

Scott Vinkle
6 min readJan 17, 2020
A pile of lime green lego blocks.
Photo by Murilo Cardoso from Burst

I’ve been studying HTML from an accessibility blog written by a blind developer. I was curious how they structured their markup and wanted to see if there were any extra bits that made it even more accessible.

The markup from this particular blog seemed to go above and beyond what I’d call basic semantic structure; article, header, logically ordered headings, etc. It also featured some attributes I've recognized from before ( item-something?) but I never took the time to learn about: Microdata.

What is Microdata?

Microdata, as described from schema.org and/or the Microdata spec, are attributes to help browsers build out a machine-readable data structure for browsers to consume. It can be thought of as key:value pairs much like a JSON object.

After reading the spec and reviewing some examples, there seems to be three main attributes to be aware of:

  • Anything with the boolean attribute is the item, or “thing” of data you’re defining. It’s more or less a container or “starting point” of data.
  • An item needs the attribute with a specific URL value to further describe the vocabulary or “category” of the thing…

--

--

Scott Vinkle

Accessibility Specialist at Shopify • Speaker, writer, workshop instructor • IAAP CPWA • ScottVinkle.me