Inclusive Web Graphics with SVG

Session Summary:

Images, charts, and diagrams are an important part of the web, but often hide critical information from people with visual impairments. Learn how to make accessible graphics with SVG. This session will teach you the basics of SVG, show you tips and tricks to make your graphics accessible, and give you the tools to open up the world of images to people with disabilities.

Description:

Images, charts, and diagrams are an important part of the web, but often hide critical information from people with visual impairments. Learn how to make accessible graphics with SVG. This session will teach you the basics of SVG, show you tips and tricks to make your graphics accessible, and give you the tools to open up the world of images to people with disabilities.

Class Description (300 to 1000 words) * Please provide any additional information or details.

Scalable Vector Graphics has amazing potential to provide accessible images, diagrams, and charts. But you need to know how to unlock that potential.

This course will take the students from SVG novices to mastery of SVG accessibility, by walking step-by-step through handcrafting an accessible interactive diagram.

We’ll start with an overview of SVG, then delve into the syntax for making all the different types of SVG shapes. We’ll teach the basic features and capabilities of SVG, and the tricky parts of working with it, including the infinite canvas, the viewBox, the painter’s model of rendering, and layout in the coordinate system.

Then we’ll cover the built-in accessibility features of SVG, including existing and emerging ARIA attributes, as a foundation to build on throughout the session. We’ll talk about text and metadata text equivalents, such as the title and description elements and making sure they work as intended with ARIA. This will include live exploration of an SVG document with a screen reader.

Next, we’ll detail the different ways to include an SVG image in your HTML content, and how to do so accessibly, including using SVG icons. We’ll learn to style SVG with CSS, and learn how to use CSS media queries and responsive techniques to make SVG even more accessible in different contexts.

Then we’ll touch on using JavaScript with SVG, just enough to become familiar with it. Most of the course will focus on markup, styling, and declarative interactivity, but it’s important to know what capabilities scripting can bring to SVG for accessibility.

We’ll explore the importance of shape composition, document structure, reading order, managing navigation order, and element activation.

Since a complex SVG is one big image, we’ll help the the author decide which parts are important to describe in detail, and which to omit, in order to avoid overwhelming the user; we’ll discuss how to provide suitable context and how to give users the ability to drill deeper into a longer description of important parts of the image.

We’ll do a survey of the different kinds of information graphics, from diagrams to flow charts to different chart types, what the purpose of each is, and how to provide equivalent experiences for AT users.

To keep the class fun and practical, we’ll collectively decide as a class what kind of diagram we want to build together, then compose the diagram by hand-coding shapes and by finding and repurposing icons and other SVG assets in an accessible way, to end up with our final accessible diagram. Each student will work on their own or with a buddy to craft their unique take on our diagram. There will be lots of opportunities for hands-on-learning and individual help, as well as different approaches to making the same basic diagram accessible.

Time permitting, we’ll share our work within the class, so everyone can learn from and enjoy the others’ work.

Prerequisites:

Some experience with markup and JavaScript