JRegimbal
commented
2 months ago How does this sound @VenissaCarolQuadros?
2024-09-~25~26 WIP
Introduction
At the time of writing, we only use standard SVG elements to create tactile graphics, with interactivity provided via extra attributes. While this graphics are able to be interpretted and displayed correctly by standard SVG viewers, either visually or using a pin array, the content rendered by a standard viewer may not be comprehensible. For example, layers in a tactile graphic should consist of subsets of material in an "overview" drawing of it, but some tactile graphics produced by the team redraw elements for each layer in which they appear. What's more, these are drawn at different scales in order to fill up the pin array, while such scaling could be accomplished in a more standardized fashion using features such as viewBox.
This document is intended to provide guidance on creating IMAGE interactive tactile graphics that "fall back" to a comprehensible state when displayed by non-IMAGE software. In use cases that go beyond those covered here, this principle of compatibility should be applied to the greatest extent possible.
Key Interactive Features
Layers are used to present subsets of the document to the user at various points in order to increase understanding. For example, a flowchart could use layers as a means of progressive reveal, or a multiline chart could separate different data series to aid in comprehensibility.
Layers are indicated using the data-image-layer attribute where the value is space-separated tokens indicating the names of the layers the element and its children belong to. When possible, elements in the same layer should be included under the same g tag. Elements may belong to multiple layers. Elements not included in a layer should only be visible in a "full picture" mode showing all content.
The order of layers may be explicitly specified as a top level attribute using data-image-layer-order where the names of the layers follow in the desired order. This attribute should only appear once. Layer names included in the list but not present in the document should be ignored. Layer names present in the document and not included in the list should appear after those explicitly referenced. Unspecified layers may be presented in order of first appearance.
Targets are used in an interactive guidance mode to draw the user's attention to different parts of the graphic that may cut across layers and SVG elements themselves. When in guidance mode, only the selected content is shown. Content may be selected by using a mask element with the order of the target specified by the data-image-target attribute. Content explicitly shown by the mask will be interpreted by an IMAGE-compatible tactile graphic viewer as being part of the target. Mask elements used for this purpose should not visually modify content of the graphic.
Elements within the graphic for display may have additional text attached to them to be read by a screen reader. Appropriate ARIA attributes should be used in these cases. For example, to label an element, the aria-label attribute should be used.
Since the graphic may contain small details that are only meaningful when represented at a sufficient size, the SVG author can indicate a minimum zoom level for an element and its descendants using the data-image-zoom attribute. Its value is a number indicating the minimum zoom in percent relative to the scale defined by the original viewBox. For example, an element with data-image-zoom="200" would only be rendered when the user zooms to 200% of the original size.
Discouraged Practices
The use of the metadata element to store information that impacts presentation in an IMAGE viewer is discouraged. The metadata element may encode information relevant to IMAGE only if it uses a controlled vocabulary and does not directly impact display or interactivity features.
The redrawing of the same content in multiple places in a graphic is discouraged, since this prevents the file from being understood when viewed with a typical SVG reader.
VenissaCarolQuadros
Our current extensions to SVG to support interactive tactile graphics do not break the actual schema itself, but are vague enough that currently implemented graphics, when displayed on a computer or different software on a pin array, are incomprehensible. Ideally, IMAGE SVGs should only provide enhancements while being perfectly comprehensible in other software. This includes: