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.