Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Magdalena Misiuna
Magdalena Misiuna
14,873 Points
Posted by Magdalena Misiuna
Magdalena Misiuna
14,873 Points

Tag Animated SVG as H2 for accessibility

I put together a line drawing SVG animation effect on an H2 title text. How can I tag this SVG as a H2 in the html for accessibility?

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

We'd need to see your HTML and SVG code to better guide you here. But you could probably add an id or class attribute to the SVG and target this with CSS that way.

Magdalena Misiuna
Magdalena Misiuna
14,873 Points
Magdalena Misiuna
Magdalena Misiuna
14,873 Points

Below is HTML and SVG code. The animation should read <h2> Rosa Parks Takes a Stand" </h2> in the DevTool Document Outline.

<h1> Introducing the Civil Rights Movement </h1>

    <div class="Rosa_Container">
    <div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 452.38 94.12">

<g class="parks-container"> <path class="R" d="M29.35,44.83H25.19V57H13.68V19H34c8.89,0,13.68,5.92,13.68,13.05a12.27,12.27,0,0,1-6.84,11.52L47.71,57H34.6ZM32.2,28.58h-7v6.67h7a3.36,3.36,0,1,0,0-6.67Z" transform="translate(-13.18 -17.88)"/> <path class="O" d="M73.22,18.38C85,18.38,94,26.36,94,38.05S85,57.71,73.22,57.71s-20.81-8-20.81-19.66S61.47,18.38,73.22,18.38Zm0,10.15c-5.53,0-9.12,4.21-9.12,9.52s3.59,9.52,9.12,9.52,9.12-4.22,9.12-9.52S78.75,28.53,73.22,28.53Z" transform="translate(-13.18 -17.88)"/> <path class="S" d="M103.34,43.12A17.71,17.71,0,0,0,115.6,48c2.17,0,4.22-.74,4.22-2.22s-1.6-2.22-5.36-2.91c-6.27-1.14-15.85-2.62-15.85-12.14,0-6.44,5.36-12.31,15.79-12.31a25.07,25.07,0,0,1,16.14,5.3l-6.16,8.15a18.92,18.92,0,0,0-10.61-3.76c-2.85,0-3.47,1-3.47,2,0,1.48,1.54,2,5.58,2.68,6.28,1.08,15.57,2.91,15.57,11.69,0,8.38-6.22,13.22-16.42,13.22-8.1,0-13.63-2.39-17.67-6Z" transform="translate(-13.18 -17.88)"/> <path class="A" d="M161.8,52.13H147.21L145.73,57H133.24l14-38h14.48l14,38H163.28Zm-11.63-9.58h8.67l-4.34-13.4Z" transform="translate(-13.18 -17.88)"/> <path class="P" d="M194.09,19h20.3c8.89,0,13.68,5.92,13.68,13.05s-4.79,12.77-13.68,12.77h-8.78V57H194.09Zm18.81,9.57h-7.29v6.67h7.29a3.34,3.34,0,1,0,0-6.67Z" transform="translate(-13.18 -17.88)"/> <path class="A" d="M254.43,52.13H239.84L238.36,57H225.87l14-38h14.48l14,38H255.91ZM242.8,42.55h8.67l-4.34-13.4Z" transform="translate(-13.18 -17.88)"/> <path class="R" d="M288.26,44.83H284.1V57H272.59V19h20.29c8.89,0,13.68,5.92,13.68,13.05a12.27,12.27,0,0,1-6.84,11.52L306.62,57H293.51Zm2.85-16.25h-7v6.67h7a3.36,3.36,0,1,0,0-6.67Z" transform="translate(-13.18 -17.88)"/> <path class="K" d="M327,43.63l-2.11,2.85V57H313.37V19h11.52V33.26l10-14.25h14.08L334.58,36.68l15,20.35h-14Z" transform="translate(-13.18 -17.88)"/> <path class="S" d="M356.84,43.12A17.69,17.69,0,0,0,369.09,48c2.17,0,4.22-.74,4.22-2.22s-1.59-2.22-5.36-2.91c-6.27-1.14-15.84-2.62-15.84-12.14,0-6.44,5.35-12.31,15.79-12.31A25,25,0,0,1,384,23.74l-6.16,8.15a18.89,18.89,0,0,0-10.6-3.76c-2.85,0-3.48,1-3.48,2,0,1.48,1.54,2,5.59,2.68,6.27,1.08,15.56,2.91,15.56,11.69,0,8.38-6.21,13.22-16.42,13.22-8.09,0-13.62-2.39-17.67-6Z" transform="translate(-13.18 -17.88)"/> </g>

