где и когда использовать aria-label?

Question

Атрибут aria-label, когда он используется в какой ситуации,.которые являются тегами, которые поддерживают этот атрибут.в каких ситуациях использовать этот атрибут.Есть ли какое-либо правило для использования этого атрибута.

Прокомментируйте, если вопрос неясен

Answer 1

Метка используется для описания поля.Очень важно иметь ярлык, описывающий поле, чтобы, когда пользователь просматривал вкладки, он знал, что он должен там делать.Просто представьте, что вы находитесь в новом месте, но не знаете названия, и оно не помечено как так, как вы могли узнать название этого места.Так вот в чем дело.

Теперь давайте поговорим об aria-label, он используется для определения меток текущего поля.Лучше всего использовать, когда метка не видна.Кроме того, лучше всего иметь ярлык aria для программы чтения с экрана, просто подумайте о слепых людях, которые используют вспомогательную технологию, он взаимодействует с формой и есть кнопка, просто посмотрите ниже ( MDN Пример ):

X

То, что тот слепой человек услышит в программе чтения с экрана, он услышит X, по этому тексту он не поймет, что эта кнопка используется для закрытия диалога.

X

Если есть метка арии, как в этом примере, тогда вы наверняка поймете, что эта кнопка используется для закрытия диалога.

Так что лучше всегоиспользуйте aria-label в каждом действующем поле.

В aria-label есть правило, которому я должен следовать, а именно: «Не меняйте смысл семантических элементов»

Answer 2

В приведенном ниже примере кнопка имеет стиль, похожий на типичную кнопку «Закрыть», с Х в середине.Поскольку ничто не указывает на то, что целью кнопки является закрытие диалога, атрибут aria-label используется для предоставления метки любым вспомогательным технологиям.

In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies.

<button aria-label="Close">X</button>

X

Answer 3

aria-label для предоставления невидимой метки, где видимая метка не может быть использована.

Цель этого метода - предоставить метку для объектов, которые могут быть прочитаны с помощью вспомогательной технологии.Атрибут aria-label предоставляет текстовую метку для объекта, например кнопки.Когда средство чтения с экрана встречает объект, текст метки aria читается, чтобы пользователь знал, что это такое.

все атрибуты поддержки тегов html aria-label могут использовать атрибуты area-label с

<button aria-label="Close">X</button>