Блог

Главная - Вопросы по программированию - Каков правильный HTML-код для отображения статистики наиболее доступным способом?

Каков правильный HTML-код для отображения статистики наиболее доступным способом?

#html #accessibility #wai-aria

Вопрос:

Контекст

Я создаю компонент, который отображает важную статистику, которая выглядит следующим образом:

Пример

Он будет использоваться в нескольких контекстах:

  1. Как часть панели мониторинга, где будет много этих компонентов для различных статистических данных, таких как подписчики в Twitter и звезды Github.
  2. Он также появится сам по себе в сообщении в блоге (о том, как построен этот компонент).

Вопрос

Каким был бы наиболее подходящий HTML-код, чтобы сделать этот компонент доступным? Нужно ли мне вообще использовать атрибуты ARIA?

Мой предыдущий подход

Я склоняюсь к использованию figure элемента, в котором заголовок «Подписчики на Github» является подписью.

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

Мой нынешний подход

Я перешел на использование div s, так как я не буду знать все контексты, в которых будет использоваться этот компонент. Вместо этого я использовал aria-labelledby атрибут, чтобы связать номер с его меткой.

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

Комментарии:

1. Используйте атрибут ID, если вы хотите получить доступ к нему из javascript

2.когда вы говорите, что собираетесь использовать многие из них, будут ли они вместе (например, список из них, даже если они не являются списком как таковым?). Это для того, чтобы мы могли использовать <dl> <dt> и <dd> . Или они с большей вероятностью будут отображаться как отдельные элементы на панели мониторинга / сайте? Для ясности, не могли бы вы показывать «статистику github, статистику twitter» вместе каждый раз в разных местах на сайте?

3. Он будет использоваться на странице панели мониторинга, где он будет отображаться как часть таблицы статистики. Он также будет использоваться во многих местах самостоятельно, например, в сообщениях в блоге. Это заставляет меня задуматься, должны ли быть 2 компонента, которые делают одно и то же, но используются в разных контекстах. Как ты думаешь, @GrahamRitchie? Он мог бы использовать dt и dd , но тогда мне нужно было бы строго следить за тем, чтобы всегда оборачивать компонент в a dl .

4. С семантической точки зрения я бы сказал, что это цифра, как вы предложили. dl и dd применитесь к спискам описаний элементов, а это не список.

Ответ №1:

Спасибо всем, кто прокомментировал этот пост. Я постараюсь ответить на этот вопрос как можно лучше с помощью собранной мной информации.

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

Это часть многоразового компонента React, поэтому я использую div s вместо контекстных/семантических HTML-элементов. Чтобы предоставить вспомогательным технологиям полезную информацию, я использую атрибут ARIA labelledby.

Я написал об этом более подробно в своем блоге, если кого-то заинтересует полное решение, которое я создал: https://www.jamiedavenport.dev/blog/building-a-stat-card-component

Метки: