ARIA Graphics

1. Roles

There are two main super-class roles that apply to all types of structured graphics, defining on the one hand, the type of graphical document, and on the other, the graphical components within it.

Graphical document objects define the type of graphic and its overall structure.

graphics-doc

A graphical document is distinct from other documents in that the visual layout of the content has semantic meaning. Navigation methods may take this into consideration. The graphics-doc role is appropriate for labelled diagrams and schematics. It also has the following sub-class roles which define graphics with special semantic meaning:

  • graphics-map: A map is a type of graphical document where the layout of objects represent geographical layout of features in space. It includes blueprints and elevation profiles in addition to latitude-longitude maps. If a map does not have explicit data scales,

  • graphics-network: A network graph is a type of graphical document conveying the relationships between data objects. These relationships may be conveyed with connecting lines or by nesting objects visually within one another. Other names include organizational charts, node-edge graphs, and tree charts. The particular layout of a network graph can be re-arranged as required, so long as the relationships are preserved. In contrast, if the two-dimensional position of nodes in the graph represents data values on horizontal and vertical scales (separate from the depth in the network tree), the document should be classified as a graphics-datachart instead.

  • graphics-datachart: A data chart is a type of graphical document in which graphical features (layout, color, shape, etc.) reflect values in a data set. Data charts are defined by the data scales and data objects they contain. Users should be able Sub-classes could be defined for the most common types of charts:

    • graphics-xyplot: An xy-plot is a type of data chart in which the horizontal and vertical position; it is also known as a scatterplot. An xy-plot should have two graphics-axis elements, and may have other types of data scale (e.g., legends for color, size, or symbol type).

    • graphics-barchart: A bar chart is a type of data chart in which data objects representing categories are arranged side-by-side, compared by their height or width on a perpendicular axis. It includes grouped and clustered bar charts, and applies regardless of whether vertical bars or horizontal columns are used. A bar chart should have two graphics-axis elements, one of which is categorical and one of which is quantitative. Authors should define both axis elements, and must define the quantitative axis. If the author does not define a categorical axis, the user agent should generate an axis object with axis-datatype of label.

    • graphics-piechart: A pie chart is a type of data chart in which data objects represent portions of a whole. It includes variations such as donut charts or exploded pie charts. If the author does not provide explicit data scales, the user agent should generate two axis objects, one with axis-datatype of label and one with construct an axis object

Within a graphical document, graphical object roles are used to define the structured components. For datacharts and maps, metadata objects provide the context to interpret the properties of data objects.

graphics-object

A graphical object is a component within a larger graphical document. It has a single, cohesive meaning that is distinct from a group of related objects. The graphics-object role itself should be used in a diagram or schematic

  • graphics-symbol: A graphic used to convey a simple meaning or category, where the meaning is more important than the particular visual appearance. The symbol itself is an atomic object; children are presentational.

  • graphics-data: A graphical object that represents specific data values. This is an abstract role, one of the following subclasses should be used instead:

    • graphics-datapoint: A distinct data value in a chart or map. A data point may contain text annotations or even nested chart objects.

    • graphics-datagroup: A collection of multiple distinct datapoints with a common feature. The individual data points do not need to be plotted.

    • graphics-dataline: A single element that represents a series of data points in a chart or map.

    • graphics-dataregion: A complex two-dimensional feature or contour on a map or chart.

    • graphics-connector: A connector object represents the relationship between two other data objects. The connector may itself have data values describing that relationship on one or more scales.

    • graphics-summarydata: An element representing some type of statistical summary for a group of data. Examples include trend lines, mean lines, or the various components of a box-and-whiskers box. If an element with this role is not owned by a data group, the summary applies to the chart as a whole.

  • graphics-annotation: Graphical annotations provide metadata about a datachart, map, or other graphical document. The following particular types of annotations are defined for use in datacharts and maps:

    • graphics-datascale: A data scale object represents a dimension of the data and the range of possible values it can include. [ISSUE: Can this role be assigned to a non-rendered metadata object if there is no visible object or group representing the scale? For example, the angular scale in a pie chart is often implicit. How would that affect navigation?]

      • graphics-axis: An axis object represents a data scale by delimiting the spatial extent of the chart or map region. An axis is usually displayed as a visual line, with ticks or categories arranged along it. The position and layout of an axis are directly related to the position and layout of the corresponding data.

      • graphics-legend: A legend object represents a data scale as a list of graphical representation. The legend itself may be re-positioned without compromising the information it conveys. A legend may contain a set of graphics-category values, or it may represent a continuous scale, in which case the legend entries would be graphics-tick elements.

      • graphics-mapscale: A map scale object provides a visual conversion between a defined distance in real world units and the corresponding distance in the graphical display. [ISSUE: How can this be expressed in a machine-interpretable way?]

    • graphics-category: A value within a legend or a categorical or ordinal axis. Usually represented by a visible label plus graphical features such as a matching symbol or an axis tick mark.

    • graphics-tick: An axis tick object represents a labelled point on a numerical or time axis or legend. Unlike a category, the axis ticks do not represent an enumeration of all possible values the data should have; instead, the list of ticks are representative landmark points within a range. Visually, ticks are often displayed as small marks on the axis, but may also be represented by grid lines across the entire data chart region. Graticule lines on a map would be considered a type of tick. Unlabelled (minor) ticks or gridlines should be considered presentation, and should not be assigned this role.

    • graphics-note: A text annotation that adds additional context or information. May be a child to a particular data object, or data group, or may apply to the chart as a whole. [ISSUE: is a graphics-specific role required?]

