Document Accessibility

Document Accessibility
Semantics: Generating, Embedding, Exposing

Volker Sorge

University of Birmingham, UK University of Birmingham Crest

MathJax Consortium MathJax Logo

Progressive Accessiblity Solutions Progressive Access Logo


Semantics: Docoments vs Web

Note, we are not talking about the semantic web!

Example: Recipes

Example: Info graphics and Interaction

Semantics in STEM is often procedural

Semantics in Math

Syntax is not always helpful

Generate Semantics


Semantics for Maths

There's been many attempts over the years

Declarative approaches have all failed

Generating Semantics


$$\int _{a}^{b}(\alpha f+\beta g)(x),dx=\alpha \int _{a}^{b}f(x),dx+\beta \int _{a}^{b}g(x),dx$$

Semantic Layers

Use semantics to provide alternative views

Different Types of Semantic Embeddings

SRE provides very deep semantics, other alternatives include

Tabbing Semantic

Reading order can be enforced and changed by using tabindex

Usually positive values should be avoided but can be useful in the context of STEM.

Tabbing Example

Quadratic equation as SVG with taborder:

Alternatively with HTML and CSS:

Other Features

E.g., hover information via title elements

Exercise: Add tabs for yourself

Semantics with ARIA


Goal: Provide accessible view on standard UI elements regardless of their actual implementation

ARIA Technology

ARIA for STEM Documents

Document Structure

Special Content

Navigation with ARIA Elements

ARIA allows to give navigation control via special roles

Example: grid navigation

Control is not always perfect

Example: ARIA Navigation

Tree navigation using

Examples on Peter Krautzberger's page

Advanced Navigation

Advantage: Full and flexible control

Disadvantage: JavaScript required, override defaults

Embedding Semantics in MathJax



Navigation with Deep Semantic

Specialist Navigation Examples

$$ J_{i}={ \begin{bmatrix} C_{i} & I & & \\ & C_{i} & \ddots & \\ & & \ddots & I\\ & & & C_{i}\\ \end{bmatrix} } $$

Other examples

Intermediate Summary

Let's have a look at where we at

Tying Up Loose Ends

Let's look at our example document again

Next Steps