Accessibility issues on the Web

• TABs can access the Web relatively easily

  (TAB=Temporarily Able Bodied)

• Around 500 million persons have accessibility problems:
  • vision (including colour blindness)
  • difficulties in handling keyboard, mice
  • hearing problems
  • ...
• Hence the importance of the Web Accessibility concerns!

There is also a business case...

Karsten M. Self

Web Content Accessibility Guidelines

• Developed by W3C's WAI
• Lists requirements on a "proper" usage of (X)HTML
  • use summary, alt, title, longdesc, ...
  • use CSS styling
  • ...
• Teletype browsers, voice browsers, etc, can convey

  the information to the user!

SVG creates new challenges

• Information is mostly two dimensional
• It is easy to get carried away by sexy possibilities
  • and forget about the "Web" access of SVG files
• Structures are much more complex
• Animation is an extra issue

But everything is not so bad...

• SVG considered accessibility in its development
• Lots of possibilities offered by:
  • proper grouping, naming, styling
  • usage of title, desc
  • see the W3C accessibility note of C. McCathieNeville

    and M-R Koivunen

• But that is not enough!
  • the structure of an image should be described
• That is where metadata can be used:
  • describe the relationship among elements

What do we do?

1. Add metadata to the file using RDF
2. Add textual descriptions to SVG (using title, desc)
3. Use a special program to
   1. read the metadata
   2. follow the metadata resources to find
      • descriptions
      • text elements
      • links
   3. produce a textual ("linear") output

Some Examples

• Architecture of a WebCGM file (HTML)
• A small SVG example (HTML)
• Various SVG paths (HTML)
• SVG transformations (HTML)
• Accessibility note (HTML)
• W3C membership (HTML)
• W3C recommendations (HTML)
• Curve deformation (HTML)
• Spinning W3C Logo (HTML)
• Filter effects (HTML)

Few words about RDF

RDF is a collection of statements:

It also has an XML representation:

<rdf:Description rdf:about="#FullSlide">

	  <axsvg:GraphicsType>Chart</axsvg:GraphicsType>

	  <axsvg:ChartType>Line</axsvg:ChartType>

</rdf:Description>

Bags, sequences, etc

Statements can refer to collections (bags, sequences, alternatives):

<rdf:Description rdf:about="#FullSlide">

  <axsvg:Contains>

    <rdf:Bag>

      <rdf:li rdf:resource="#Legend"/>

     <rdf:li rdf:resource="#Axes"/>

      <rdf:li rdf:resource="#Datalines"/>

    </rdf:Bag>

  </axsvg:Contains>

</rdf:Description>

Example from Linealizer

A metadata excerpt from the WebCGM drawing:

<rdf:Description about="#SlideContent">

  <axsvg:Contains>

    <rdf:Bag>

      <rdf:li rdf:resource="#MetafileStructure"/>

      <rdf:li rdf:resource="#PictureDetails"/>

      <rdf:li rdf:resource="#PictureBody"/>

      <rdf:li rdf:resource="#SymbolLibraries"/>

    </rdf:Bag>

  </axsvg:Contains>

</rdf:Description>

This can be added to the metadata element of SVG!

What the tool does

1. Reads the subject id, ie, #SlideContent, outputs a

   boiler-plate text

2. Looks for a desc in the SVG file for that id
3. If found, it adds it to the boiler-plate text
4. Finds the predicate (axsvg:Contains)
   1. issues a boiler-plate text
   2. creates (possibly) an HTML list
5. Adds the description to the output
6. Repeats this for all the RDF statements

The result is a simple HTML (could be any other text)

More Complex Actions

One can extract further information from the SVG source:

• Text content for labels, texts
• xlink:href values for links
• Duration, begin, end, etc, information for animation

The predicates

• All previous items are just handicraft...
• The heart of the matter is the choice of predicates
• The predicates should
  • give a proper description of the structure
  • convey "just enough" information
  • have a clear "boiler-plate" text
• The current set is based on a preliminary experience
  • mainly in "presentation" related SVG content
  • some search on the Web for graphics content

General Predicates

GraphicsType, with values:

Chart, Conceptual, Clip-art, Decorative, Special

an initial classification, based on some (informal)

survey on graphics usage

IsAnchor, ContainsAnchor

true or false

the link is also displayed by the tool

Structural predicates

Contains

Usually a bag or a simple list of resources

IsPartOf

"counterpart" of Contains

IsConvergencePoint, IsConnected, PointsTo

Associated

ExpandsTo

see, eg, the WebCGM file again

Symbols

IsDef, Symbol

Ie, the element is part of a def

InstanceOf

Counterpart of IsDef

Transformation

the object is either a literal or a real element

Using defs/symbol is very good for accessibility, too!

Example for symbols

From the transformations slide:

<rdf:Description about="#duck">

  <axsvg:IsDef>true</axsvg:IsDef>

</rdf:Description>

<rdf:Description about="#Original">

  <axsvg:InstanceOf rdf:resource="#duck"/>

</rdf:Description>

<rdf:Description about="#simpleTranslate">

  <axsvg:InstanceOf>

    <rdf:Description>

      <axsvg:Symbol rdf:resource="#duck"/>

      <axsvg:Transformation>translate(20,10)</axsvg:Transformation>

    </rdf:Description>

  </axsvg:InstanceOf>

</rdf:Description>

Textual references

Text, LabelledBy, Labelled

• The tool locates the text and display it
• In SVG1.1, full paragraphs can be retrieved and displayed!

Layout/position predicates

InPosition, InDirection, IsGoingThrough, MaskedBy

AtLeft, OnTop, HasOnTop, etc

Uses "East", "NorthEast", etc, as possible values

A precise mathematical positioning has no added value

The full list is quite long, see the paper

Animation

• Animation objects in SVG are of low level (semantically)
  • one often combines several animation elements for a single effect
• Metadata should hide that granularity
  • RDF resources can be used on their own rights for descriptions

Animation Predicates

AnimatedBy, AnimationSubjects

binds the animation and the animated elements

AnimationBegins, AnimationDuration

either

• refer to "real" animation objects, the tool extracts the info; or
• textual description

AnimationSeq, AnimationPar

enough for most of the situation

all details are not necessary relevant for accessibility!

Animation Example

Extract from the distorted duck

<rdf:Description rdf:about="#AnimatedDuck">

  <axsvg:AnimatedBy rdf:resource="#Animation"/>

</rdf:Description>

<rdf:Description rdf:ID="#Animation">

  <desc>Deforms the duck into a potato and back</desc>

  <axsvg:AnimationSubjects rdf:resource="#AnimatedDuck"/>

  <axsvg:AnimationBegins>click on duck</axsvg:AnimationBegins>

  <axsvg:AnimationDuration>2s</axsvg:AnimationDuration>

</rdf:Description>

• Note that the subject of the statement is and RDF resource!
• See the paper for a more complicated example

Issues

• The tool could be smarter:
  • metadata should be external to the SVG file
  • use complex referencing structures (xpointer, svgpointer)
  • ...
• Ideally, metadata editing should be in the authoring tool

Real Issue

What is the vocabulary?

RDF Schemas, ontology languages should be used

there is an RDF Schema, waiting for OWL

Find the right terms!

• borrow terminology from constraint graphics,

  automatic multimedia generation, visualization, etc

• different vocabularies for application areas
• look at cognitive psychology research related to visualization?

this is a real research area