Изменить текст доступности HTML-элемента

Question

Изменить текст доступности HTML-элемента

0

На веб-странице у меня есть div

<div class="expand">+</div>

Нажатие этого div расширяет содержимое.

Мне нужно изменить, что говорят читатели экрана, когда они сталкиваются с этим элементом. Мне удалось приблизиться:

<div class="expand" role="button" title="Tap to expand">+</div>

Если вы нажмете кнопку, iPhone скажет

Плюс... Кнопка... Нажмите, чтобы развернуть

В идеале он просто сказал бы "Button... Tap to expand", или я мог бы полностью контролировать сказанное.

Кроме того, нажатие изменяет содержимое и заголовок на "Нажмите, чтобы скрыть". Элемент сфокусирован незамедлительно, и новый контент читается, но по какой-то причине заголовок не включен в этот раз:

Кнопка Hyphen...

Если вы снова коснетесь его, он скажет название.

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

Explosion Pills 20 сен. 2013, в 17:25

Источник

Теги:

html

ios

accessibility

wai-aria

safari

2 ответа

1

В общем, вы должны быть очень осторожны в том, чтобы точно контролировать этот текст. Люди, использующие устройства для чтения с экрана, используют множество приложений/сайтов и привыкают к тому, как вещи считываются. В случае текста кнопки VoiceOver обычно объявляет:

[Content of button]... Button... [title of button]

Если это специфично для iOS, я думаю, что ваш исходный пример хорош, поскольку VoiceOver считает заголовок "справочным текстом", поэтому он читается последним. Предполагая, что у вас их довольно много, тогда краткость хорошая.

Гифен не означает многого, но вы можете использовать − чтобы сообщить об этом "минус" и обновить заголовок до "Нажмите, чтобы скрыть".

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

Вы могли бы скрыть некоторый текст, например:

<div ...>+<span class="hidden"> description of the content</div>

Затем переместите скрытый экран с помощью CSS.

AlastairC 23 сен. 2013, в 10:29

Ещё вопросы

Explosion Pills · Accepted Answer · 2013-09-20T13-46-00.000Z

Предложения от http://alxgbsn.co.uk/2011/06/06/making-web-content-more-accessible-with-ios-voiceover/ сделали это возможным.

<div class="hide" id="tap-show">tap to expand</div>
<div class="hide" id="tap-hide">tap to hide</div>
<!-- repeat -->
<div class="expand" role="button" aria-labelledby="tap-show"></div>

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

Важно отметить, что role=button необходима, а <div> должна быть пустой. Он может содержать не более пробелов. Вы можете использовать фоновое изображение или:

.expand:after { content: "+"; }