How to make SVGs and other images WCAG compliant

Overview

Using the alt property in img HTML tags or Accessible Rich Internet Applications (ARIA) labels with Scalable Vector Graphics (SVGs) and other images is important so that all images on the Hack for LA website are Web Content Accessibility Guidelines (WCAG) compliant.

Methods

Use an img HTML tag with the SVG or image as for the src and an alt attribute (preferred method)

Example:

<img class="header-hero-image" src="/assets/images/toolkit/toolkit-hero.svg" alt="" >

Steps:

In an img HTML tag,

1. Set src to the path to the SVG or image
2. Add an alt attribute.
3. Depending on the image, the alt attribute will either be an empty alt attribute (alt="") or will have an appropriate descriptive text. You can use this alt Decision Tree to help you decide what the alt attribute should contain.

Use an ARIA label

Example of an SVG that requires an ARIA label in order to become WCAG compliant:

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" class="icon icon-github" version="1.1" id="svg2" xml:space="preserve" viewBox="0 -80 161.03333 325" sodipodi:docname="icon-github.svg" inkscape:version="0.92.3 (2405546, 2018-03-11)"><rdf:rdf><cc:work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type><dc:title></dc:title></cc:work></rdf:rdf><defs id="defs6"></defs><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1853" inkscape:window-height="1025" id="namedview4" showgrid="false" inkscape:zoom="5.6641134" inkscape:cx="187.51173" inkscape:cy="76.647148" inkscape:window-x="1987" inkscape:window-y="27" inkscape:window-maximized="1" inkscape:current-layer="g12"></sodipodi:namedview><g id="g10" inkscape:groupmode="layer" inkscape:label="ink_ext_XXXXXX" transform="matrix(1.3333333,0,0,-1.3333333,-386.96132,658.07332)"><g id="g12" transform="scale(0.1)"><path d="m 3506.09,4935.55 c -333.47,0 -603.88,-270.36 -603.88,-603.88 0,-266.81 173.03,-493.17 412.97,-573.02 30.18,-5.59 41.26,13.1 41.26,29.05 0,14.4 -0.56,61.97 -0.82,112.43 -168,-36.53 -203.45,71.25 -203.45,71.25 -27.47,69.8 -67.05,88.36 -67.05,88.36 -54.79,37.48 4.13,36.71 4.13,36.71 60.64,-4.25 92.57,-62.24 92.57,-62.24 53.86,-92.31 141.27,-65.62 175.73,-50.19 5.42,39.03 21.07,65.68 38.34,80.75 -134.13,15.27 -275.13,67.05 -275.13,298.44 0,65.93 23.59,119.8 62.22,162.09 -6.27,15.22 -26.94,76.63 5.85,159.81 0,0 50.71,16.23 166.11,-61.9 48.17,13.38 99.83,20.09 151.15,20.32 51.32,-0.23 103.02,-6.94 151.28,-20.32 115.26,78.13 165.9,61.9 165.9,61.9 32.87,-83.18 12.19,-144.59 5.92,-159.81 38.72,-42.29 62.15,-96.16 62.15,-162.09 0,-231.94 -141.27,-283.01 -275.74,-297.96 21.66,-18.74 40.96,-55.49 40.96,-111.83 0,-80.8 -0.7,-145.83 -0.7,-165.72 0,-16.07 10.87,-34.9 41.48,-28.97 239.81,79.94 412.62,306.22 412.62,572.94 0,333.52 -270.37,603.88 -603.87,603.88" id="path18" inkscape:connector-curvature="0"></path><path d="m 3130.93,4068.51 c -1.33,-3.01 -6.05,-3.9 -10.35,-1.84 -4.38,1.97 -6.84,6.06 -5.42,9.07 1.3,3.08 6.03,3.94 10.4,1.89 4.39,-1.98 6.89,-6.11 5.37,-9.12 v 0" id="path20" inkscape:connector-curvature="0"></path><path d="m 3155.39,4041.23 c -2.88,-2.67 -8.51,-1.43 -12.33,2.79 -3.95,4.21 -4.69,9.84 -1.77,12.55 2.97,2.66 8.43,1.41 12.39,-2.79 3.95,-4.26 4.72,-9.85 1.71,-12.55 v 0" id="path22" inkscape:connector-curvature="0"></path><path d="m 3179.2,4006.45 c -3.7,-2.57 -9.75,-0.16 -13.49,5.21 -3.7,5.37 -3.7,11.81 0.08,14.39 3.75,2.58 9.71,0.25 13.5,-5.07 3.69,-5.46 3.69,-11.9 -0.09,-14.53 v 0" id="path24" inkscape:connector-curvature="0"></path><path d="m 3211.82,3972.85 c -3.31,-3.65 -10.36,-2.67 -15.52,2.31 -5.28,4.87 -6.75,11.78 -3.43,15.43 3.35,3.66 10.44,2.63 15.64,-2.31 5.24,-4.86 6.84,-11.82 3.31,-15.43 v 0" id="path26" inkscape:connector-curvature="0"></path><path d="m 3256.82,3953.34 c -1.46,-4.73 -8.25,-6.88 -15.09,-4.87 -6.83,2.07 -11.3,7.61 -9.92,12.39 1.42,4.76 8.24,7 15.13,4.85 6.82,-2.06 11.3,-7.56 9.88,-12.37 v 0" id="path28" inkscape:connector-curvature="0"></path><path d="m 3306.24,3949.72 c 0.17,-4.98 -5.63,-9.11 -12.81,-9.2 -7.22,-0.16 -13.06,3.87 -13.14,8.77 0,5.03 5.67,9.12 12.89,9.24 7.18,0.14 13.06,-3.86 13.06,-8.81 v 0" id="path30" inkscape:connector-curvature="0"></path><path d="m 3352.23,3957.55 c 0.86,-4.86 -4.13,-9.85 -11.26,-11.18 -7.01,-1.28 -13.5,1.72 -14.39,6.54 -0.87,4.98 4.21,9.97 11.21,11.26 7.14,1.24 13.53,-1.68 14.44,-6.62 v 0" id="path32" inkscape:connector-curvature="0"></path></g></g></svg>

Using ARIA labels

Labeling an SVG:

1. Add the ARIA role="img" role to the <svg>
2. Add the aria-label with a string attribute

<svg role="img" aria-label="Description of your SVG image here" ... />

Accessible names/descriptions

Review the w3.org document about accessible names and descriptions here.

Naming:

• Naming with child content.
• Naming with a string attribute via aria-label.
• Naming by referencing content with aria-labelledby.
• Naming form controls with the label element.
• Naming fieldsets with the legend element.
• Naming tables and figures with captions.
• Fallback names derived from titles and placeholders.

Describing:

• Describing by referencing content with aria-describedby.
• Describing tables and figures with captions.
• Descriptions derived from titles.

Resources

• MDN: aria-label
• MDN: ARIA, img role
• a11y-101: Accessible SVGs
• w3.org: Accessible Names and Descriptions
• WCAG 2 Overview