Где и когда использовать aria-label?
Атрибут aria-label, когда он используется в какой ситуации, . какие теги поддерживают этот атрибут . в каких ситуациях следует использовать этот атрибут . есть ли какое-либо правило для использования этого атрибута.
прокомментируйте, если вопрос неясен
Ответы 3
aria-label, чтобы предоставить невидимую метку, где нельзя использовать видимую метку.
Цель этого метода - предоставить метку для объектов, которые могут быть прочитаны вспомогательными технологиями. Атрибут aria-label предоставляет текстовую метку для объекта, например кнопки. Когда программа чтения с экрана встречает объект, читается текст aria-label, чтобы пользователь знал, что это такое.
все теги html поддерживают aria-labelатрибуты метки области можно использовать с
<button aria-label = "Close">X</button>
Я сомневаюсь, читает ли он текст aria-label или текст между тегами
Нет, вы должны добавить оба текста в aria-label.
@MohammedRabiullaRABI Если вместо этого вы используете aria-labeledby, вы можете указать несколько идентификаторов (разделенных пробелами). Некоторые из них могут быть видны, некоторые нет. Таким образом, вам не нужно будет включать одну и ту же строку дважды. например <button aria-labeledby = "foo bar"><span id = "foo">Open</span><span id = "bar" class = "offscreen">in new window</span></button> отобразит «Открыть», но программа чтения с экрана сообщит «Открыть в новом окне». (Предполагая, что класс offscreen действительно где-то разместил диапазон за кадром).
Метка используется для описания поля. Очень важно иметь метку, описывающую поле, чтобы пользователь, переходя по нему, знал, что он должен там делать. Только представьте, что вы находитесь в новом месте, но не знаете его названия, и оно не помечено, так как же вы могли узнать название этого места. Так вот в чем дело.
Теперь поговорим об aria-label, он используется для определения ярлыков текущего поля. Лучше использовать, когда этикетка не видна. Кроме того, лучше всего иметь aria-label для программы чтения с экрана, просто подумайте о слепых, которые используют вспомогательные технологии, которые он связывает с формой, и есть кнопка, просто посмотрите ниже (Пример MDN):
Икс
То, что слепой услышит в программе чтения с экрана, он услышит X, по этому тексту он не поймет, что эта кнопка используется для закрытия диалога.
Икс
Если есть aria-label, как в этом примере, тогда вы наверняка поймете, что эта кнопка используется для закрытия диалогового окна.
Так что лучше всего использовать aria-label во всех сферах деятельности.
Есть правило, которое, я думаю, мы должны соблюдать в aria-label, а именно: «Не изменяйте значение семантических элементов».
если этот текст сам по себе "близок", я думаю, нет необходимости в метке арии, верно?
Да, но лучше использовать его на ярлыке целевого поля, потому что программа чтения с экрана читает aria-label. Потому что в форме использование метки - это хорошая практика. Если у вас недостаточно пробелов, просто используйте отрицательное поле, чтобы скрыть эту метку. Но лучше всего использовать метку для поля формы.
В приведенном ниже примере кнопка стилизована под типичную кнопку «закрыть» с X посередине. Поскольку нет ничего, указывающего на то, что цель кнопки - закрыть диалоговое окно, атрибут 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>Икс
Возможно, здесь вы найдете ответ на свой вопрос. stackoverflow.com/questions/22039910/…