Accessible Web Graphics with SVG and Canvas

SVG

Scalable Vector Graphics

Like HTML for Graphics

• Shapes as elements, geometry as attributes
• Styled with CSS (or attributes)
• Linking SVG Views
• Raster image support
• Scriptable DOM
• Dynamic, interactive, animatable
• Images or Applications

Code sample of SVG 'circle', 'rect', and 'path' elements, with rendered view of results.

Like Illustrator for the Web

Origin of SVG

Several input technologies

• PGML (Adobe, IBM, Netscape, Sun)
• VML (Microsoft, Autodesk, Hewlett-Packard, Macromedia)
• WebCGM (Orange, PCSL, PRP)
• HGML (CCLRC, Inso, JISC, Xerox)
• DrawML (Excosoft)
• Web Schematics (CCLRC)

SVG merged aspects of all of these into one.

The Rise and Fall and Rise of SVG

A line chart showing the general trend of SVG usage from 1998 to present.

• 1998: SVG begins, usage low
• 2001: Adobe SVG Viewer 3, usage rises
• 2005: Adobe adopts Flash, usage rises to moderate usage, then drops
• 2008: Apple blocks Flash, usage rises again slightly
• 2010: IE9, usage rises moderately to previous high
• 2011: Retina, usage rises sharply
• 2012: Android, usage continue rise
• 2014: Today, usage rise to widespread usage

Common Uses of SVG

A line chart showing the general trend of SVG usage from 1998 to present.

• icons: instead of icon fonts (Ian Feather on lonelyplanet.com)
• backgrounds
• logos
• data visualization D3.js
• games
• applications

Drawing detail

A detailed drawing of a yellow sports car.

Drawing detail, part 2

A simple drawing of a yellow compact car.

Rasters vs. Vectors... Fight!

• Bitmaps (PNG, JPEG, GIF, BMP): sets of colored dots no "objects" good for photos
• Vectors: instructions for drawing shapes each shape is an object good for line art, illustration, etc.
• Scriptable (see also Canvas)
• Often smaller file sizes (4 KB vs. 8 KB), more if using gzip

An illustration contrasting blocky raster graphics and smooth vectors.

SVG Shapes

The different styles and shapes of SVG.

• fill
• stroke, stroke-width, stroke-dasharray
• 'line' element
• 'rect' element
• 'circle' element
• 'ellipse' element
• 'polyline' element
• 'polygon' element
• 'path' element
• 'use' element

Text

• Text is text: readable, selectable, indexible, searchable, findable, translatable ...
• Stylable fill and stroke
• Supports WebFonts including WOFF, TTF, OTF, and SVG Fonts
• It's easy to make curvy text along a path!
• Logo safe!

Transforms

Transforms alter the coordinate grid, not just the shape.

• translate
• rotate
• scale
• skewX
• skewY
• matrix

Animation

Transforms alter the coordinate grid, not just the shape.

• Declarative animation SMIL, CSS
• Scripted animation smilScript, FakeSmile, Raphäel, other script libraries
• Easing with keysplines, etc.

Scripting

Transforms alter the coordinate grid, not just the shape.

• View Source!
• Debugging Inspect Element
• Generate images programmatically client-side or server-side
• Add interactivity and animation

Responsive Image Format

Demo of the HTML5 logo with different levels of detail at different sizes.

SVG with CSS Media Queries

An illustration with the SVG logo at 3 different sizes, full, medium, and icon.

• CSS Media Queries allow authors to specify different styles based on size, display format, and other conditions
• SVG with CSS Media Queries creates a powerful mechanism for reusable components
• All images on this page (site id, main figure, bullet points) are the same SVG file, with changes in visibility and opacity of certain elements based on the size

How do I create SVG?

• Images
  • Adobe Illustrator
  • Inkscape (open source)
  • SVG-Edit
• Script and Animations
  • D3.js: data visualizations
  • Snap.svg: animations
• Text Editor
  • vi
  • emacs
  • any text editor

Canvas API

• Scriptable image
• Draws shapes, then flattens then to drawing surface
• 2D and 3D API
• Accessibility provided by text fallback in HTML
• Several useful methods, such as:
  • addHitRegion(): makes areas in a canvas focusable and clickable
  • drawFocusIfNeeded(): draws a focus ring around target area

Canvas Example

Code sample of drawing overlapping rectangles with the Canvas API, with rendered view of results.

SVG and Canvas API

Use both!

SVG vs. Canvas API

SVG and Canvas API Scripting

• SVG and Canvas have similar drawing capabilities.
  • Canvas has a dedicated drawing API for drawing and styling shapes
  • SVG uses the generic DOM API to create shape elements, and uses CSS to style them
• Scripting SVG can be more verbose than the Canvas API
• Shape elements in SVG can receive events (like mouse clicks and movements), while Canvas is just a single raster image

Graphics Accessibility Basics

• Follow basic HTML/CSS guidelines... obviously!
• Describe basic images:
  • Provide fallback text in 'canvas' element
  • Provide content in 'title' and 'desc' elements in SVG
  • Provide 'alt' text for SVG in an 'img' element in HTML
  • See HTML5: Techniques for providing useful text alternatives
