SVG Accessibility/Authoring
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