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
:focusable="false"should be included. Internet Explorer treats SVG as a focusable element (an image with focus).
Here's an example of a moderately well marked-up animated SVG,. Hit the "Heat" button.
<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.
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
<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.
<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
: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.
:flow-to doesn't work in some browser and screen reader combinations.
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.
SVG. introduced and all browsers have now implemented support for
:tab-index to define a
<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).
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
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.
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.
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.