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. This pages explains how the Website Team deals with SVGs and other images to make them WCAG compliant.

Methods

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

Example of an image in an img tag that needs an alt attribute:

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

Steps:

In an img HTML tag,

1. Set src to the path to the SVG or image
2. Add an alt attribute. a. 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.

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

Use an ARIA label in the div HTML tag wrapping the SVG

Example of an SVG wrapped in a div tag that needs an ARIA label:

<div>
  {% include svg/logo-hfla-small.svg %}
</div>

Steps:

In an div HTML tag,

1. Add a role="img"
2. Add an aria-label with an appropriate descriptive text. a. Depending on the SVG, the aria-label will either be empty (aria-label="") or will have an appropriate descriptive text. You can use this alt Decision Tree to help you decide what the aria-label should contain.

<div role="img" aria-label="Hack for LA">
  {% include svg/logo-hfla-small.svg %}
</div>

Use an ARIA label in an SVG

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