RSS feed for this blog

Schema.org QuantitativeValue with accessibility and typography

By Paul Watson on .

This is a short post about how to use schema.org/QuantitativeValue in a way which is machine-readable, human-readable, accessible, and typographically correct.

Schema.org/QuantitativeValue is used to express the height, width, and depth properties on instances of schema.org/Product and schema.org/VisualArtwork. I’m going to use VisualArtwork as an example, but the procedure is exactly the same for a Product.

I’m going to use an example height of 700 millimetres and a width of 500 millimetres. Without any use of schema.org or typographical niceties this would probably be marked-up like this:

<p>Size: 700mm x 500mm</p>

So far, so good? Not really.

Step 1: Getting the typography right

That “x” character is the letter X not the symbol for “by”. The proper symbol is “×”, the multiplication sign (type “Alt 0215” in Windows or the HTML entity &#215; - you can find more information at www.fileformat.info/info/unicode/char/00d7/index.htm).

So what I should change it to is this:

<p>Size: 700mm × 500mm</p>

If you need to you can use the HTML entity in your mark-up:

<p>Size: 700mm &#215; 500mm</p>

On a related typographical note, if you’re using feet and inches then the correct symbols are ′ and ″ (the prime and double prime characters), not ' and " (the plain apostrophe and quotation mark).

Step 2: Making it accessible

I’ve got a couple of abbreviations there that I should mark up so that screen-reading software can understand what I’m trying to say:

<p>Size: 700<abbr title="millimetres">mm</abbr> × 500<abbr title="millimetres">mm</abbr></p>

That’s the basic mark-up and typography done, now the schema.org.

Step 3: Adding the schema.org mark-up

The main properties I need to mark up are value (the actual value of each measurement) and unitCode (the UN/CEFACT Common Code of the units).

I’d never heard of UN/CEFACT Common Codes before (despite the name they’re not really that common!), but they are the chosen format for specifying units of measurement as laid out by the United Nations Centre for Trade Facilitation and Electronic Business (UN/CEFACT). You probably won’t recognise any of them either, but the GoodRelations wiki keeps a table of them for easy reference.

Anyway, the UN/CEFACT Common Code for millimetres is “MMT”. I’m not going to display that to my website visitors because they probably won’t recognise it, so I’ll hide that away in a content attribute where web crawlers can parse it:

<div vocab="http://schema.org/" typeof="VisualArtwork">
  <p>Size: 
    <span property="height" typeof="QuantitativeValue">
      <span property="value">700</span>
      <abbr property="unitCode" content="MMT" title="millimetres">mm</abbr>
    </span> × 
    <span property="width" typeof="QuantitativeValue">
      <span property="value">500</span>
      <abbr property="unitCode" content="MMT" title="millimetres">mm</abbr>
    </span>
  </p>
</div>

And that’s it. You can see this mark-up in the wild on any of my artwork pages on this website such as this linoprint. The only difference is that on this website I declare schema.org (and other vocabularies) in the prefix attribute on the html element, so I don’t need to use the vocab attribute in my RDFa as I can just prefix all the schema.org types and properties with “schema:”.