Benetech and Vitalsource have been discussing making their textbooks more easily discoverable via accessibility metadata, and this page is the result of these discussions. It is NOT a public page (it does not link into the WordPress site hierarchy), but the content is hosted there. The URL is private between Benetech and Vitalsource. Vitalsource has an extensive library of content, from a variety of publishers available on their Vitalsource website. In order to make this more easily discoverable, we have discussed adding accessibility metadata tags. While their current pages have significant amounts of data, and it is clear that these come from a database, most of the information on the page, except for a few <meta> tags, is presented only as text. With this in mind, there were a few challenges. First, I wanted to show that the overhead of tagging, especially with the minimum set, is small. The tags below declare that this is an book with images, give its name, and then describe it’s accessibility. If it has MathML, long descriptions or other accessibility features, these should also be declared in a mediaFeature.
<div itemscope="" itemtype="http://schema.org/Book">
<meta itemprop="accessMode" content="textual" />
<meta itemprop="accessMode" content="visual"/>
<meta itemprop="mediaFeature" content="alternativeText" />
<meta itemprop="mediaFeature" content="displayTransformability" />
<meta itemprop="mediaFeature" content="structuralNavigation" />
<meta itemprop="mediaFeature" content="MathML" />(if it had mathML or other features)
(and the corresponding </div>)
Finally, a few more tags, such as keywords and the content area can be listed, improving search results. These are just wrappers around the content in the page. They can be done as <span> tags when possible, but I have used <meta> tags for illustration. On many of these, name author and publisher, I simply added the itemprop attribute on an existing tag, such as the H1 or P. On ISBN, I had to add another span tag so that it would pick up just the ISBN and not the leading text. I also added an image property so that a thumbnail can be seen in the search results.
<meta itemprop="keywords" content="Nature" />
<meta itemprop="keywords" content="Ecology" />
<meta itemprop="image" content="http://covers.vitalbook.com/vbid/9780520945739/width/150" />
<h1 id="asset_title" itemprop="name">Big Ecology: The Emergence of Ecosystem Science</h1>
<span id="author" itempprop="author">Coleman, David C., Prof.</span>
<span id="publisher" itemprop="publisher">University of California Press</span>
<span id="isbn">ISBN: <span itemprop="isbn">9780520945739</span></span>
<meta itemprop="BookFormat" content="Vitalbook" />
<p itemprop="description">In <cite>Big Ecology</cite>, David C. Coleman... programs of the 1980s.</p>
Now let’s look at the pages and the summary from Google structured data testing tool.
All this powers a Google Custom search engine, which allows for searches based on the properties, whether accessMode or mediaFeature. You can see an example if you do the following searches:
- A search of our index for anything about ecology – note that this returns a large set of results
- A search of our index for anything about ecology, but also with mediaFeature=structuralNavigation – note that this returns a much more refined set of results… from over 400 to under 30