Использовать aria-label, чтобы сделать форму доступной?

Question

Я искал какое-то решение, чтобы сделать доступным, и обнаружил следующее:

Элемент <label> указывает, какое поле формы он помечает, ссылаясь на его значение атрибута id :

<label for="fname"> Он объявляет: «Я являюсь меткой для этого элемента управления».

При aria-labelledby поле формы указывает, какой элемент помечает его, ссылаясь на его атрибут id:

<input aria-labelledby="fnamelabel"> Элемент управления формы объявляет: «Я - элемент управления, помеченный этим элементом».

Таким образом, в основном используется aria-labelledby или тег label с атрибутом for .

Но,

вместо наличия второго тега HTML, чтобы программа чтения с экрана «читала» описание пользователю, не мог бы я просто иметь aria-label на входе? Есть ли причина не делать этого?

Answer 1

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

Вам все равно придется отображать, что пользователь хочет ввести. Примечание: placeholder не является заменой того, что должно go в поле.

Пример:

<input placeholder="name of contact person" value="Sam">
<input placeholder="name of co-worker" value="Tina">

Если вы запустите сниппет, можете ли вы по одному только отрендеренному выводу определить, какое поле содержит какую информацию? (Нет, вы не можете)

Вот почему вам всегда нужно показывать метку для входа, поэтому нет необходимости ее опускать.

Вы также можете написать HTML так:

<label> 
Name 
<input type="text">
</label>

Answer 2

У вас есть атрибут for для элемента label, который должен содержать идентификатор входа. Так создается ассоциация (нет необходимости в тегах ARIA)

<label for="demo123">First Name</label>
<input id="demo123" />

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

<input aria-label="First Name" />

Вот рабочий пример, чтобы помочь.

<link href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/1.0.4/balloon.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
     <div class="form-group">
            <span class="required" aria-required="true"><i title="Required" class="fas fa-asterisk fa-cl" aria-hidden="true"></i><span class="sr-only">Required</span></span>
            <label for="Textbox3836">First Name</label>
            <span tabindex="0" role="button" class="text-info help-icon" data-balloon-pos="down" data-balloon-length="large" id="Textbox3836_Help_desc" aria-label="Tip: Please enter your legal first name."><i class="fas fa-info-circle fa-lg" aria-hidden="true"></i></span>
            <input class="form-control" type="text" id="Textbox3836" name="Textbox3836" maxlength="250" placeholder="Ex: Andrew" data-identifier="Text box" aria-describedby="Textbox3836_Hint_desc Textbox3836_Help_desc">
            <span class="sr-only" id="Textbox3836_Hint_desc">Example Andrew</span>
        </div>
        
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

Посмотрите на этот пост, он может помочь с более тонкими точками. Специальные вопросы по лучшим практикам для полей, описанных в арии,

Answer 3

WCAG Критерий успеха 2.5.3: метка в имени требует видимой метки

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

Это может использоваться, например, для управления интерфейсом с помощью голоса.

Это не должно быть ошибочным с 4.1.2 Имя, роль, значение (или другие критерии), которые относятся к доступному имени, а не к видимой метке.

Answer 4

Это на самом деле не так просто, как вы могли подумать.

@ cloned привел отличный пример того, почему у вас должна быть видимая метка над входом, это значительно облегчает понимание того, что было заполнено

Это особенно важно для людей с тревожными расстройствами, поскольку они часто все перепроверяют.

Без метки их единственный вариант - удалить каждое поле и повторно ввести его (несколько раз), чтобы подтвердить, что они заполнены. все правильно.

Так что лучший вариант - обернуть его в <label> (как предложено @cloned) или использовать <label for="idOfInput"> в качестве одинаково правильного способа сделать это (как вы указали в своем вопросе) .

Так что насчет aria-labelledby - зачем вам это использовать на <input>?

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

Но у него есть лучшая функция, вы можете добавить несколько id's для входа. Это может быть полезно для входных данных, которые являются частью группировки или расположены в таблице (если у вас есть веская причина поместить их в таблицу), так как вы можете использовать одну метку в качестве имени группы, одну для имени элемента, делая HTML больше DRY (не повторяйте себя).

Почему бы не использовать aria-label вместо aria-labelledby?

Хороший вопрос, основная причина - поддержка aria-label все еще немного ненадежна в некоторых программах чтения с экрана.

Поддержка aria-labelledby лучше , но все равно просто используйте <label> везде, где можете.

tl; dr

Используйте <label> везде, где сможете, измените дизайн, чтобы разместить метки, если их в данный момент нет, даже если вам приходится спорить с графикой c дизайнер над эстетикой этикеток.

Используйте aria-labelledby везде, так как он имеет чуть лучшую поддержку, чем aria-label.

Верх Совет

«WAI-ARIA» используется для добавления дополнительной информации, которая не может достигается с HTML разметкой. У входов есть метки как часть semanti c HTML, поэтому используйте их!

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

WAI-ARIA должна быть последним средством .