In addition, the following graphics-related roles from ARIA 1.1 can be used:

img

An single image or graphical representation of content. An element with the role of img can contain multiple drawing objects or image files that when viewed together give the impression of a single image. However, an img for accessibility purposes represents an indivisible component within a document. If the child elements are arranged in a semantically rich structure that users may wish to navigate through, authors should use a graphics-figure or graphics-doc role instead.

figure

A section of content which supports the main document, and should be easily locatable regardless of its position in the layout. A figure may contain a graphical document, an image, or other content such as code snippets or example text. A figure should be referenced from the main text but does not need to be displayed directly where it is referenced. [ISSUE: Need to get this role in ARIA 1.1 and HTML-AAM.]

2. Properties

aria-orientation

used for elements with role graphics-axis or graphics-mapscale to indicate the direction by which values on the axis differ. This specification adds the values depth (for 3D projection views) and other (for angled axes or polar coordinates) to the enumerated values of horizontal and vertical defined in ARIA 1.

aria-datatype

used for elements with role graphics-datascale or any of its subclasses (e.g., graphics-axis and graphics-legend) to indicate the type of data which is measured on that scale. [ISSUE: Is it appropriate to use a property to define these distinctions, or should we use sub-classed roles? Note that the defaults for other properties will depend on the data type.]

Data type is an enumerated property, accepting the following values:

  • boolean (true or false)

  • category (enumerated strings)

  • label (enumerated strings automatically generated by the user agent from the labels of data objects)

  • ordinal (enumerated strings, each with an associated numerical index values)

  • count (positive integers)

  • number (any numerical value)

  • portion (a numerical value between 0 and 1, inclusive, optionally represented as a percentage)

  • datetime (any point in time, including floating times or dates where some parts of the datetime are not specified)

  • duration (a span of time)

The default is category. [ISSUE: is that the best default?]

String data values assigned to boolean, count, or number datatypes should be coerced to the appropriate data type following rules defined in [ECMAScript]. Numerical values which cannot be coerced or are otherwise invalid (e.g., negative values for count data type) are equivalent to NaN (not-a-number).

Data values assigned to a portion data type that include a percentage sign should be converted to a floating point number by (a) removing the percentage sign from the string, (b) coercing the remaining string to a floating point number following rules defined in [ECMAScript], (c) dividing the result by 100. All other data values should be coerced to a floating-point number following rules defined in [ECMAScript]. The following percentage signs should be considered valid:

  • % Ux25 Percent Sign

  • ٪ Ux66A Arabic Percent Sign

  • ﹪ UxFE6A Small Percent Sign

  • ％ UxFF05 Fullwidth Percent Sign

