Tutorial - Accessibility and Scalability

Accessibility and scalability

Currently the Web is dominated by content that is inaccessible to the visually impaired. However, the need for accessibility is becoming more of a priority, and SVG addresses these concerns for Web content by providing tools for alternative presentations of image content.

In addition to the fact that SVG images are zoomable without the need for third-party magnification tools, SVG images are inherently more accessible than other image formats simply because text strings are represented as XML character data, and not pixel data. The <title> and <desc> tags can be used to provide descriptive text information about the SVG image as a whole (as in "a map of downtown San Jose"), and descriptive text about key elements within the image ("link for light rail schedules"). The SVG Specification includes Conformance Criteria for SVG Generators, which specify requirements that will ensure that SVG images are accessible.

The following example demonstrates the use of the <desc> tag in providing informative reference points for alternative browsers. Using a screen reader, a user could aurally navigate through an SVG image, obtaining important pieces of information that would otherwise be lost in any other image format.

As a demonstration of how accessible tags can enable the "reading" of an SVG image, click the SVG image below, and while keeping the cursor over the image area, press the "T" key to step through the titled elements within the image, and press the "D" key for descriptions of the elements (where they apply). The text area field in the form below the image displays the <title> and <desc> content of the selected SVG elements. Take a look at the SVG source code to see how these tags are incorporated into the image.

SVG's support of CSS2 also means that users can designate personal style sheets that manipulate specifically designed SVG content into formats that are customized for color blind and other visually handicapped people. Guidelines for generating accessible image content can specify style selectors that would be replaced by custom style sheets that users set as a preference in their browser. For instance, red and green content could be replaced by more suitable colors, and fine lines could be replaced by wider stroke widths. Such guidelines do not exist at this time, but the fact that SVG supports Cascading Style Sheets is a step in the right direction.

These accessibility features can also be used to develop content that is scalable for lower resolution and smaller bandwidth media, such as PDAs and other mobile/wireless devices. SVG content can be designed to ensure the "graceful degradation" of content. A full-color, visually rich, interactive and animated SVG image in a desktop environment could convey the same information in a presentation more suited to wireless media through appropriate style sheets and the translation of key XML data. This means that a single SVG image could deliver the same content as visually rich, interactive SVG, as simplified, but optimized, 16-color graphics, or as descriptive, navigable text.

Next lesson: Optimizing SVG