Программы чтения с экрана, ярлыки и выбор меню - PullRequest
Новая
       22

Программы чтения с экрана, ярлыки и выбор меню

0 голосов
/ 01 марта 2020

В настоящее время я пишу отдельные меню без какой-либо метки. Какой атрибут я использую для меню выбора, в котором программа чтения с экрана читает «месяц истечения» и «год истечения»?

Expiration Date Select menu

<div class="flex-exprdate">
<select id="expirymonth" name="expirymonth">
    <option value="01">01</option>
</select>
/20
<select id="expiryyear" name="expirydate">
    <option value="20">20</option>
</select>

Ответы [ 2 ]

2 голосов
/ 01 марта 2020

Если у вас нет метки метки, используйте атрибут aria-label

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

0 голосов
/ 02 марта 2020

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

Вы можете найти это удивительным, но поддержка WAI-ARIA не является блестящей в программах чтения с экрана - например, IE и NVDA не работает должным образом в режиме чтения для комбинации метки и ввода (а 'System To Go' вообще не работает - хотя ее использование теперь составляет только около 2%).

Вместо этого вы должны использовать ассоциированную метку (используя for="inputID").

Чтобы убедиться, что это не мешает дизайну, вы должны затем «визуально скрыть» эту метку, используя класс «визуально скрытый» в приведенном ниже примере.

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

Золотое правило для доступности:

WAI-ARIA следует использовать, когда нет возможности раскрыть информацию о доступности с помощью semanti c HTML или предоставить дополнительную информацию, которую нельзя предоставить с помощью semanti c HTML, но она добавит ценность конечному пользователю. 

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<div class="flex-exprdate">
<label for="expirymonth" class="visually-hidden">Expiry Month</label>
<select id="expirymonth" name="expirymonth">
    <option value="01">01</option>
</select>
/20
<label for="expiryyear" class="visually-hidden">Expiry Year</label>
<select id="expiryyear" name="expirydate">
    <option value="20">20</option>
</select>
</div>
...