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

Question

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

Мне было поручено обновить наши веб-приложения 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', ''); 
} 

Кнопка, чтобы показать всплывающую подсказку DIV выглядит это:

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

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

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

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

Спасибо! -Ray

UPDATE

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

Markup:

<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) 
} 

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

• раздвинуть текст ваших подсказок к арии -область, которая всегда available "on screen" to screen readers
• Динамически переключите фокус пользователя на всплывающую подсказку. (Я был бы очень осторожен в этом, но это может смутить ваших пользователей.)