Document Accessibility

---

Semantics: Generating, Embedding, Exposing

Overview

• Semantics
  • general examples
  • info graphics examples
  • STEM
• Embedding Semantics
• Exposing Semantics
  • simple tabbing
  • ARIA trickery
  • JavaScript
• Last words on Math documents

Semantics: Docoments vs Web

• Semantics: the styling or annotations
  • Using \section, \subsection, or Heading1, Heading2, ... instead of font sizes
  • Using lists and items instead of working with bullet points and indentation
• On the Web we insert semantics hidden from view

Note, we are not talking about the semantic web!

Example: Recipes

• With simple embedded data
• With Interaction
• With Semantic (and Interaction)
• With slightly different semantic

Example: Info graphics and Interaction

• HighMaps
• HighCharts
• SticiGui

Semantics in STEM is often procedural

Semantics in Math

• Accessibility requires one or multiple alternative views
• Achieve this by adding semantic descriptions
• Different layers and modes

Syntax is not always helpful

• For regular text semantics is quite straight forward
• Semantics for math is quite different from its syntax

Generate Semantics

• Math markup (e.g., LaTeX, MathML) are not very expressive

    ax^2+bx+c=0

<math>
  <mi>a</mi>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <mo>+</mo>
  <mi>b</mi>
  <mi>x</mi>
  <mo>+</mo>
  <mi>c</mi>
  <mo>=</mo>
  <mn>0</mn>
</math>

Semantics for Maths

There's been many attempts over the years

• Content MathML
  • An even worse failure than Presentation MathML
  • Some systems generate it in their semantics (e.g., Maple, Mathematica)
• OpenMath: Another failed attempt at an extensible language
• SnuggleTex: Semantics for Physics (defunct)
• LateXML grammatical approach to generates a semantic markup similar to Content MathML for the DLMF

Declarative approaches have all failed

Generating Semantics

• SRE reinterprets the syntax
• Fully disassembles the symbol structure
• Reassembles a semantic intepretation bottom-up
• Applies a number of (partially selectable) heuristics
• Rewrite internally into semantically improved term structure

<math>
   <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
   <mo>+</mo><mi>b</mi><mi>x</mi>
   <mo>+</mo><mi>c</mi>
   <mo>=</mo><mn>0</mn>
</math>

$$\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

• Navigation
• Highlighting
• Magnification
• Speech
• Braille

Different Types of Semantic Embeddings

SRE provides very deep semantics, other alternatives include

• Navigation via Tabbing
• Parallel structures
• ARIA based walking
• Shadow DOM
• Pure Javascript navigation

Tabbing Semantic

Reading order can be enforced and changed by using tabindex

• Adding tabindex="n" where n is a number allows focus to be set
• tabindex="-1" means the element is not reachable but can be "switched on" programmatically
• tabindex="0" means the element is in the regular tab order
• tabindex="1", tabindex="2", etc. forces a tab order

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

Tabbing Example

Quadratic equation as SVG with taborder:

• Version 1: progressing tabindex, no styling
• Version 2: tabindex="0", some styling
• Version 3: progressing tabindex, plus styling

Alternatively with HTML and CSS:

• CHTML Version: tabindex="0", no styling

Other Features

E.g., hover information via title elements

• CHTML Version
  • Adds some title elements containig the speech
  • Can be exposed via hover
• This is more difficult to achieve for SVG
  • There needs to be physical areas where we can actually tab an element
  • Hidden rectangles can be fitted
  • z-axis order must be carefully arranged

Exercise: Add tabs for yourself

• Quadratic formula
• Angle formula

Semantics with ARIA

WAI-ARIA

• Standard for Rich Accessible Internet Applications
• Offers a suite of attributes and techniques for making content accessible
• Recommendations for best authoring practices

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

ARIA Technology

• Roles to describe
  • standard widget for menu, interaction elements and states, ...
  • content regions, headings, tables, ...
• Navigation enhancements via landmarks
  • Complement the HTML regions
• Keyboard navigation
• Live regions
• Developer control of accessibility API
  • E.g., hide content, change reading order

ARIA for STEM Documents

Document Structure

• Documents should use semantic HTML elements
  • page layout: header, main, footer, etc.
• Sometimes that is not possible, then ARIA can help

Special Content

• Give explicit meaning via aria-label or aria-labelledby
• Complex descriptions via aria-describedby, e.g., for diagrams
• Hide programmatic semantics via aria-hidden
• Specialist navigation order

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

• aria-owns
• aria-activedescendant
• role="tree" and role="treeitem"

Examples on Peter Krautzberger's page

Advanced Navigation

• Combine Syntax elements with hidden semantics
• Various embedding techniques:
  • Hidden XML structures
  • Specialist Attributes
  • Elements in different namespace (only possible in SVG or XHMTL)
• Use JavaScript to exploit semantics
• Effectively every formula becomes a rich internet application on its own

Advantage: Full and flexible control

Disadvantage: JavaScript required, override defaults

Embedding Semantics in MathJax

• Syntax parsed by MathJax
• SRE enriches syntax with semantics
• Semantic information embedded via data attributes

data-semantic-...="..."

• MathJax visual rendering remains unchanged
• Semantic attributes are retained regardless of actual rendering
  • HTML with CSS or SVG output

$$ax^2+bx+c=0$$

Navigation with Deep Semantic

• Javascript retrieves attributes
• Reconstructs the semantic tree
• Navigation and speech generation for semantics
• Other output: summaries, navigation information
• Visual effects: highlighting, magnification, collapse

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

• Documents structure and semantics
• STEM Documents Conversion
• Semantics and accessibility
• Accessible Text and Math
• What's still missing?

Tying Up Loose Ends

Let's look at our example document again

• original PDF
• pandoc conversion
• make4ht conversion
• Make a list of things missing
• Come up with some author/conversion recommendations

Next Steps

• Other formats, sources, conversion
• Diagrams
• Interactive Components
• Advanced Material