title: Voiceover reading pseudo-elements despite aria-hidden attributes within <label />
body: <p>I'm creating custom radio / checkbox icons by adding a pseudo-element on a label element with the :before css rule. I've added aria-hidden to the label element, but VO on iOS is still reading the pseudo-element. </p>
  
  <p>I understand that some screen readers will ignore an aria-hidden attribute if the element is providing additional context (this is the case for label elements, since they provide additional information about a connected input element). To get around this I've added a aria-label attribute, but again, this is ignore by VO on iOS. This seems to fix the same problem for other screen reader, browser, and device combinations (Narrator and IE / Edge for example).</p>
  
  <p>I've also tried to add a child span or i element to the label and add the :before css rule and aria-hidden attribute to that, but VO on iOS is still reading the pseudo-element.</p>
  
  <p>Does anyone have any advice for having the screen reader read the correct content?</p>
  
  <p>My basic approach is below (note: won't work in a jsfiddle since I'm not loading my font-face).<br>
  You can also view the first example here:
  <a href="http://uatwww.surveygizmo.com/s3/4102902/Basic-Radio" rel="nofollow noreferrer">http://uatwww.surveygizmo.com/s3/4102902/Basic-Radio</a></p>
  
  <pre><code>&lt;input type="radio" id="radio1" value="1" name="example" /&gt;
  &lt;label for="radio1" class="custom-icon" aria-hidden="true" aria-label="example 1"&gt;Example 1&lt;/label&gt;
  
  &lt;input type="radio" id="radio2" value="2" name="example" /&gt;
  &lt;label for="radio2"&gt;
      &lt;span class="custom-icon" aria-hidden="true" aria-label="example 2"&gt;&lt;/span&gt;
      Example 2
  &lt;/label&gt;
  
  &lt;input type="radio" id="radio3" value="3" name="example" /&gt;
  &lt;label for="radio3"&gt;
      &lt;i class="custom-icon" aria-hidden="true" aria-label="example 3"&gt;&lt;/i&gt;
      Example 3
  &lt;/label&gt;
  
  &lt;style&gt;
  input[type=radio] {
      opacity: 0;
      position: absolute;
      border: 0;
      height: 0;
      margin: 0;
      overflow: hidden;
      padding: 0;
  }
  input[type=radio] + .custom-icon:before,
  input[type=radio] + label .custom-icon:before {
      content: "\26aa";
  }
  input[type=radio]:checked + .custom-icon:before,
  input[type=radio]:checked + label .custom-icon:before {
      content: "\26ab";
  }
  &lt;/style&gt;
  </code></pre>