4

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.

enter image description here

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.

  • Are those statistics shown in a list, or any other context? – jazZRo Apr 7 at 8:25
2

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>
| improve this answer | |
  • 1
    You do need an ID, yes. This, however, is not necessary here. Your Semantics make for very good screenreader interpretation. Not because you have used classes or whatever but because the item above explains the item below. Labelledby and Label by etc only make a difference IF something is not 100% clear in UI. – David Apr 8 at 19:27
  • I agree actually. This is an extra step that would make it absolutely clear, but I think the initial presentation of the data (minus the h3) makes it easy to infer the relationship between the data. I'm going to add an edit with another solution that doesn't use ARIA. – KingRichard Apr 8 at 20:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.