What is the correct HTML for displaying a statistic in the most accessible way?

user_3912090 0
Viewed 120

Context

I am creating a component that displays important statistics that looks like this:

Example

It will be used in a few contexts:

  1. As part of a dashboard where there will be many of these components for different stats such as Twitter followers and Github stars.
  2. It's also going to appear on its own within a blog post (which is about how this component is built).

Question

What would be the most appropriate HTML to make this component accessible? Do I need to use ARIA attributes at all?

My previous approach

I'm leaning towards using a figure element where the title, "Github followers" is the caption.

<figure>
  <figcaption>Github followers</figcaption>
  <span>10</span>
</figure>

My current approach

I've changed to using divs since I won't know all the contexts where this component is going to be used. Instead I've used the aria-labelledby attribute to associate the number with its label.

<div>
  <div id="followers">Github followers</div>
  <div aria-labelledby="followers">10</div>
</div>
wai-aria accessibility html
1 Answers

Thanks to everyone who commented on this post. I'm going to try to answer this as best I can with the information I've gathered.

<div>
  <div id="followers">Github followers</div>
  <div aria-labelledby="followers">10</div>
</div>

This is part of a reusable React component, so I'm using divs instead of contextual/semantic HTML elements. To provide assistive technologies with useful information, I am using the ARIA labelledby attribute.

I've written about this in more detail on my blog if anyone is interested in the full solution I built: https://www.jamiedavenport.dev/blog/building-a-stat-card-component

user_39120900
Related