Marja-Riitta Koivunen <marja@w3.org>
Copyright © 1999 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability,
trademark,
document
use and software
licensing rules apply.
SVG offers a number of features which may make graphics on the Web accessible to a wider group of people. This can only occur if these features are correctly used. This very draft note attempts to describe the possibilities offered, and how they can be used.
This is some initial ideas which may be proposed as a note on the accessibility features of SVG. It is a preliminary working draft. It is inapropriate to reference W3C working drafts as anything other than "work in progress". This document is currently highly unstable. It is not expected to be stable before the Scalable Vector Graphics Specification [SVG] becomes a W3C Recommendation. However, comment is invited.
This document is a potential draft W3C Note and has not yet been approved by anyone. In particular no endorsement is implied or made by the World Wide Web Consortium, the Web Accessibility Initiative, nor by the working groups or members thereof. Hopefully it will grow up into a real document one day, or will quietly resign and live out its autumn years in dignity and anonymity.
Publication of a W3C Note does not imply endorsement by the W3C Membership. A list of current W3C technical reports and publications, including working drafts and notes, can be found at http://www.w3.org/TR.
Please send comments to Charles McCathieNevile, Marja-Riitta Koivunen
@@To do list:
Scalable Vector Graphics [SVG] is an XML based mark-up language representing a new way of producing graphics for the Web. It provides many accessibility benefits, some because it uses a vector graphics model, some because it is built on top of XML, and some spring from the design of SVG itself.
If SVG format replaces the raster-based formats such as PNG, JPEG and GIF as the standard on the Web it offers the potential to greatly improve the accessibility of graphic content on the Web.
This document highlights the features in SVG which give rise to that potential. The document uses an example which is successively built up to illustrate how various features should be used together to create an accessible SVG graphic. The examples will be readily comprehensible to somebody with a good working knowledge of XML, although also a reader with only a basic grasp of HTML should be able to make sense of them.
Vector graphics model means that images contain information of the
graphical shapes and their relations while raster graphics contains only color
information for matrices of dots that form the image. Vector graphics is not a
new technology as such, on the contrary, the first CRT screens were actually
only capable of showing vector images. However, this is the first vector
graphics standard developed for Web based images.
Vector graphics based images have many accessibility benefits when compared to raster images. One benefit is that the structural information of an SVG image is available and it can be utilized by rendering tools or sometimes even directly by the user.
Because the structural information is available, the SVG images are also highly scalable. They can be zoomed and resized as needed by the reader without any loss of quality. This can help users with low vision or users using tactile graphic devices, which typically have a very low resolution .
The following example illustrates the scalability of a vector graphics image. It shows a small image. When the images is expanded, the PNG image suffers a significant loss of quality, while the SVG image looks as smooth as the small image.
| The small image: |
|
| Enlarged PNG: |
Enlarged SVG: |
A major benefit of a document format in XML is that it can be created or edited by a text-processing application. A number of popular Web design tools are in fact enhanced text editing applications, and for users with certain types of disabilities these are much easier to use. On the other hand, because it is a graphics format it is possible to create an SVG authoring tool that requires very little reading and writing, benefitting people with different types of disabilities. Further benefits which are available as a result of using XML, such as the ability to attach stylesheets and make use of namespaces and XML structure will be discussed later in this note.
Authors specify equivalent alternatives by including the following text elements in any SVG container or graphics element:
titledescThis example is a simple SVG document that includes a title and description for an image of a computer network, but does not have any graphic components that can be drawn.
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title>Network</title> <desc>An example of a computer network based on a hub</desc></svg>
An SVG image can consist of several hierarchical components each of which can have a title and a description. By using the hierarchy and the equivalents it is possible to create a rough mental model of the image without being able to see the graphics of the image. Therefore it is important that the SVG authors carefully build the hierarchical component structure (@ refer to WCAG guidelines about providing structure@).
The user who explores a document containing SVG images can easily see which graphical elements construct the image of each component and what graphics in the components is re-used. This does not decrease the need for author-provided equivalent information, but gives additional information when the user or a special device needs it and is able to understand it. Re-using the component information helps in reducing and simplifying the definition of a complicated image in managing the image. @@This is nearly the same as the previous
The following example extends the network image component introduced in the previous example by introducing five subcomponents:
Each subcomponent is included as a container element with an
id attribute and equivalent information. Although this image does
not yet contain any graphics elements we already know quite a lot about it.
(Note: To easily identify changes from the previous version of the example
new content is strongly emphasized)
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title>Network</title> <desc>An example of a computer network based on a hub</desc><g id="hub"> <title>Hub</title> <desc>A typical 10BaseT/100BaseTX network hub</desc> </g><g id="ComputerA"> <title>Computer A</title> <desc>A common desktop PC</desc> </g> <g id="ComputerB"> <title>Computer B</title> <desc>A common desktop PC</desc> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> </g> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> </g> </svg>
The component hierarchy with alternative equivalents can be used in different ways by different renderers. For instance, a simple non-visual renderer can provide access to the component hierarchy and allow the user to navigate her way up and down or at a certain level of the structure, giving her the equivalent description of each encountered component. A multimedia-capable renderer might name each component that has focus through speech output - much like tooltips are used in some Web browsers to render alternative text for images.
<!-- personal stylesheet for rudimentary rendering of SVG image titles and descriptions -->title { display: block } desc { display: inline } svg title { font-size: 120%; font-weight: bolder; volume: louder; pitch: lower }
The user who explores a well-constructed SVG image can easily discover which graphical elements construct each component and what components are re-used. This does not decrease the need for author-provided equivalent information, but gives additional information when the user or a special device needs it (and is capable of using it). The ability to re-use structured components also helps authors, because images can be edited through their structure as well as through the individual graphic elements. The ability to do this in an authoring tool is one of the requirements of the Authoring Tool Accessibility Guidelines
SVG provides a number of basic shapes, with which most people are familiar. Rectangles, circles, polygons and ellipses can all be easily created by name, making it a fairly simple matter to determine the basic shape or shapes used to represent an object. In the following example (which will be the hub for the network image) we have two rectangles, one inside the other, and a small circle inside the larger rectangle:
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><g transform="translate(180 200)><title id="hub">Hub</title> <desc>A typical 10BaseT/100BaseTX network hub</desc> <rect width="253" height="84"/><rect width="230" height="44" x="12" y="10"/><circle x="220" y="64" r="7"/></g></svg>
When the graphics cannot be rendered as a visual image there might be other means to understand the relations of the graphics elements. As a simple example, the stylesheet introduced in section 2.2 can be extended to provide some very rudimentary information about the image:
<!-- personal stylesheet for very rudimentary non-graphic rendering of SVG images -->title { display: block } desc { display: inline } svg title { font-size: 120% ; font-weight: bolder ; volume: 120% ; pitch: lower } rect:before { content: "rectangle " } ellipse:before { content: "ellipse " } circle:before { content: "circle " } path[d ~= z]:before, polygon:before { content: "closed shape " }
Download the personal stylesheet http://www.w3.org/1999/09/SVG-access/my-svg-access-style
SVG allows the construction and re-use of graphic components. This makes it easier to understand the structure of complex images as the re-usable components are defined only once. An authoring tool may also utilize this feature to help creating and modifying graphics with the same components. This may help users having difficulties in fine motor control.
In this example we have defined a socket, and added five of them to the hub from the previous example:
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><g transform="translate(180 200)"> <!-- Define the socket --><defs> <g id="hubPlug"> <desc>A 10BaseT/100baseTX socket</desc> <path d="h5 v-9 h12 v9 h5 v16 h-22 z"/> </g> </defs><title id="hub">Hub</title> <desc>A typical 10BaseT/100BaseTX network hub</desc> <text x="0" y="-16"> <tspan xlink:href="#hub"/> </text> <rect width="253" height="84"/><rect width="230" height="44" x="12" y="10"/><circle x="220" y="64" r="7"/><!-- five groups each using the defined socket --> <g transform="translate(16 20)" id="sock1"> <title>Socket 1</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(61 20)" id="sock2"> <title>Socket 2</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(106 20)" id="sock3"> <title>Socket 3</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(151 20)" id="sock4"> <title>Socket 4</title> <use xlink:href="#hubPlug"/> </g> <g transform="translate(196 20)" id="sock5"> <title>Socket 5</title> <use xlink:href="#hubPlug"/> </g> </g></svg>
In addition to As well as shapes and
lines, SVG allows text elements to be included in an image.
As tThe image of the text is generated from
actual the content of the text element,
the same content can be also used by an assistive technology,
for instance to read the text content to the user.
In the following example we have modified the earlier network example by making a text label. That label uses the text in the title directly, rather than having to copy it and repeat it.
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><!-- give the title an id, so it can be referred to --> <title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <!-- Add a text element which includes text by URI reference --> <text x="0" y="-16"> <tspan xlink:href="#mainTitle"/> </text> <g id="ComputerA"> <title>Computer A</title> <desc>A common desktop PC</desc> </g> <g id="ComputerB"> <title>Computer B</title> <desc>A common desktop PC</desc> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> </g> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> </g></svg>
SVG images can also include components or complete images from other documents using XML Linking Language [Xlink] Xlink enables easy construction and re-use of libraries of known images either locally or on the Web. For authors, this means being able to use a known graphic component even when it cannot be seen. For users, a central image library helps to learn to identify the standard graphic components.
The following example adds some graphics for the cables directly to the network image, and uses images and symbols defined elsewhere for the rest of the graphics.
@@Note that this needs to be compared to the previous network <?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-16"> <tspan xlink:href="#mainTitle"/> </text> <!-- use the hub image and its title and description information. --> <g id="hub"> <image xlink:href="http://www.w3.org/1999/09/SVG-access/hub"/> </g> <!-- use a computer defined as a symbol. Scale it to fit here --> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <!-- use the same computer symbol for computer B --> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <!-- Draw a cable directly. --> <path d="M207 228c207,250 190,240 170,270"/> </g> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> </g> </svg>
Note that there is no title or desc for the hub,
since it is an SVG image and already contains those elements with general
descriptions. Each computerhas a different title, but
there is already a desc defined as part of the
symbol so it does not need to be repeated.
One of the main themes in Web Content Accessiblity Guidelines [WAI-WEBCONTENT] is separating presentation from the other content. When presentation is separate the user can have more control when it is necessary to adjust the style, such as color of elements or font size, to her specific needs. Furthermore, it is also easier to adjust the presentation to different output devices. SVG is using CSS type means for controlling the presentation.
When presenting text SVG lets authors to define their own fonts and use that as style. This improves accessibility as there is no need to convert text to images and loose that information when using non-visual devices.
Finally, when the presentations need to be dynamic, SVG provides support for declarative definition of animations. When animation is used it is important for accessibility that the user can turn it off when necessary. (@ can the turning off be done with stylesheets? Probably not - unless there is a way to say animate { display:none } but I doubt it @)
SVG uses CSS syntax and properties to specify formatting effects. As noted in Web Content Accessiblity Guidelines [WAI-WEBCONTENT], and in Accessibility Features of CSS2 [CSS-access], this provides a means for giving the author the ability to specify rich presentations, while allowing the user to ensure that the document is presented in a way which meets their needs.
The following example (the computer image for the network we have been
building) has a link to a separate stylesheet by using ?xml-stylesheet element. The stylesheet
defines styles for the components of the computer image. The image itself
defines some color gradients to be used at the stylesheet, and attaches
class attributes to some parts of the
computer so that they can be referred to from the stylesheet. The outline
class defines an outline with less graphical details for each component. This
could be used by low resolution devices.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><defs> <radialGradient id="screenGrad"> <stop offset="100%" style="color:#AAA9A9"/> <stop offset="0%" style="color:#1E1A16"/> </radialGradient> <linearGradient id="discGrad"> <stop offset="100%" style="color:#F7EED2"/> <stop offset="0%" style="color:#1E1A16"/> </linearGradient> <symbol id="terminal"><desc>A common desktop PC</desc> <g id="monitorStand" transform="translate(40 120)"> <title>Monitor stand</title> <desc>One of those cool swivelling monitor stands - the little ones that sit under the monitor</desc> <rect class="outline" width="44" height="10"/> <path d="m5 10a24 10 0 0 1 10 79z"/> <rect width="14" height="4" x="10" y="18"/> </g> <g id="monitor"> <title>Monitor</title> <desc>A very fancy monitor</desc> <rect class="outline" width="164" height="120"/> <rect class="screen" width="142" height="95" x="11" y="12" /> </g> <g id="processor" transform="translate(-37 122)"> <title>The computer</title> <desc>A desktop computer - broad flat box style</desc> <rect class="outline" width="240" height="83" /> <g id="discDrive" transform="translate(140 29)"> <title>disc drive</title> <desc>A built-in disc drive</desc> <rect class="outline" width="82" height="30" /> <rect class="disc" width="58" height="8" x="12" y="10" /> <rect class="light" width="10" height="4" x="55" y="22" /> </g> <circle x="200" y="68" r="4"/> </g> </symbol> </defs> <g id="ComputerA" transform="translate(180 85)"> <title>Computer A</title> <use xlink:href="#terminal"/> </g> </svg>
Download the SVG: http://www.w3.org/1999/09/SVG-access/computer
The stylesheet defines a style for the terminal and its components. Notice that the gradiants defined for screen and disc are referenced here. The styles relevant to the computer image are presented in the following:
<!-- Some style for the computer -->
#terminal .outline {
fill: #F7EED2;
stroke: #1E1A16;
stroke-width: 0.3}
.computer {
fill: #F7EED2;
stroke: #1E1A16;
stroke-width: 0.3}
.screen {
fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#screenGrad);
stroke: #1E1A16;
stroke-width: 3}
.disc {
fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#discGrad);
stroke:#1E1A16;
stroke-width: 0.3}
...Download the stylesheet http://www.w3.org/1999/09/SVG-access/svg-computer-style
Some media are suited to high-resolution graphics, some to lower resolution
graphics, or the ability to change between the two. It is also possible to
use CSS to provide a more appropriate default presentation for different sets
of user needs. We can expand our stylesheet to use the special
outline class and the CSS @media rule to provide a simplified
version of the image for low-resolution media, as the following example
shows:
@media embossed braille handheld projection {
<!-- only show things with the special class "outline" -->
g { display: none }
.outline { display: svg }
text { display: svg }
}
<!-- Guess I should have a voice one as well -->
@media screen {
<!-- style for the hub -->
.socket {
fill: url(http://www.w3.org/1999/09/3-network1#sockGradient) #111 ;
stroke: #1E1A16 ;
stroke-width: 0.3 }
.hub {
fill: #007CC5 ;
stroke: #1E1A16;
stroke-width: 0.3 }
#hub .outline {
fill: #75C5F2 ;
stroke: #1E1A16 ;
stroke-width: 0.3 }
.light {
fill: #83C220 ;
stroke: #1E1A16;
stroke-width: 0.3 }
.cable { fill: none ;
stroke: #D11B1B ;
stroke-width: 11 }
<!-- Some style for the computer -->
#terminal .outline {
fill: #F7EED2 ;
stroke: #1E1A16 ;
stroke-width: 0.3 }
.computer {
fill: #F7EED2 ;
stroke: #1E1A16 ;
stroke-width: 0.3 }
.screen {
fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#screen) ;
stroke: #1E1A16 ;
stroke-width: 3 }
.disc {
fill: url(http://www.w3.org/1999/09/SVG-access/computer-styled#disc) ;
stroke:#1E1A16 ;
stroke-width: 0.3 }
} Download the style sheet http://www.w3.org/1999/09/SVG-access/svg-style
Text is important for accessibility as it can be transformed to many senses by using assistive technologies. However, it is also important for branding and visual communication purposes in general to enable the author to control the presentation of the text. SVG allows this by providing support for using already existing fonts or creating new fonts by using the graphics elements of SVG. This provides authors with a powerful new mechanism for offering arbitrary fonts of much greater complexity than was previously possible. At the same time the actual text rendered in those fonts can be accessed directly by the user agent.
The following example uses a font named BaseTwelve to create the W3C Logo. The title of a group is used as rendered text so that the text needs to be defined only once. The style definitions are gathered together and referenced through the classes in the elements instead of using a style attribute. This makes it easier to change the style when experimenting with the logo. It is also easier to override styles for different classes of elements which might be necessary sometimes. For instance, users with low vision or with color deficiencys might need to do it even for logos.
<?xml version="1.0"?><
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width=".9in" height="0.6in" viewBox="0 0 72 48">
<defs>
<style type="text/css">
.w3crect { fill:white; stroke-width:0 }
.w3ctext { font:BaseTwelve; font-size:45 }
.w3cline { fill:black; stroke-width:1 }
</style>
</defs>
<g id="w3clogo">
<title id="w3c">W3C</title>
<rect class=w3crect width="29" height="29"/>
<text class=w3ctext x="5" y="7.4">
<tspan xlink:href="#w3c"/>
</text>
<path class=w3cline d="M0 .5H72">
<path class=w3cline d="M0 46.5H72">
</g>
</svg>The logo can be used by linking to it from an image element e.g. <image
xlink:href="http://www.w3.org/Icons/w3c_home.svg"/>. If the user does not have
the BaseTwelve font then another (in this case default) font will be used to
render the text. Because the font is used by referencing
it from a CSS style declaration a user can also easily
override it. Of course since this is a normal XML document the personal
stylesheets given above @!!where above!!@ will render the content (The letters
"W 3 C").
A new font for the logo can be defined by using the font element. The following example defines a font named w3clogofont. It includes the W, 3, and C letters . Each glyph element has a human-readable title, and the letter C has a description of the special effect provided for it. Some of the actual glyph data included in the path elements is not shown here to save space, it is replaced by "...". All the data is available on the Web [W3CLOGO]@ or some other way to reference it@. Use of special fonts allows designers to use SVG to provide any font they can imagine, without requiring them to turn the text itself into an image:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd">
<svg width=".9in" height="0.6in" viewBox="0 0 48 72">
<defs>
<font id="w3clogofont" unitsPerEm="55"
capHeight="39.604" xHeight="25"
ascent="23" descent="12" bbox="0 -12 40 55"
baseline="0" centerline="20"
mathline="20" topline="43">
<glyph unicode="87" bbox="0 0 39.1157 39.604"
horizAdvX="39.1157">
<title>W</title>
<path style="fill:#006dff"
d="M 19.8022 0 L 26.8921 24.105
L 33.9819 0 L 39.1157 0 L 27.3809 39.604
L 26.8921 39.604 L 19.5576 15.0596
L 12.2236 39.604 L 11.7349 39.604 L 0 0
L 5.13379 0 L 12.2236 24.105
L 17.0151 7.87262 L 14.6685 0z"/>
</glyph>
<glyph unicode="51" bbox="0 0 19.9981 39.604"
horizAdvX="19.9981">
<title>3</title>
<path style="fill:#006cff" d="M 19.9981 26.893
C 19.9981 30.479 19.0445 33.494
17.1377 35.938 C 15.2305 38.383 12.7613 39.604
9.73001 39.604 ... C 7.44778 39.604 5.4595 38.879
3.76468 37.429 C 2.06979 35.978 0.815002 34.016
0 31.537 L 4.00931 29.875 C 4.59671 31.375
5.37109 32.5569 6.33249 33.42 C 7.29398 34.284
8.4263 34.715 9.73001 34.715 C 11.0991 34.715
12.2569 33.95 13.2022 32.418 C 14.1475 30.886
14.6201 29.045 14.6201 26.893 C 14.6201 24.513
14.1143 22.671 13.1045 21.368 11.9297 19.836
10.0884 19.069 7.57858 19.069 L 5.6236 19.069
5.6236 16.723 12.4688 4.88995 4.20511 4.88995
1.9068 8.80096 0.440491 8.80096 0.440491 0
19.5093 2.396 12.2725 14.864 C 14.8155 15.68
16.7383 17.163 18.042 19.314 C 19.3457 21.466
19.9981 23.992 19.9981 26.893z"/>
</glyph>
<glyph unicode="67" bbox="0 0 20.416 39.604"
horizAdvX="20.416">
<title>C</title>
<desc>the shadow of a raised letter C</desc>
<path style="fill:#000000" d="M 19.306 0
C 19.306 0 20.138 5.05597 20.138 5.05597
C 20.138 5.05597 17.194 10.688 17.194 10.688
...
C 17.194 10.688 16.064 8.29895 14.187 6.97595
C 12.605 5.862 11.574 5.62 9.96298 5.95197
C 7.89297 6.37897 5.547 8.85297 4.52197 11.904
C 3.297 15.555 3.28497 17.321 3.24197 18.944
C 3.17398 21.546 3.58398 23.083 3.58398 23.083
C 3.58398 23.083 1.797 19.776 1.81299 14.933
C 1.82498 11.477 2.36798 8.34198 3.96799 5.24799
C 5.375 2.52795 7.46698 0.895996 9.323 0.703979
C 11.242 0.505005 12.759 1.43097 13.93 2.43201
C 15.161 3.48297 16.405 5.78101 16.405 5.78101
C 16.405 5.78101 19.306 0 19.306 0z"/>
<path style="fill:#000000" d="M 19.669 28.608
C 19.669 28.608 18.368 30.933 17.557 31.829
C 16.746 32.726 15.296 34.305 13.504 35.094
...
C 11.712 35.883 10.773 36.032 9.00299 35.862
C 7.23398 35.691 5.58899 34.667 5.013 34.241
C 4.43698 33.814 2.965 32.555 2.133 31.382
C 1.30099 30.208 0 27.862 0 27.862
C 0 27.862 0.724976 30.214 1.17798 31.211
C 1.43997 31.785 2.24197 33.543 3.38098 35.073
C 4.44299 36.499 6.50598 38.955 9.64197 39.5099
C 12.778 40.064 14.933 38.656 15.467 38.315
C 16 37.974 17.124 37.033 17.835 36.272
C 18.577 35.478 19.28 34.464 19.669 33.856
C 19.953 33.412 20.416 32.513 20.416 32.513z"/>
</glyph>
<kern u1="87" u2="51" k="4.207"/>
</font>
<style type="text/css">
.w3crect { fill:white; stroke-width:0 }
.w3ctext { font:w3clogofont; font-size:45 }
.w3cline { fill:black; stroke-width:1 }
</style>
</defs>
<g id="w3clogo">
<title id="w3c">W3C</title>
<rect class=w3crect width="29" height="29"/>
<text class=w3ctext > x="5" y="7.4"
<tspan xlink:href="#w3c"/>
</text>
<path class=w3cline d="M0 .5H72">
<path class=w3cline d="M0 46.5H72">
</g>
</svg>The animations model is being jointly developed by the working
groups for SVG and the Synchronised Multimedia Integration Language (SMIL)
[SMIL-boston]. The model offers a declarative approach for creating dynamic
Web content In many cases, it is simpler to understand and use than the
programmatic model used in scripting languages, such as ECMAscript or
Javascript.
Hopefully the animation model will allow user agents to provide much clearer information about what will happen in an animation when rendering to an environment which does not have the media capabilities presumed by the author. At the moment this is theoretical - the authors are not aware of any implementations, and consequently this is not a well-understood area. This feature will need to be understood by User Agents, and information about the changes will need to be made available to the user, if there is to be any accessibility benefit. Note also the User Agent Accessibility Guidelines [WAI-USERAGENT] requirement that users can stop or control the rate of any animation.
In the following example we use animation to show Computer B being connected to the hub:
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-16"> <tspan xlink:href="#mainTitle"/> </text> <g id="hub"> <use xlink:href="http://www.w3.org/1999 /09/SVG-access/hub#theHub"/> </g> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M207 228c207,250 190,240 170,270"/> </g> <-- when Computer B gets a focus, make the cable appear --> <!-- @@note that the syntax for this is not entirely clear from the current draft specification --> <animate xlink:href="#CableB" attribute="opacity" from="0" to="1" begin="id(ComputerB)(onfocus)" dur="2s" fill="freeze"/> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> <!-- provide a graphic representation of Cable B --> <path d="M252 228c320,250 400,240 450,270"/> </g> </svg>
The more information the author can provide of an SVG image and its components the better it is for accessibility. Adding Metadata to a document can help the user in searching for information, e.g. documents with a suitable accessibility rating, or in understanding relationships between components which cannot be easily expressed by using the SVG container model .
The following example uses XML namespaces [NAMESPACE] and the Resoruce Description Framework [RDF] to add some metadata about the cables connecting the computers and the hub to the earlier network image. In addition, it includes also metadata about the creators of the example.
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450"><metadata> <!-- some SVG metadata @@ when the syntax is defined... --> <!-- some other metadata, imported using XML namespaces --> <rdf:RDF xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns" xmlns:dc = "http://purl.org/dc/elements/1.0/" xmlns:connect = "http://www.w3.org/1999/08/29-svg-connections-in-RDF"> <rdf:Description about="#CableA"> <connect:ends> <rdf:Bag> <rdf:li rdf:Resource="#socket1"/> <rdf:li rdf:Resource="#ComputerA"/> </rdf:Bag> </connect:ends> </rdf:Description> <rdf:Description about="#CableB"> <connect:ends> <rdf:Bag> <rdf:li rdf:Resource="#socket2"/> <rdf:li rdf:Resource="#ComputerB"/> </rdf:Bag> </connect:ends> </rdf:Description> <rdf:Description about=""> <dc:creator> <rdf:Bag> <rdf:li>Chris Lilley</rdf:li> <rdf:li>Daniel Dardailler</rdf:li> <rdf:li>Charles McCN</rdf:li> </rdf:Bag> </dc:creator> </rdf:Description> </rdf:RDF> </metadata><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-16"> <tspan xlink:href="#mainTitle"/> </text> <g id="hub"> <use xlink:href="http://www.w3.org/1999/09/SVG-access/hub#theHub"/> </g> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M207 228c207,250 190,240 170,270"/> </g> <animate xlink:href="#CableB" <animate xlink:href="#CableB" attribute="opacity" from="0" to="1" begin="id(ComputerB)(onfocus)" dur="2s" fill="freeze"/> <g id="CableB"> <title>Cable B</title> <desc>10BaseT twisted pair cable</desc> <path d="M252 228c320,250 400,240 450,270"/> </g> </svg>
The SVG specification allows the use of XML namespaces [NAMESPACE] to introduce elements from other XML applications. In particular, the text, title and desc elements contain structured content, which can be marked up using extension to the SVG DTD or using a separate and already-known namespace. In the following example we use the Ruby specification to provide some pronunciation information..
@@Yeah! A ruby is a good exmple... if I can use a sensible-size namespace...
<?xml version="1.0"?><?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" type="text/css"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG August 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19990812.dtd"><svg width="6in" height="4.5in" viewBox="0 0 600 450" xmlns="http://www.w3.org/1999/08/12/WD-SVG-19990812/" xmlns:ruby!!! ><title id="mainTitle">Network</title> <desc>An example of a computer network based on a hub</desc> <text x="0" y="-16"> <tspan xlink:href="#mainTitle"/> </text> <g id="hub"> <use xlink:href="http://www.w3.org/1999/09/SVG-access/hub#theHub"/> </g> <g id="ComputerA" transform="translate(120 270)"> <title>Computer A</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="ComputerB" transform="translate(400 270)"> <title>Computer B</title> <use xlink:href="http://www.w3.org/1999/09/SVG-access/computer#terminal" transform="scale(0.75)"/> </g> <g id="CableA"> <title>Cable A</title> <desc>10BaseT twisted pair cable</desc> <path d="M207 228c207,250 190,240 170,270"/> </g> <animate xlink:href="#CableB" <animate xlink:href="#CableB" attribute="opacity" from="0" to="1" begin="id(ComputerB)(onfocus)" dur="2s" fill="freeze"/> <g id="CableB"> <title>Cable B</title> <desc><net:networkSpeed>10BaseT</net:networkSpeed> twisted pair cable</desc> <path d="M252 228c320,250 400,240 450,270"/> </g> </svg>
DOM means that there is a standard way of interacting with the document that can be used by existing tools and techniques. This is particularly beneficial to assistive technologies which are used in conjunction with "standard" software which exposes the DOM. For example, a screenreader which is used to provide voice output from a variety of applications can be customised to take advantage of standard APIs such as DOM to provide better access than would be possible if it were relying entirely on the standard rendering engine (perhaps a graphics editor, or a browser plug-in) for data. An assistive technology can also use the DOM to change an SVG image to suit the needs of a user. Note that it is a requirement of the User Agent Accessibility Guidelines [WAI-USERAGENT] that user agents implement the DOM and export interfaces to assistive technologies.
The specification itself provides benefits to accessibility. It requires conformance to accessibility guidelines as part of conformance for tools. It also provides an appendix on accessibility [SVG-spec-access]. @@and with luck I'll poke into all the examples to make them good examples of accessibility. The first part of that is including images everywhere, which I imagine is a work item for the SVG group.
The first source for information about SVG is the specification itself [SVG]. In addition, the public Web page of the W3C SVG working group [SVG-page] is a good source of information, including articles and papers about SVG, news of implementations, etc.
W3C's Web Accessibility Initiative (WAI) addresses accessibility of the Web through five complementary activities that:
WAI's International Program Office enables partnering of industry, disability organizations, accessibility research organizations, and governments interested in creating an accessible Web. WAI sponsors include the US National Science Foundation and Department of Education's National Institute on Disability and Rehabilitation Research; the European Commission's DG XIII Telematics for Disabled and Elderly Programme; Telematics Applications Programme for Disabled and Elderly; Government of Canada, Industry Canada; IBM, Lotus Development Corporation, Bell Atlantic dand NCR.
Additional information on WAI is available at http://www.w3.org/WAI.
The W3C was created to lead the Web to its full potential by developing common protocols that promote its evolution and ensure its interoperability. It is an international industry consortium jointly run by the MIT Laboratory for Computer Science (LCS) in the USA, the National Institute for Research in Computer Science and Control (INRIA) in France and Keio University in Japan. Services provided by the Consortium include: a repository of information about the World Wide Web for developers and users; reference code implementations to embody and promote standards; and various prototype and sample applications to demonstrate use of new technology. In September 1999, more than 350 organizations are Members of the Consortium. For more information about the World Wide Web Consortium, see http://www.w3.org/
The following people have contributed directly to the content of this document:
Dan Brickley, Daniel Dardailler, Ian Jacobs, Chris Lilley, Eric Prud'hommeaux, Ralph Swick
We have also drawn on the work of:
The SVG Working Group and the WAI Protocols and Formats Working Group