Есть ли способ сообщить вспомогательный инструмент для обработки элемента (например: <div>) в целом и не разделить его на дочерние элементы?ARIA: Обработка HTML-элемента в целом

Первый пример

Использование IOS VoiceOver и у с поля на него, он получает расщепляется на два различных элемента:

Второй пример

Эти элементы разделяются на две где наилучшее решение будет считаться «122 пункта» и «Первая позиция»:

<div class="row"> 
    <div class="stat lg col-xs-6"> 
     <span>122</span> 
     <i class="icon icon-prize" aria-hidden="true"></i> 
     <h5>Points</h5> 
    </div> 
    <div class="stat lg col-xs-6"> 
     <span>1º</span> 
     <i class="icon icon-prize" aria-hidden="true"></i> 
     <h5>Position</h5> 
    </div> 
</div>

источник

2017-01-11 Javier Marín

Ваш вопрос, кажется, отсутствует. Можете ли вы вставить HTML-код, который вы использовали для крышки экрана? Также обратите внимание, что читатели экрана намеренно разбивают длинные фрагменты текста на основе пользовательских настроек. – aardrian

Я включил HTML. Считыватели экрана намеренно ломают длинные фрагменты текста, но не лучше ли, если мы сможем указать, как они читаются? 'aria-label' это полезно, но для таких случаев получается много кода избыточности. –

Я обнаружил, что используя role="button", элемент рассматривается как группа, и его свойство innerText читается, но объявляется как кнопка.

источник

2017-01-31 16:21:53

VoiceOver на прошивке действительно иногда разделить предложение, хотя ваш пример код на самом деле работает отлично. Я использовал ваш код в качестве первой строки в снимках экрана ниже, а затем скопировал текст без тега <a> в качестве второй строки. Вторая строка разбивается на VoiceOver, но тег <a> этого не делает.

<span class="label info"> 
    <a href="/round/next"> 
     Next round starts <strong>in 3 days</strong> 
    </a> 
</span> 
<br> 
Next round starts <strong>in 3 days</strong>

(Примечание. я усиленный контур включен для VoiceOver, так что черный контур, вероятно, толще, чем то, что вы привыкли видеть)

источник

2017-01-12 13:22:22 slugolicious

Как насчет более сложных ситуаций? Я обновил пример –

С вашим обновленным примером, мой ответ больше не соответствует вашим первоначальным снимкам экрана, поэтому он выглядит немного запутанным. Можете ли вы включить свой предыдущий пример, а также новый пример? Для нового образца то, что я обычно делаю, помещают арию-метку в основной контейнер, а затем устанавливают aria-hidden = true для подкомпонентов. Нет необходимости в вспомогательных технологиях, чтобы добраться до отдельных предметов, если они не добавляют больше информации. С моими глазами я вижу ваши «122 точки» и значок трофеев как одно, а не три отдельные вещи, поэтому для чтения с экрана они должны быть одинаковыми. – slugolicious

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

ARIA: Обработка HTML-элемента в целом

Первый пример

Второй пример

ответ

Смежные вопросы