Я пытаюсь создать доступное поле ввода следующим образом:
<input type="text" role="textbox" aria-labelledby="helper-msg-value">
<p id="helper-msg-value">You must enter a value</p>
Есть ли способ использовать класс в качестве селектора для атрибута aria-labelledby вместо идентификатора? Что-то вроде этого:
<input type="text" role="textbox" aria-labelledby=".helper-msg-value">
<p class="helper-msg-value">You must enter a value</p>
Невозможно использовать класс с aria-labelledby или aria-describedby. Хотя с помощью aria-labelledby к элементу можно прикрепить несколько меток, единственными значениями, с которыми он работает, являются идентификаторы. Я предполагаю, что это так, потому что они ожидают, что эти ярлыки будут уникальными для этой цели. Одним из возможных решений было бы прикрепить «метку арии» к вводу с текстом, который вы хотите, чтобы он действительно читался. Например, имея
<label for="textfield">Q.T.Y.</label> <input type="text" id="textfield" aria-label="Quantity">
позволит программе чтения с экрана читать текст, который отличается от отображаемой метки. Просто имейте в виду, что многие (большинство?) программ чтения с экрана не будут читать элемент <label>, если на входе была использована метка aria.
Изменить: класс предназначен для использования для нескольких экземпляров элемента на странице. Когда вы фокусируетесь на элементе, программа чтения с экрана должна точно знать, какой элемент будет представлять атрибут aria. Вот почему используются идентификаторы — идентификаторы должны быть уникальными для страницы, то есть определенный идентификатор может принадлежать только одному элементу. Это позволяет браузеру (и вспомогательным технологиям) быстро и точно выбрать правильный элемент для атрибута aria. Если бы у вас было три элемента на странице с одинаковым классом, но разным содержанием, что бы вы ожидали прочитать?
Правка №2: я хотел вернуться к этому, чтобы предостеречь от использования арии-метки, отличной от отображаемой метки, из-за возможных проблем с технологиями диктовки (такими как Dragon Naturally Speaking или другими). Пользователь, который управляет веб-страницей своим голосом, часто будет полагаться на отображаемые метки для правильного взаимодействия со страницей.
Чтобы привести пример:
<button aria-label="click to buy">Checkout</button>
Пользователь, который видит оформление заказа на странице, но использует программное обеспечение для диктовки, может продиктовать нажатие кнопки «Оформить заказ», но программное обеспечение для диктовки не узнает о кнопке «Оформить заказ», потому что метка арии означает «щелкнуть, чтобы купить».
Почему бы просто не использовать обычную этикетку и не прикрепить ее как обычно. Это будет работать во всех браузерах и программах чтения с экрана...
<div class="field">
<label for="qty" class="required"><abbr title="Quantity">Qty</abbr></label>
<input type="text" name="qty" aria-required="true" id="qty" class="required">
</div>
Таким образом, у нас есть правильное совпадение метки и ввода, поэтому автоматические проверки не подведут. Он будет читать метку в контексте, сообщая пользователям, что это за поле, чтобы они знали, что вводить (в вашем случае вы не сообщаете пользователю, что они вводят). И мы пользователь aria-required, который просто пингует пользователя с «требуется». И это стандартно, для этого не нужно добавлять дополнительный текст и метки.
Может стилизовать требуемый * или что не на основе требуемого класса
<label>Qty</label> мы не хотим, чтобы программа чтения с экрана читала Q - T - Y, мы хотим, чтобы она читала «Количество».
- person Ralph David Abernathy; 29.06.2016
<label title="Quantity"><abbr>Qty</abbr></label> Или просто измените его на Количество, если у вас достаточно места для формы.
- person Tim; 30.06.2016
aria-labelledby. - person Ronnie Royston schedule 14.02.2018