SVG Accessibility/Authoring

From W3C Wiki
Jump to: navigation, search

These are some currently just scribbles, written in alphabetical order they spring to mind. This does not represent a systematic analysis of anything yet, although some of this is informed by the use case images being collected, and I did a preliminary pass through WCAG 2.0 to match things it requires. So far chaals has written all this but feel free to just scribble over the top of anything on this page.

Avoid flashing content

Content flashing at around 5Hz (5 times per second) can trigger dangerous reactions in individuals with certain conditions such as photosensitive epilepsy. Content which flashes can also distract many users, making it more difficult to understand the rest of an image

Can help users who have:

  • Photosensitive epilepsy
  • Difficulty focusing and concentrating

Related requirements

More information

A discussion of detailed requirements to avoid triggering seizure is in WCAG 2.0.

Colour Contrast

Enabling high contrast is generally helpful. There is a WCAG requirement, and there are people who use a high contrast mode - in extremis black on white or vice versa.

For simple diagrams contrast can be provided by only using black and white. Another approach is to enable navigation of individual elements, and adjust the contrast dynamically, e.g. by changing the colour or opacity of a group of elements.

Can help users who have:

  • limited vision
  • difficulty comprehending a complex structure "all at once"

Related requirements

Description - top level

A description of the entire image, in a <desc> element can be offered to a user in place of, or in addition to, a visual rendering.

Can help users who have:

  • no vision
  • limited vision
  • difficulty comprehending a complex structure "all at once"

Related requirements

Logical grouping

Using the <g> element to collect painted elements into a structure representing a unit of meaning (e.g. a house, car, window, machine part, instruction, etc) make it easier to develop tools which can navigate and restyle images to present them in a way matching a given user's needs and preferences.

Can help users who have:

A friend, employer, or service who makes custom tools for them

Related requirements

Problems, issues

Note that this cannot always be done, due to the paint ordering rules of SVG, which paints elements in source order. If <meta> elements or aria attributes could link parts of an image

Nested decription

Using <desc> or <title> elements for significant visual objects that are part of an image, such as an element or collection grouped with a <g> element, can enable a structure to be developed that allows navigation of an image section by section.

Can help users who have:

  • no vision
  • limited vision
  • difficulty comprehending a complex structure "all at once"
  • Friends or associates who make custom tools

Related requirements

Real text

Instead of using path elements to draw text, proving real text, if necessary styled with a font, enables the text to be made available directly to users e.g. through speech output, or re-styled on demand to match preferences such as large yellow sans-serif text on a black background

Can help users who have:

  • no vision
  • limited vision
  • difficulty reading

Related requirements

Separation

Visual elements clustered together are harder to distinguish than if they are separated by "white space".

Can help users who have:

  • Effective vision

Stable controls

Application controls should have consistent positioning, order in navigation structures, appearance and labeling.

Can help users who have:

  • Low or no vision
  • Difficulty remembering things

Related requirements

Supplement colour

Users have varying levels of ability to distinguish colours. Where colour is used as a distinguishing characteristic, ensure there are other mechanisms to determine the same information. For example traffic lights use a specific positioning to ensure that users who cannot distinguish red, orange and green can still determine which light is currently lit. Position, background patterns, text labels, can all provide a way to replicate distinctions primarily communicated through colour.

Can help users who have:

  • Colour blindness
  • Low contrast vision - see also the section on Colour Contrast

Related requirements

Titled images

Provide a meaningful, but short, title for each image using a <title> element

Related requirements