Pages collecting information on accessibility issues that arise with SVG, requirements, use cases, possible solutions, etc...

Testing

SVG_Accessibility/Testing

Use cases and requirements

Images for playing with to determine use cases and requirements

A set of images which we are collecting, from which we can draw out use cases and requirements. Also collected in the Github wiki.

SVG_Accessibility/School_Graphs: The sort of straightforward graphs that lower high school kids generally understand - bar charts, line charts, pie charts and simple combinations of those.
SVG_Accessibility/Cool_Graphs: More complex graph types, such as boxplots and chord charts, scatter plots, graphs with polar axes, etc…
SVG_Accessibility/Directed_Graphs: This includes flowcharts, visualisations of RDF, sets of instructions, decision trees and the like. Anything where you can move from one thing to another, but not necessarily backward.; So it would include process of chemical reactions that were not trivially reversible…
SVG_Accessibility/Mapping_Graphs: Maps, networks such as metro maps or organisation charts and the like
SVG_Accessibility/Schematic_Graphs: Schematic diagrams of objects, etc...
SVG_Accessibility/Other_Graphs: Different kinds of infographics that we haven't really figured out how to categorise yet. Or don't understand. Or that where whimsical enough to make it into this section.
SVG_Accessibility/Interactive_Graphs: We need to get some examples of things that are inherently interactive - applications, games, etc.
SVG_Accessibility/Embedded_Graphs: It is not clear how we should deal with things that are embedded in HTML, either using img tags or as directly embedded code - how does this fit with the usual UX applied for things like alt, title or longdesc.
SVG_Accessibility/Palettes_for_low_vision_and_color_blind: A set of charts using markup and palettes in <defs>. Also raises issues about representing different types of color legends. Color legends for continuous color scales can come in the form of a swatch legend, a stagger legend or a continuous color legend. Continuous color legends and stagger legends pose problems in representing them to assistive technology and in adjusting palettes for low vision and color blind users.

Scripts for exploring annotated SVG

Navigation Experiments 1: Keyboard Navigation of an SVG; File:Nav8.zip Experiment in 8 way navigation

Navigation Experiments 2: Prints out a text representation of the tree used in the keyboard navigation; File:Svggm.zip Graphics Module marked up SVG; File:Atsvg.zip Zip containing HTML page that lets assistive technology read a marked up chart.

Sites with use case stuff

PhET science simulations - a set of interactive graphically rich educational simulations of physics and chemistry: These seem to be implemented in a mixture of technologies - the "HTML5" versions may use a number of pieces of SVG, along with canvas and other things. But working out how to present the material in SVG would be useful.; PhET accessibility page
Exploring molecular structures: This material draws in ChemML and auto-generated SVG representations, and provides an automatic navigation of a molecular structure.
Wikipedia chemical reaction page: There are a number of SVG images here describing chemical reactions. These would make good examples
Example SVG Drawings Exercising SVG host language features: It is helpful to exercise the various SVG features to make sure we are not missing anything. A big set of examples from Kelvin Lawrence.
The University of Maryland IAN library: Our aim is to develop a global symbol language for scientists, resource managers, community groups, and environmentalists worldwide. Currently downloaded by 86410 users in 243 countries and 50 U.S. states. The IAN library provides over 2700 vector graphic symbols that users can use for free (with attribution). The icons are broken into 6 categories and 54 albums with a total of 2782 science/ecology symbols. Uses include online reports on health of the Chesapeake Bay and Australian coastal environments.
Mapbox maki icons

Mapbox has SVG icons for map symbols (11 x 11 and 15 x 15) and rules about creating new maki symbols. Maki project on gitHub. The symbols are for a point of interest which we should consider as a graphics role.

Draft documents

Github repo for collecting authoring guidance

(Please use the SVG_Accessibility/ prefix when creating a new wiki page, and add a link here!)

SVG_Accessibility/Navigation: A draft from Rich Schwerdtfeger describing navigation ideas
SVG_Accessibility/Authoring: A draft from Chaals collecting authoring ideas
SVG_Accessibility/People_and_Issues: Requirements and use cases for accessing SVG content, grouped by general disability type
Cognitive Accessibility Task Force Issues and Requirements
SVG_Accessibility/ARIA roles for graphics: Discussion of core graphics-related roles that could help annotate structured drawings
SVG_Accessibility/Chart_Taxonomy
SVG Accessibility/ARIA roles for charts
SVG Accessibility/ARIA chart taxonomy discussion: Proposals for & discussion of a more complete taxonomy charts and related graphics
ARIA graphics roles: The current draft spec for graphics ARIA roles, being developed by the Task Force
STEM graphics notes: A discussion paper by Jason White, May 2015 on types of graphic common in science, technology, mathematics education, and how to make SVG versions more accessible.
An SVG accessibility gap analysis: A text version of a gap analysis done by Rich Schwerdtfeger in 2012
NCAM Effective Practices: Recommendations on how to describe data charts in plain text alternatives. See also Fred's summary email.

SVG_Accessibility/Brunel Visualization Language

Tutorial articles…

(we should start curating this somehow)

7 solutions for SVG accessibility: A March 2017 article from SimplyAccessible
SVG accessibility slides: A March 2017 talk by Léonie Watson and Chaals McCathie Nevile
SVG <text> tips and tricks: Some notes for a presentation by Amelia Bellamy-Royds
Best practices for accessible diagrams: A July 2015 article by Detlev Fischer covering various aspects of accessibility for images
How to scale SVG: January 2015 - what it says, by Amelia Bellamy-Royds
Making SVG Accessible: Slideshare presentation on SVG accessibility by Anna Khabibullina, December 2014
SVG `text` and Small, Scalable, Accessible Typographic Designs: A June 2014 article from Chris Coyier on using SVG to make fancy text more accessible. Some insightful comments (and some others)…
Making SVG Accessible: Some quick tips from Dudley Story on using <title> and <desc> elements, especially for people who know HTML5.
Accessibility Appendix draft for SVG2: An appendix with a pretty scant explanation of things to do - stripped down from the old one.
Using ARIA to enhance SVG Accessibility: December 2013 Article by Léonie Watson on SVG accessibility
Current State of authoring accessible SVG - Reinventing fire: A September 2013 article from Doug Schepers on making SVG somewhat accessible.
Accessibility Features of SVG: Now very old (2000-2001) document by Chaals and Marja-Riitta Koivunen. Should be mined for content that isn't obsolete and then replaced by a new version.

Obsolete stuff

SVG_Accessibility/ExampleImages: An initial page for collecting examples - now obsoleted by this page and the categorised images. (Hey, if only there were a way of describing categories in wikis..... ... d'uh)