1
\$\begingroup\$

I have an a element for a button. The SVG snippet inside links to the containing SVG file at the top of the body.

<a href="#menu" class="head__toggle" title="Toggle Menu">
   <svg viewBox="0 0 70.115 53.162" class="head__btn">
     <use xlink:href="#skmenu"></use>
   </svg>
</a>

When I checked with Codesniffer for WCAG2AA compliance it criticized:

Anchor element found with a valid href attribute, but no link content has been supplied.

So I've added text inside the <a> element and wrapped it with a span.

<a href="#menu" class="head__toggle" title="Toggle Menu"><span class="srtext">Menu Toggle</span>
   <svg viewBox="0 0 70.115 53.162" class="head__btn">
     <use xlink:href="#skmenu"></use>
   </svg>
</a>

And hid the text with the following CSS snippet. Without the span, both, the text as well as the SVG would have been hidden.

.srtext {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

Question is, is the solution ARIA as well as browser compliant? Or are there ways to improve the solution (maybe without span)?

\$\endgroup\$
  • \$\begingroup\$ Is there a particular reason you've chosen to embed your SVG this way rather than use an img or object tag? \$\endgroup\$ – cimmanon Aug 24 '14 at 20:35
  • \$\begingroup\$ Yep there is. I've chosen svg in the first place because of the display quality and resolution independence as well as its small size. By using one single SVG file at the top of the body element http requests are minimized too (Chris Coyier suggested that approach in one of his talks). If i would go with img or objects there would be more than one http request. \$\endgroup\$ – rpk Aug 24 '14 at 21:18
  • \$\begingroup\$ But the SVG would be cached if it was an external file. \$\endgroup\$ – cimmanon Aug 24 '14 at 23:12
  • \$\begingroup\$ if its a button, you should be using the button element \$\endgroup\$ – albert Oct 25 '14 at 5:52
1
\$\begingroup\$

SVG has a desc and a title tag that you're meant to use to describe the SVG:

<a href="#menu" class="head__toggle" title="Toggle Menu">
    <svg viewBox="0 0 70.115 53.162" class="head__btn">
        <desc>Toggle Menu</desc>
        <use xlink:href="#skmenu"></use>
    </svg>
</a>

When you run it through CodeSniffer, you get this notice instead:

Notice: Check that text of the link describes the purpose of the link.

That said, I don't buy that inline SVGs are the way to go, as it increases the size of the document and cannot be cached in a meaningful way. I mean, it's not considered a good practice to place the entire contents of your CSS file in the head tag to reduce HTTP requests, why would it be good for SVGs?

You can still get most of the benefits Mr. Coyier talks about in his SVG For Everybody talk by using an external SVG embedded via the img tag, in addition to being able to cache it.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.