Data values assigned to a datetime and duration should be coerced to a machine representation following the rules for datetime and duration microsyntaxes defined in [HTML 5].

For category and ordinal, user agents should construct a map of category codes (aria-valuenow values) and category labels (aria-valuetext values) from all graphics-category objects that are owned by this graphics-datascale object. Data values assigned to this data type should be matched against category codes first (using numerical coercion for ordinal scales), and category labels second. If the data value does not match any specified category codes or labels, then the data value should be used to generate a new category with the same value for code and label. For category, the data value should be treated as a literal string. For ordinal, the data value should be coerced to a number.

For label, the user agent should generate a set of category strings from the labels of associated datapoints, following the rules for the generation of an accessible name for each element.

aria-valuemin and aria-valuemax

used for elements with role graphics-datascale and aria-datatype of ordinal, count, number, portion, datetime, or duration. The string value of the property should be converted to machine representations according to the rules for the data type. The values represent the plausible or normal range of data on the scale, and not necessarily the range of the actual data set.

The default for aria-valuemin on a graphics scale is negative infinity, except for aria-datatype of count or portion, in which case the default is 0.

The default for aria-valuemax on a graphics scale is positive infinity, except for aria-datatype of portion, in which case the default is 1.

ISSUE: is there a better equivalent to positive/negative infinity for datetime and duration?

ISSUE: Should the user agent calculate default min and max from the axis ticks if not otherwise provided?

aria-valuenow and aria-valuetext

used for elements with role graphics-category or role graphics-tick to represent the value for that tick or category.

The aria-valuenow represents a machine-interpretable value. For scales of data type category this can be a short code which will be used when assigning data. For scales of data type ordinal, it must be a numerical code which will be coerced as a number data type to create the ordered index for this category. For all other scale data types, the value should be interpreted according to the rules of that data type. If not specified, it defaults to the value of aria-valuetext.

The aria-valuetext represents a human-interpretable string equivalent for the tick value or category label. If not specified, it defaults to the accessible name of the object, which may simply be the text content of the element.

aria-datascales and aria-datavalues

used for elements with any role that is a sub-class of graphics-data, to associate the actual data values on each of the scales in the chart, map, or network graph. The aria-datascales property may also be specified on the graphics-document as a whole.

The value of aria-datascales is a delimited list of ID-refs to graphics-scale objects (includinge axes and legends). If it is not specified on a given data element, the value should be taken from the closest ancestor data group or document which has the property defined. The scales referenced in aria-datascales should not include any scale with datatype of label (for which the data values are automatically generated from the accessible name of the data point or group).

The value of aria-datavalues is a delimited list of data values. Each value will be interpretted according to the rules of the data type for the scale identified by the corresponding entry in the aria-datascales list.

There should be the same number of values in both lists; any values without associated scales, or scales without associated values, should be ignored.

A graphics-map document has an implicit aria-datascales value pointing to the generated latitude and longitude scales (in that order). A graphics-piechart document has an implicit aria-datascales value pointing to the generated portion scale. Any other graphics-datachart has an implicit aria-datascales value pointing to the first graphics-datascale object in the chart with a aria-datatype other than label.

ISSUE: How should the strings be delimited? Are comma-separated variables enough, with the possibility for nested strings:

aria-datascales="company-axis, revenue-axis"
aria-datavalues="'Acme Corp.', 12000000"
aria-datavaluearray

used for elements with role graphics-datagroup, graphics-dataline, or graphics-mapregion to represent an array of datapoint values. Each entry in the array should be parsed as if it was an aria-datavalues value for a separate data point with the same aria-datascales value as for this element.

ISSUE: How should the array be represented as a single string? I’m thinking JSON-like notation to separate out the different points, but still allow the more flexible CSV syntax, so that unambiguous strings do not need nested quotation marks:

aria-datascales="x-axis, y-axis, category"
aria-datavaluearray="[1, 100%, "Group A"],[2,70%, "Group A"],
                     [3,85%, "Group B"]"
aria-flowto, aria-owns, aria-flowfrom, aria-parent, ????

How should network graph connections be represented?