• Add detailed fallbacks for interactive images
  • Include titles for each SVG element, allow user to explore
  • Manually create alternative for Canvas API, with script and ARIA
• Not all images can be accessibly “explorable”!
  • Data visualizations and structured information can and should be

SVG Accessibility Overview

• Structure your document
  • nest logically related items
  • 'g' element: group, like an Illustrator layer
• Preserve reading order
  • Ensure that presentation position matches document order
  • Place important, contextual, or navigation items first
• 'title's and 'desc's
  • 'title': name of the element, used as a tooltip
  • 'desc': longer description, use sparingly
  • Bug workaround: aria-labelledby="title" aria-describedby="desc"
• Use text where possible
  • Don't use a title when you can use text
  • Don't duplicate the text in a title
• Establish focus ring
  • 'tabindex': keyboard navigation
  • 'a' elements and 'text' elements are focusable by default

Exploring Graphics

A simple drawing of a yellow compact car, with the structure of the document exposed.

Not all graphics make sense to explore, many should just be described in text.

Exploring Data Visualizations

A bar chart, with the structure of the document exposed. The axes and values are labeled.

Structured graphical content is useful to allow the user to explore.

Accessible SVG Chart

The same accessible SVG bar chart, with code extracts showing how it was done.

Canvas and the Shadow DOM

The Shadow DOM is like a hidden document embedded inside an element, which exposes the underlying structure of that element.

An illustration of a bar chart generated from an ordered list.

Browser and Screen Reader Support

• Universal support for SVG and Canvas API in modern browsers and mobiles
• SVG:
  • Mixed support for SVG 'title' and 'desc' in standalone SVG
  • Mixed accessibility support for SVG referenced by HTML 'embed', 'obect', or 'iframe' elements
  • Good accessibility support for inline SVG (SVG in HTML)
  • Universal accessibility support for fallback content
• Canvas:
  • Limited support for and addHitRegion() and drawFocusIfNeeded()
  • Good accessibility support for Shadow DOM navigation with ARIA
  • Universal accessibility support for Canvas fallback content
• Do what you can now Prepare for the future Push the limits to improve support

Demos

Data Portability

• Adding metadata data values makes it more accessible
• more searchable
  • SEO
• extract data
  • remix it

Cognition

An illustration of a brain.

Pictorial Superiority Effect

• Humans are wired to be visual.
• Sight makes up 75% of our sensory cognitive processing. The other senses (hearing, touch, taste, smell) combined only make up 25% of sensory processing.
• For a presentation without images, memory retention after 3 days is 10%.
• For a presentation with images, memory retention after 3 days is 60%.
• This effect increases with age, from childhood through adult life!
• See the book Brain Rules by John Medina

Visual Processing

• Demo of a data comprehension test, with the same data shown as a table and as a bar chart.
• Data visualization aids apprehension and comprehension
• Speed of understanding is important in decision making
• ... and correct information is even more important

Learning Modes

• Humans have several discrete learning modes:
  • sight
  • hearing
  • tactile
  • reading and writing
• Combining any of these learning modes with another dramatically aids understanding and memory.
• Emotional engagement also aids engagement and memory.
• Emotional engagement combined with any of these learning modes is a powerful cognitive tool.
• Beauty (aesthetics) is an aid to accessibility.

Visual Bias

• Demo of two chart types: a pie chart with subdued and bright colors, and the same data as a bar chart. The bar chart makes it much easier to see that the subdued bar actually has a higher value.
• Bright colors make a stronger impression.
• Pie charts suck. (For making discrete comparisons)

Visual Vocabulary

An illustration of several scattered chart types.

Chart comprehension must be learned; children don't know how to read a bar chart, and when we encounter a new chart type, we have to learn to "read" it.

Charts are made up of structured parts, such as the labels, axes, and data points.

Complexity

An illustration of two complicated charts, one attractive, the other cluttered and ugly.

Complex charts are hard for everyone to understand. They also make accessibility even harder to achieve.

Keep data visualizations simple. Make a poem, not a novel.

Visual

An illustration of an eye.

Magnifier

An demo of a magnifying app, which illustrates how difficult it is to understand data visualizations with narrowed context.

Magnifiers have many similarities to mobile phones; good design accommodates both.

Color Blindness

A cartoon panel that jokingly combines a color blindness test with synesthesia.

Colors

An illustration of an eye with rainbow colors.

Hues

A cartoon panel with a strobing rainbow-colored manatee, with the caption, "Oh, the Hue-Manatee".

Brewer Palette

Three sets of colored dots, illustrating different color schemes with balanced hues and perceivable contrast combinations for different purposes.

• discrete: quantitative; no perceived order
• sequential: qualitative; perceived order, uniform steps
• diverging: bipolar; a range of sequential colors

Cynthia Brewer hand-picked these color palettes for maps.

Palettes and Patterns

An illustration of Australia with a subdued Brewer palette coloring each state, switching to the same image with sharply-contrasting (and gaudy) patterns rather than colors.

Patterns can be a good substitute for colors for grayscale images, or for printing on tactile paper for blind users.

