aria-label, h-card или оба?

Нужно ли мне aria-label атрибуты, когда я использую h-карту (это для контактной информации компании в нижнем колонтитуле страницы)?

<div class="h-card">
  <a class="u-url" href="http://example.com">
    <img src="http://example.com/static/logo.svg" alt="Example Logo">
    <span class="p-name sr-only">Example Corp.</span>
  </a>
  <div aria-label="Address" class="p-adr h-adr">
    <span class="p-locality">Eugene</span>
    <span class="p-region">OR</span>
    <span class="p-postal-code">97403</span>
  </div>
  <a aria-label="Telephone" class="p-tel" href="tel:12345678">(12) 345-678</a>
</div>

Эти ярлыки арии здесь излишни или они представляют какую-то ценность? Должно быть более подробно aria- атрибуты? (И если да, то что?)

Источник

2 ответа

Решение

WAI-ARIA и микроформаты не "конкурируют":

  • WAI-ARIA - это основа для повышения доступности вашего веб-контента.

  • Микроформаты - это соглашение для разметки структурированных данных на ваших HTML-страницах.

У них разные цели, и потребители WAI-ARIA не обязательно поддерживают микроформаты, а потребители микроформатов не обязательно поддерживают WAI-ARIA.

Поэтому, когда вы решаете, нужен ли вам атрибут WAI-ARIA aria-label в вашем примере игнорируйте, если или как вы используете микроформат h-card, и наоборот. Они не взаимодействуют друг с другом.

Источник

Лучше не использовать aria-label Вот; в худшем случае программа чтения с экрана будет читать метку aria вместо вашего контента, делая его менее доступным.

Как указано, aria-label значение, если присутствует, используется вместо содержимого элемента (несколько упрощая); но на практике поведение меняется весьма в зависимости от типа элемента и от конкретного используемого программы чтения с экрана / браузера;

Как оказалось, в случае или aria-label используется на SPAN,

  • VoiceOver на Mac считывает метку вместо содержимого

  • NVDA и JAWS в Windows полностью игнорируют aria-label и просто читают содержимое div/span. (Это поведение может измениться в будущем обновлении этих инструментов...)

Так что в лучшем случае это игнорируется; в худшем случае это заменяет ваш фактический контент. Лучше не использовать его в вашем случае.

ARIA может быть очень полезна при осторожном использовании; но проблемы совместимости браузера означают, что он, к сожалению, полон ловушек; если вы собираетесь использовать его вообще, рекомендуйте ознакомиться со спецификациями, а также убедиться, что вы тестируете с помощью реальных программ чтения с экрана, чтобы вы могли убедиться, что использование aria не приведет к непреднамеренным последствиям, которые сделают ваш контент менее доступным!

Источник
Другие вопросы по тегам