View source for SVG Accessibility

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 [https://github.com/SVG-access-W3CG/use-case-examples 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 <code>img</code> tags or as directly embedded code - how does this fit with the usual UX applied for things like <code>alt</code>, <code>title</code> or <code>longdesc</code>.
; [[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 ===
;[http://phet.colorado.edu/en/simulations/category/by-device/ipad-tablet 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.
:[http://phet.colorado.edu/en/about/accessibility PhET accessibility page]
;[http://progressiveaccess.com/chemistry/ Exploring molecular structures]
:This material draws in ChemML and auto-generated SVG representations, and provides an automatic navigation of a molecular structure.
;[https://en.wikipedia.org/wiki/Chemical_reaction Wikipedia chemical reaction page]
:There are a number of SVG images here describing chemical reactions. These would make good examples
;[http://kelvinlawrence.net/svg/index.html 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.
;[http://ian.umces.edu/ 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.
;[https://www.mapbox.com/maki-icons/ 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 [https://github.com/mapbox/maki gitHub]. The symbols are for a ''point of interest'' which we should consider as a graphics role.

== Draft documents ==
[https://github.com/SVG-access-W3CG/new-note-draft 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
;[https://www.w3.org/WAI/PF/cognitive-a11y-tf/wiki/Svg_comments 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
;[http://rawgit.com/w3c/aria/master/aria/graphics.html ARIA graphics roles]
:The current draft spec for graphics ARIA roles, being developed by the Task Force
;[https://lists.w3.org/Archives/Public/public-svg-a11y/2015Jun/att-0013/stem-graphics-notes.html 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.
;[https://lists.w3.org/Archives/Public/www-svg/2012Aug/0105.html An SVG accessibility gap analysis]
:A text version of a gap analysis done by Rich Schwerdtfeger in 2012
; [http://ncam.wgbh.org/experience_learn/educational_media/stemdx NCAM Effective Practices]
: Recommendations on how to describe data charts in plain text alternatives.  See also [https://lists.w3.org/Archives/Public/public-svg-a11y/2015Aug/0011.html Fred's summary email].

;[[SVG_Accessibility/Brunel Visualization Language]]

== Tutorial articles… ==
(we should start curating this somehow)
;[http://simplyaccessible.com/article/7-solutions-svgs/ 7 solutions for SVG accessibility]
:A March 2017 article from SimplyAccessible
;[https://ljwatson.github.io/decks/2017/csun/index.html SVG accessibility slides]
:A March 2017 talk by Léonie Watson and Chaals McCathie Nevile
;[https://gist.github.com/AmeliaBR/b4b5634c6a6a959875339cfe9d98831a SVG <text> tips and tricks]
:Some notes for a presentation by Amelia Bellamy-Royds
;[http://www.incobs.de/articles/items/diagram-a11y.html Best practices for accessible diagrams]
:A July 2015 article by Detlev Fischer covering various aspects of accessibility for images
;[https://css-tricks.com/scale-svg/ How to scale SVG]
:January 2015 - what it says, by Amelia Bellamy-Royds
;[http://www.slideshare.net/AnnaKhabibullina/svg-accessibility Making SVG Accessible]
:Slideshare presentation on SVG accessibility by Anna Khabibullina, December 2014
;[https://css-tricks.com/svg-text-typographic-designs/ 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)… 
;[http://demosthenes.info/blog/1026/Making-SVG-Accessible Making SVG Accessible]
:Some quick tips from Dudley Story on using <code>&lt;title&gt;</code> and <code>&lt;desc&gt;</code> elements, especially for people who know HTML5.
;[https://svgwg.org/svg2-draft/access.html Accessibility Appendix draft for SVG2]
:An appendix with a pretty scant explanation of things to do - stripped down from the old one.
;[http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ Using ARIA to enhance SVG Accessibility]
:December 2013 Article by Léonie Watson on SVG accessibility
;[http://schepers.cc/authoring-accessible-svg Current State of authoring accessible SVG - Reinventing fire]
:A September 2013 article from Doug Schepers on making SVG somewhat accessible.
;[http://www.w3.org/TR/SVG-access/ 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)