html aria-label property code example

Example 1: aria label

aria-label = "any labels"
aria-labelledby = "any labels" - this can also be visible for sighted users

Example 2: css selector aria-label

To 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.

In 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.

This also assumes the CSS loads without any issue (network drops, etc).

This means some users may never hear nor see the value in the cell.

I 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.

That being said, aria-hidden support is generally historically better than the two issues I raise above.

Let 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.

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

Then 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.

<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}