Skip to main content

Accessibility metadata and accessibility features, part 1

How can you add metadata about accessibility features in your website, ebook or any HTML-based digital product?

A straightforward way is to use schema.org's accessibility metadata on accessibilityFeatures.

You can check more in-depth explanation and code snippets on Daisy's definition on accessibilityFeature.

I'm highlighting a few that are relevant to my job at the moment in particular about ebooks.

1. Alternative text

Value alternativeText can be used if your visuals (images, audio, video) have alternative texts. The key is that they should be adding to the information in the publication.

Easy way to think about it: If you have non-empty, informative alt attributes then you should use alternativeText value!

Remember that decorative images don't count towards this, since you should make their alt attributes empty: alt="".

2. Long descriptions

Long or extended descriptions are intended for visual content that is too complex to be included in an alternative text. This basically means explaining a graph or a flow chart, so it is understood by the target audience.

The difference between long descriptions and alternative texts can be small, but it is important.

Think alternative texts as summaries of their visual contents. Long descriptions then are the actual contents or highlights of the most important parts of them.

3. ARIA

Basically ARIA value means that you use ARIA roles in your publication. This is a can of worms in its own right, so go read notes on ARIA use in HTML.

4. Transforming the display

Value displayTransformability means that the user is able to change the display of all text. For example the font family, font size or word spacing.

This means that all text should be encoded as text - and not included only in images.

In CSS terms it means not using absolute values for dimensions such as pixels or points, but em's and rem's.

5. High contrast

Value highContrastDisplay can be used if the contrast ratio is 7:1 between foreground text and the background. This also takes into account images with text.

That's all for now!