Search code examples
htmlaccessibilitywai-aria

how to add accessibility to a X/Y text?

I have a table where one of the columns has info about deployments: X/Y. as in 5 successful deployments out of 15 deployments (X and Y are numbers, here X=5 and Y=15)

how can I make this element more accessible?

so my table looks like this:

<table>
  <thead>
    ...
    <tr>
      <th>Deployment status</th>
    </tr>
    ...
  </thead>
  <tbody>
    ...
    <tr><td>5/15</td></tr>
    ...
  </tbody>
</table>

I'm asking that for testing, but I also want to make the table more accessible

I'm looking for an answer with a suggested HTML tag or aria attributes

Solution

  • my solution was to wrap each value with a span with aria-label: for X=5 and Y=15

      <span aria-label="5 Successful deployments">5</span>
  /
  <span aria-label="15 Total deployments">15</span>