Is the Button, an  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.  

&lt;a href="#menu" class="head__toggle" title="Toggle Menu"&gt;
   &lt;svg viewBox="0 0 70.115 53.162" class="head__btn"&gt;
     &lt;use xlink:href="#skmenu"&gt;&lt;/use&gt;
   &lt;/svg&gt;
&lt;/a&gt;


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 &lt;a&gt; element and wrapped it with a span. 

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


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)?
SVG has a desc and a title tag that you're meant to use to describe the SVG:

&lt;a href="#menu" class="head__toggle" title="Toggle Menu"&gt;
    &lt;svg viewBox="0 0 70.115 53.162" class="head__btn"&gt;
        &lt;desc&gt;Toggle Menu&lt;/desc&gt;
        &lt;use xlink:href="#skmenu"&gt;&lt;/use&gt;
    &lt;/svg&gt;
&lt;/a&gt;


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.


Take advantage of CSS for styling purposes (including media queries)
SVG sprite stack technique, meaning you won't have to set the viewBox information.