The problem: RNIB has an extensive tactile graphics library of over 1700 images available on their Load2learn website, as part of their mission to “make curriculum material accessible.” However, you can only find these through the search on their site, and it will only find content in their domain. If you were to search for any of these images with web search tools, they would be lost in the sea of search results.
The solution: By tagging this content with accessibility metadata tags, a search engine can pick out just the images that are tactile graphics, making this valuable accessible content discoverable.
Search for it yourself: We have a library of accessible content and a Google custom search engine available. The links below will execute searches so that you can see realtime results.
How we did it: 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 image, give its name, and then describe it’s accessibility: it is an image with tactile graphics. If it has braille, which many do, it should also declare that in a mediaFeature.
<div itemscope="" itemtype="http://schema.org/ImageObject"> <meta itemprop="name" content="Greenhouse Gases" /> <meta itemprop="accessMode" content="tactile" /> <meta itemprop="mediaFeature" content="tactileGraphic" /> <meta itemprop="mediaFeature" content="braille" /> </div>
A few other tags can be added to be a bit more useful for education search, as these are learning resources. These are from LRMI tags, and their meaning is self-evident. Note that the UK age range, keystage 4, has been translated to numeric ages.
<meta itemprop="learningResourceType" content="illustration" /> <meta itemprop="inLanguage" content="en-gb" /> <meta itemprop="typicalAgeRange" content="15-16" />
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. I also added an image property so that a thumbnail can be seen in the search results.
<p itemprop="description">This is a tactile diagram for GCSE level students. It shows...Earth's atmosphere is shown as a texture.</p> <span itemprop="keywords">geography</span>, <span itemprop="keywords">Earth</span>, <span itemprop="keywords">atmosphere</span>, <span itemprop="keywords">climate</span>, <span itemprop="keywords">environment</span> <meta itemprop="about" content="Geography; Environmental geography" /> <meta itemprop="about" content="Science; Ecology and environmental science" /> <meta itemprop="image" content="http://a11ymetadata.org/samples/RNIB/UPL009247.a8a4e_Greenhouse_Gases_Greenhouse_Gases_s_p1.jpg" />
Now let’s look at the pages and the summary from Google structured data testing tool. If you’ve come this far, you’ll care about the coding in context: do a “view source” of the tagged files in your tool of choice. The tags have “a11ymetadata” comments around them to make them easy to find.