Aria-Live="Напористый" не читается JAWS

Question

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

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

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

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

Подсказка div выглядит следующим образом:

<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', '');
}

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

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

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

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

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

Спасибо! -Ray

ОБНОВИТЬ

Я думал, что опубликую решение, которое мы использовали, на случай, если у других возникнет та же проблема Это упрощенная версия нашего кода, которая показывает, что необходимо, чтобы подсказка была видимой и читалась при ее отображении. Это серверный элемент управления, поэтому многие идентификаторы основаны на свойстве 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>

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

Answer 1

Как быстрый взлом, мне кажется, что следующее работает с IE11 + JAWS 15

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

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

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