css selector aria label

1To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit.
2
3In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for aria-label (on <td>s as well as other elements) can be shaky on older browser / screen reader combos, and second, support for CSS generated content by older browser / screen reader combos can be more shaky. I know nothing about your users, however, to know if this matters.
4
5This also assumes the CSS loads without any issue (network drops, etc).
6
7This means some users may never hear nor see the value in the cell.
8
9I try to ensure that the raw content is available regardless of whether the CSS loads to style it, and I also try to limit my reliance on ARIA.
10
11That being said, aria-hidden support is generally historically better than the two issues I raise above.
12
13Let me toss another idea your way. This is not necessarily better, but I think it is more robust when considering unknown user AT configurations and potential network issues.
14
15I put both the text and checkmark into the <td>. If the CSS never loads (or the users is on a really old browser), no big deal. The worst that will happen is a user sees / hears "Yes check."
16
17Then the aria-hidden makes sure the checkmark does not get announced to screen readers. The CSS hides the text from sighted users. And I think you have the effect you want.
18
19<td>
20 <span class="visually-hidden">Yes</span>
21 <span aria-hidden="true">&#10004;</span>
22</td>
23
24.visually-hidden {
25  position: absolute !important;
26  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
27  clip: rect(1px, 1px, 1px, 1px);
28  padding:0 !important;
29  border:0 !important;
30  height: 1px !important;
31  width: 1px !important;
32  overflow: hidden;
33}