Aria-Live = Assertive не читается JAWS

Привет, сообщество Stackoverflow. Это мой первый вопрос, но я постараюсь быть максимально кратким и подробным.

Мне было поручено обновить наши веб-приложения ASP.NET, чтобы они соответствовали разделу 508. Все это для меня в новинку, и у меня проблемы с тем, чтобы все работало так, как ожидалось.

У нас есть страница, на которой пользователь получает дополнительную информацию о ссылке через событие onmouseover. Очевидно, это не работает для незрячих пользователей. Поэтому мы предоставляем им кнопку «Дополнительная информация», которая отображает тот же блок «всплывающей подсказки», который получает зрячий пользователь.

Я добавил aria-live="assertive в div «всплывающую подсказку», понимая, что если бы этот div был скрыт при загрузке страницы и затем отображался с помощью кнопки, он будет прочитан JAWS. К моему ужасу, это не так.

Всплывающая подсказка выглядит так:

<div id='tooltip' aria-live='assertive' style='display:none;'>
    <span id='tooltip_message'>This is my tooltip text</span>
</div>

Это отображается через событие нажатия кнопки со следующим кодом JavaScript:

function ShowTooltip(ttID)
{
  var tt = $('#' + ttID);   
  tt.css('display', '');
}

Кнопка для отображения всплывающей подсказки выглядит так:

<button id='ttBtn' onclick="ShowToolTip('tooltip'); return false;">
    More information
</button>

Мне удалось заставить JAWS прочитать всплывающую подсказку, добавив role = "alert" в div всплывающей подсказки, но я бы не хотел использовать роль предупреждения для целей, не связанных с предупреждением. В основном потому, что там написано «Оповещение, это текст моей всплывающей подсказки». пользователю.

Я хотел бы знать, как лучше всего заставить челюсти прочитать всплывающую подсказку, когда она станет видимой?

Я использую IE 11 и JAWS 16. Internet Explorer и JAWS - это требования, которые я не могу изменить.

Спасибо! -Рэй

ОБНОВЛЕНИЕ

Я подумал, что опубликую решение, которое мы использовали, на случай, если у других возникнет такая же проблема. Это упрощенная версия нашего кода, которая показывает только то, что необходимо, чтобы всплывающая подсказка отображалась и читалась при ее отображении. Это серверный элемент управления, поэтому многие идентификаторы основаны на свойстве ClientID элемента управления и имеют известные суффиксы (_tootip, _tooltipcontainer и т. Д.)

JavaScript:

 //handles showing/hiding of the tooltip
 function ShowToolTip(ttID)
 {
    var tt = $('#' + ttID + '_ToolTip');    
    var ttContainer = $('#' + ttID + '_ToolTipContainer');  

    var ttClone = tt.clone();
    tt.remove(); 
    ttClone.css('display', '');
    ttContainer.append(ttClone);
}

//Closes the tooltip and returns focus to the hidden (from sighted users) button that shows it.
function CloseToolTip(ttID)
{     
    var tt = $('#' + ttID + '_ToolTip');                   
    tt.css('display', 'none');
}";

Разметка:

<button id="tooltip1_508KeyboardButton" class="hidden" onclick="ShowToolTip('tooltip1'); return false;" onblur="CloseToolTip('tooltip1');">Click for overview</button>

<div id='tooltip1_ToolTipContainer' aria-live='polite' aria-atomic='true'>
    <div id='tooltip1_ToolTip' class='section tooltip' style='display:none;'>
        <span id='tooltip1_Msg'>This is my tooltip's text.</span>
   </div>
</div>

Надеюсь, это кому-то пригодится в будущем. Насколько я понимаю, я мог бы легко разместить область aria-live, которая остается видимой где-нибудь за пределами экрана, которая меняет свой текст, когда всплывающая подсказка «отображается». Так что есть много способов снять шкуру с этой кошки.


html wai-aria jaws-screen-reader aria-live
person Ray Phillips    schedule 16.04.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

В качестве быстрого взлома у меня с IE11 + JAWS 15 работает следующее:

function ShowTooltip(ttID)
{
  setTimeout(function(){
    $('#' + ttID).css('display', 'block');
  }, 100)
}

Вы также можете попробовать следующее:

person TimHayes    schedule 21.04.2015
comment
Мы использовали решение, очень похожее на вашу первую пулю. Но мы по-прежнему скрываем / показываем регион с помощью JavaScript. Хитрость заключалась в том, чтобы удалить диапазон, содержащий сообщение, а затем добавить его обратно. Это привело к правильному чтению региона. Я столкнулся с этим решением, просматривая исходный код страницы Freedom Scientific, на которой отображалось сообщение, которое менялось каждые 10 секунд. Они удаляли старое сообщение и создавали новое. Чтобы избежать ненужных шагов, мы клонируем сообщение, а затем удаляем старое, а затем снова добавляем клон. - person Ray Phillips; 27.04.2015