<g class="takes-stand"> <path class="T1" d="M25.86,83.32H15.65v-10H47.52v10H37.37v28H25.86Z" transform="translate(-13.18 -17.88)"/> <path class="A1" d="M73.85,106.41H59.26l-1.48,4.9H45.29l14-38H73.79l14,38H75.33ZM62.22,96.83h8.67L66.56,83.44Z" transform="translate(-13.18 -17.88)"/> <path class="K1" d="M104.63,97.92l-2.11,2.85v10.54H91v-38h11.51V87.54l10-14.25h14.08L112.21,91l15,20.35h-14Z" transform="translate(-13.18 -17.88)"/> <path class="E1" d="M130.39,73.29h28.85v9.58H141.91v4.44h16.93v9.58H141.91v4.85h17.33v9.57H130.39Z" transform="translate(-13.18 -17.88)"/> <path class="S1" d="M168.52,97.4a17.74,17.74,0,0,0,12.26,4.91c2.17,0,4.22-.74,4.22-2.23s-1.6-2.22-5.36-2.9C173.37,96,163.79,94.55,163.79,85c0-6.44,5.36-12.31,15.79-12.31A25.13,25.13,0,0,1,195.72,78l-6.16,8.15A19,19,0,0,0,179,82.41c-2.85,0-3.48,1-3.48,2,0,1.48,1.54,2,5.59,2.68,6.27,1.08,15.56,2.9,15.56,11.68,0,8.38-6.21,13.23-16.42,13.23-8.09,0-13.62-2.4-17.67-6Z" transform="translate(-13.18 -17.88)"/> <path class="A1" d="M241.66,106.41h-14.6l-1.48,4.9H213.1l14-38H241.6l14,38H243.14ZM230,96.83h8.66l-4.33-13.39Z" transform="translate(-13.18 -17.88)"/> <path class="S1" d="M277.56,97.4a17.72,17.72,0,0,0,12.26,4.91c2.17,0,4.22-.74,4.22-2.23s-1.6-2.22-5.36-2.9C282.41,96,272.83,94.55,272.83,85c0-6.44,5.36-12.31,15.79-12.31A25.13,25.13,0,0,1,304.76,78l-6.16,8.15A19,19,0,0,0,288,82.41c-2.85,0-3.48,1-3.48,2,0,1.48,1.54,2,5.59,2.68,6.27,1.08,15.56,2.9,15.56,11.68,0,8.38-6.21,13.23-16.42,13.23-8.09,0-13.62-2.4-17.67-6Z" transform="translate(-13.18 -17.88)"/> <path class="T1" d="M318.72,83.32H308.51v-10h31.87v10H330.23v28H318.72Z" transform="translate(-13.18 -17.88)"/> <path class="A1" d="M366.71,106.41H352.12l-1.48,4.9H338.15l14-38h14.48l14,38H368.2Zm-11.63-9.58h8.67l-4.33-13.39Z" transform="translate(-13.18 -17.88)"/> <path class="N1" d="M395.38,90.91v20.4H383.87v-38h11.85L409,92.45V73.29h11.51v38h-11Z" transform="translate(-13.18 -17.88)"/> <path class="D1" d="M427.7,73.29h17c12,0,20.86,6.84,20.86,19s-8.89,19-20.81,19h-17Zm17,28a8.79,8.79,0,0,0,9.18-9c0-5.13-3-9-9.13-9h-5.53v18Z" transform="translate(-13.18 -17.88)"/> </g> </svg>

    </div>
    </div>