3

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>
Jamie Davenport
  • 351
  • 3
  • 10
  • Use ID attribute if you want to access it from javascript – Aditya Jul 31 '21 at 13:28
  • when you say you are going to be using many of them, are they going to be together (like a list of them even if they aren't a list as such?). It so we could use `
    ` `
    ` and `
    `. Or are they more likely to appear as singular items throughout the dashboard / site? For clarity, would you show "github stats, twitter stats" together every time at different places throughout the site?
     – GrahamTheDev Jul 31 '21 at 13:53
  • It will be used on a dashboard page where it'll appear as a part of a grid of stats. It will also be used in a lot of places on its own e.g. within blog posts. This makes me wonder if there needs to be 2 components that do the same thing but are used in different contexts. What do you think @GrahamRitchie? It could use `dt` and `dd` but then I'd need to be strict about always wrapping the component in a `dl`. – Jamie Davenport Jul 31 '21 at 14:08
  • Semantically speaking I would say this is a figure, like you have proposed. `dl` and `dd` apply to description lists of elements, and this isn't a list. – anatolhiman Aug 03 '21 at 00:19

1 Answers1

0

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

Jamie Davenport
  • 351
  • 3
  • 10