Is the Button, an <a> element with svg code and hidden link content inside, ARIA conform and well laid out?

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">
</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">
</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)?

• Is there a particular reason you've chosen to embed your SVG this way rather than use an img or object tag? – cimmanon Aug 24 '14 at 20:35
• 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. – rpk Aug 24 '14 at 21:18
• But the SVG would be cached if it was an external file. – cimmanon Aug 24 '14 at 23:12
• if its a button, you should be using the button element – albert Oct 25 '14 at 5:52

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">