Tactile

An illustration of a hand.

Audible Tactile Maps

An illustration of a map with raised features for roads, urban ares, and water. This map can be printed on textured paper and overlaid on a touch surface to make it interactive.

Print with Braille font. Any font can be replaced with Braille for tactile printing.

Interactivity

An illustration of a hand swiping one finger.

Navigation Challenges

A picture of a young woman using a 2-way sip-puff switch.

• mobility impairment, 2-way switch
• visual impairment
• dynamically updated content:
  • aria-live
• keyboard:
  • tabindex
  • structure: document order and grouping

Animation Accessibility.svg

ARIA Attributes

An illustration of two buttons, a red and blue button, seemingly identical except for the color. But the red button is just an image, while the blue button has the ARIA role 'button', making it accessible to screen readers and other accessibility technology.

• role="button" use[role="button"] { fill: cornflowerblue; }
• aria-pressed="false" toggle @aria-pressed with script
• aria-pressed="true" use[aria-pressed="true"] { fill: gold; }
• aria-live="polite"
• (p.s. make sure your controls are tab-focusable!)

Element Focus

A focusing demo of two columns of numbers 1–6, and two columns of 6 dots.

Tabbing should focus each element in turn, via 'tabindex'.

Auditory

An illustration of an ear.

Sonification

A demo of a line chart that has a cursor sweeping across it, with a dot following the curve of the line. An audible tone plays, with the tone's frequency rising or falling along with the dot.

This allows blind uses to get a gist of the line's trend.

Olfactory

An illustration of a nose.

Scratch ’n Sniff

A humorous illustration of an pie chart of favorite fruits, which could be printed with Scratch ’n Sniff ink.

The Future of SVG

• Closer integration with HTML and CSS
• Single animation model: JS API, SVG, and CSS
• Improved DOM APIs
• Improved ARIA support: New roles and attributes for data visualizations
• More core functionality: wrapped text, new shapes, and more!

An animated illustration of an clock with the hands moving forward rapidly.

ARIA Vocabulary

An illustration of several chart types, neatly arranged in rows and columns.

Structured data and structured graphics can be represented with a structured vocabulary.

Reference Data Point

An image of a bar chart with 30 bars representing different countries, with two bars highlighted to show the USA and the OECD average.

Accessible information graphics should allow users to explore, comparing and contrasting different values.

SVG Connectors

SVG Connectors are a proposal to allow the accessible representation of dot-line graphs. Graph have many forms:

• Graphs
  • Networks
    • Social Networks
    • Subway Maps
  • Org charts
    • Family trees
  • Flow charts
    • Schematics

WebPlatform.org

An illustration of the WebPlatform logo as a line chart.

WebPlatform.org is a community-driven site where you can learn and share information on Web development and design, including accessibility, SVG, and the Canvas API.

Web Standards Community

An illustration of the Earth as a globe, animating into nested Venn diagrams of smaller and smaller communities, ending in a pie chart of the W3C staff.

• 1/4 of the world uses the Web... over 1.6 billion people
• W3C Community:
  • 32,000+ Mailing List Subscribers
  • 1,500+ Working Group Participants
  • 400+ Member Organizations
  • 70 W3C Staff
• W3C Staff:
  • Technical (about half)
  • Management
  • IT
  • Admin
  • MarComm and BizDev

Sustainable Web

The traditional Sustainability Venn diagram of overlapping circles of social, economic, and environment concerns, changing into HTML, CSS, and SVG.

• social
• economic
• environment
• equitable
• bearable
• viable
• sustainable

• HTML
• CSS
• SVG
• styling
• multimedia
• effects
• awesome

Get Involved!

• Public Working Group: send feedback to www-svg@w3.org mailing list
• New SVG-Accessibility Task Force: join the discussion on the public-svg-a11y@w3.org mailing list
• Use SVG in your projects
• Share your code
• Build SVG tools!
• Graphical Web conference Autumn of 2015 in Pittsburgh, Pennsylvania, USA

Thanks!

Credits:

• Haptic Map by Benjamin Campin
• Sonifier (audio demo)
  • JS intersection code from Kevin Lindsey ("thelonious")
  • Chris Lowis (BBC)
  • Chris Wilson (Google)
  • Joe Berkovitz (Noteflight)
• Dow Jones Industrial Index data from Yahoo! Finance
• ChromeVox by Charles Chen and TV Raman from Google
• Magnifier by K Hong
• Léonie Watson, Tips for Creating Accessible SVG
• Icons from The Noun Project
  • Eye designed by Sergi Delgado
  • Hand designed by Ugur Akdemir
  • Brain designed by Samuel Dion-Girardeau
  • Brain designed by Anisha Varghese
  • Hand designed by Naomi Atkinson
  • Hand designed by Cengiz SARI
  • Nose designed by Rachel Healey
  • Lips designed by Laetitia W. Merijon
  • Pencil designed by Thomas Le Bas
  • Chart designed by Jonathan Higley
  • Chart designed by Márcio Duarte
  • Pie Chart designed by Scott Lewis
  • Time designed by wayne25uk
  • Clock designed by Thomas Le Bas