Further information
Web accessibility and SVGs.
SVG stands for scalable vector graphics. S.V.G. is a language that, to render a picture, describes many lines instead of using dots that may pixellate. SVG is interactive and may be animated. The current W3C recommendation is SVG version 2 as of late 2016.
! Beware: some basic SVG accessibility features fail in Microsoft browsers and in Safari
- for stand-alone SVG, Microsoft browsers do not expose accessibility mark-up and
:focusable="false"should be included. Internet Explorer treats SVG as a focusable element (an image with focus). - SVG animation doesn't work in Microsoft browsers
- anchors fail in Safari and anchors don't work well in many browsers, with focus not following anchors in some. This browser situation is improving. Can you make it work without anchors?
Accessible animation example
Here's an example of a moderately well marked-up animated SVG,. Hit the "Heat" button.
How to use SVG
- as a stand-alone image, that will render in any browser
- via CSS, as a background image
- as an
<image>or<object>element in HTML.
From HTML5 onwards you can include SVG directly as part of your source code.
As a CSS background image, as with all CSS background images, there's no accessibility or animation available to the user.
If you use the <image> alone in HTML you can have an <alt> attribute. Both of those enable you to provide enough accessible mark-up in some cases to ensure accessibility. If used as HTML <object> element accessible mark-up within the element is recommended. Put your SVG straight in line at part of your HTML code and it behaves as an inline rather than a block element. For purposes of display it's actually just part of the text.
Inline S.V.G.
Firefox and Explorer recognise SVG as 'providing an image' and it will be announced. Additionally you can use ARIA mark-up and you can ensure that it is recognised by every browser by giving it a :role image. SVG accessibility features include the elements <title> and <desc> for description. The element <title> effect is similar to an <alt> attribute but provides tool tips! Multiple <title> elements can be used in an SVG. These titles are not exposed to screen readers.
The <text> element is exposed and accepts web fonts in SVG. This is a great tool and gives capacity for images of text and accessible mark-up.
Using ARIA allows you to put navigation information in and make your SVG more explorable and easy to understand. It gives you the ability to provide the same kind of semantic depth that you get in structured HTML,. It gives structure and with subsequent use of :labeled-by the image can be explored by a screen reader user in the same way that they would explore a web page. Similarly there's the ARIA :describedby="desc" and :desc id="desc" that in combination will announce to accessibility APIs and enable nested structuring. The <desc> element however is not exposed by anything in itself.
ARIA :flow-to doesn't work in some browser and screen reader combinations.
SVG reusable objects
You may define a graphics part with an element called <defs> and clone and re-use the amended <defs> in different places. Browser implementation is weak unfortunately.
In some places other than the definition you can use ARIA :described-by as a feature allowing stacks of different definitions.
Navigation
SVG. introduced and all browsers have now implemented support for :tab-index to define a <button> or <table>. You can put it on anything, a piece of SVG. or part of the element. All of ARIA can be used. To make an SVG button more button-like and give it focus give it an ARIA :role. In the case of a <button> it gets announced as a button as well as being focused-on.
SVG has no original text and few native semantics, in using ARIA there is little to test ensuring the SVG user semantics haven't been broken by ARIA (ARIA overrides HTML semantics).
Scaling
Some of the best support available in understanding SVG may come from Amelia Bellamy-Royds, an invited expert to the World Wide Web consortium. Much of her advice on scaling SVG may be found on CodePen.
Mark-up that will keep stroke weight unchanged as an SVG is scaled may be seen in :vector-effect="non-scaling-stroke".
Use media queries to mark-up SVG for size, screen width and other features of SVG art. Media queries display may be used to change individual parts of SVG that are presented with scaling.
SVG animation
SVG. animation is widely implemented in graphic browsers with much done by the browser and without javascript.
Starting an animation by click, time, date; like :animate attributeName="visibility" to="hidden" begin="heat.click" dur="30s" works very well with voice over interaction in blink based browsers like Macintosh, Chrome and Opera – in conjunction with normal accessibility combinations.
SVG animation doesn't work in Microsoft browsers. You have to use a page of JavaScript to achieve the same as achieved with one line of native SVG animation.
Tools
- CodePens Chris Coyer offers Tools to Visualize and Edit SVG Paths (Kinda!) - the problem with most tools is they create very complicated SVG
- Perl script 'Scour' will clean up SVG and make it simpler to use
- visualization libraries and data visualisation tools are mostly good.
Reliable resources
- WAI-ARIA Graphics Module
- Leonie Watsons Tips for Creating Accessible SVG
- Chaals McCathie Nevile at #id24
- Environments for Humans Conference 2017
- SVG advice repository by W3C on GitHub
- Code snippets for SVG
- Doug Schepers
- Tink: SVG line graphs.
Example
The same file with alt text "thumbs up SVG image" is used at the top of the page as below here. The difference between the two files is that they are constrained in size to fit page design, neither pixellate and both should render in any graphic browser. Both uses of the file are wrapped with alt text.
University information
CRICOS Code: 00126G
