时间戳

首页 > 解决方案 > 以最易于访问的方式显示统计信息的正确 HTML 是什么？

html - 以最易于访问的方式显示统计信息的正确 HTML 是什么？

问题描述

语境

我正在创建一个显示重要统计信息的组件，如下所示：

例子

它将在几种情况下使用：

  1. 作为仪表板的一部分，其中将有许多用于不同统计数据的组件，例如 Twitter 关注者和 Github 明星。
  2. 它也将单独出现在博客文章中（这是关于如何构建此组件的）。

问题

使该组件可访问的最合适的 HTML 是什么？我是否需要使用 ARIA 属性？

我之前的做法

我倾向于使用figure标题为“Github 追随者”的元素。

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

我目前的做法

我已更改为 using divs，因为我不知道将使用该组件的所有上下文。相反，我使用该aria-labelledby属性将数字与其标签相关联。

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

标签： htmlaccessibilitywai-aria

解决方案

感谢所有评论这篇文章的人。我会尽量用我收集到的信息来回答这个问题。

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

这是可重用的React 组件的一部分，所以我使用divs 而不是上下文/语义 HTML 元素。为了向辅助技术提供有用的信息，我使用了ARIA labelledby 属性。

如果有人对我构建的完整解决方案感兴趣，我已经在我的博客上对此进行了更详细的描述：https ://www.jamiedavenport.dev/blog/building-a-stat-card-component

推荐阅读