WCAG guidelines for displaying a statistic and its value? (in HTML)

Question

Apologies if UX isn't the right place for this, I am a UX designer but this is maybe dabbling a bit into front-end development.

I am working on just producing some HTML/CSS components for a client and am trying to get them as accessible as possible in the code I provide for them. As I've done a few accessibility audits recently this is a big thing I am trying to pull over for my work.

I am trying to work out the best way to present the following, either just using good HTML semantics, or if this requires aria tags, for example labelledby?

I am looking for the best way to display a statistic and then its value. Please don't critique the actual design here, I am not responsible for the design, only for the component production.

Currently my code is:

<div class="statistic">
    <h3 class="statistic-definition">Number of computers affected</h3>
    <span class="statistic-value">230,000</span>
</div>

However I am not sure is a heading h3 element is correct here (it is at least the next highest level heading on the page). Should I be using a label, or a div with a aria-label? Or is it OK to use headings here, even though all that falls under them is a value.

Thanks so much for your help.

Answer 1

Whenever I see an ARIA question, I always want to quote the first rule, but in this case, I think you're on the right track with labelledby, however describedby would fit better in this instance.

I referenced this page on MDN regarding labelledby and I think Example 5 is fitting to your use-case.

The markup they propose for "inline definitions" is:

<p>The doctor explained it had been a 
    <dfn id="placebo">placebo</dfn>, or 
    <span role="definition" aria-labelledby="placebo"> an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span>
</p>

I think adding an ID to your heading and using describedby on the element (since it's not really a true definition) would be a good solution.

In this case, I don't think H3 is the best tag to use semantically either. It's not really defining a subsection of content, so just use CSS to alter the display visually, but leave it as <p> or just in a <div> or <span>.

Here's my complete solution:

<div class="statistic">
    <span class="statistic-definition" id="computers_affected">Number of computers affected</span>
    <span class="statistic-value" aria-describedby="computers_affected">230,000</span>
</div>

Without using ARIA (based on David's comment) I think the following is a proper solution. Just add styling to the span to give it it's own line and sizing.

<div class="statistic">
    <p class="statistic-definition">
        Number of computers affected
        <span class="statistic-value">230,000</span>
    </p>
</div>