Navigation Experiments 1

From W3C Wiki

I've taken a set of SVG files and marked them up to support navigation and provided a jQuery script to provide navigation. Navigation is based on role or presence of an indicator of semantic meaning. For all the elements that are navigable, the idea is the elements should also be readable by assistive technology (AT), although no AT currently do.

Markup and navigation rules

Elements with a first child <title> or <desc> are navigable, including groups.

Elements with an aria attribute - aria-label, aria-labeledby, aria-describedby are navigable, including groups.

Groups that do not include a title, desc or aria attribute are pass through groups and are ignored for navigation. Pass through groups may exist for styling reasons, like changing the location of the text anchor or switching the fill on a set of elements.

Children of pass through groups are considered siblings of the pass through group's siblings when doing navigation.

Groups may has semantic meaning and may be included in navigation. Examples are the set of elements making up a chart axis, the set of data elements or a stack of bars in a stacked bar chart. I don't have this working well.

Roles are inherited from ancestors in this markup. A role on an element overrides the inherited role.

The following element are never navigable: title, tspan, desc, defs and any descendents of defs.


Here is a list of the roles used in navigation. Symbol used in svgTree.html is in parenthesis.

  • axis (a) part of a chart axis
  • background (b) *** a background, don't include in navigation or expose to AT
  • connector (c) connects two items, plays the role of an SVG connector
  • data (d) represents data in a chart
  • event (e) an event, step, epoch of time...
  • grid (gr) a reference mark, usually a line or grid marking a constant value
  • group (g) a group of items with semantic meaning
  • guide (gu) a guide - similar to data but represents a constant, line or curve that helps clarify data in some way
  • item (i) represents a single data item in a chart
  • label (L) a label
  • legend (le) a chart legend
  • none (x) *** presentation only, don't include in navigation or expose to AT
  • note (n) a text note
  • style (st) *** presentation only, don't include in navigation or expose to AT
  • symbol (s) a symbol, for example a symbol in a legend entry
  • title (t) a title
  • view (v) a view, a top level object for navigation, for example a chart in a multiple chart SVG or a view in a technical drawing

Roles marked with *** are presentation only and should not be included in navigation or exposed to AT. Other than none, they exist to help with sighted accommodations.