title: Best practice to use aria-label as a selector for styling
body: <p>I am styling a table that has table cells with (non-interactive) checkmarks in it. The checkmark icons are added via CSS. As there is no accessible content in it, I added an <code>aria-label</code> to it. Now I wonder if it is a good idea to use this attribute as a CSS selector to add those checkmark icons like this:</p>
  
  <pre><code>td[aria-label="yes"] {
    &amp;:after {
      content: '\f00c';
      font-family: $font-family-icons;
    }
  }
  </code></pre>
  
  <p>I learned that using ARIA attributes as selectors is generally a good practice, at least for state related attributes like <code>aria-hidden</code>, <code>aria-expanded</code> etc. In this case it made sense to me to have the td styling coupled to the corresponding label. But of course if those labels change at some time I'll need to adapt the CSS too.</p>
  
  <p>Do you know any other drawbacks apart from that? Or do you have ideas on how to solve this more elegantly?</p>