JAWS不會讀取Aria-Live =“ Assertive”

Question

您好Stackoverflow社區。 這是我的第一個問題，但我會盡量簡潔明了。

我的任務是將我們的ASP.NET Web應用程序更新為符合508節。 這對我來說是非常陌生的，而且我無法按預期工作。

我們有一個頁面，用戶可以通過onmouseover事件獲取有關鏈接的其他信息。 顯然，這對於沒有視力的用戶不起作用。 因此，我們為他們提供了一個“更多信息”按鈕，該按鈕顯示了有視力的用戶所獲得的“工具提示” div。

我向“ tooltip” div添加了aria-live="assertive ，但要理解的是，如果在頁面加載時div被隱藏，然后通過按鈕顯示，則JAWS會讀取它。令我沮喪的是，這不是案件。

工具提示div如下所示：

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

通過帶有以下JavaScript代碼的按鈕的click事件顯示它：

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

顯示工具提示div的按鈕如下所示：

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

通過在工具提示div中添加role =“ alert”，我成功地讓JAWS讀取了工具提示，但是我想避免將警報角色用於非警告目的。 主要是因為它顯示為“警告，這是我的工具提示文字”。 給用戶。

我想知道什么是使下巴在可見時讀取工具提示的正確方法？

我正在使用IE 11和JAWS16。InternetExplorer和JAWS是我無法更改的要求。

謝謝！ -射線

更新

我以為我會發布我們使用的解決方案，以防其他人遇到相同的問題。 這是我們代碼的簡化版本，顯示了使工具提示可見並在顯示時讀取的必要條件。 這是一個服務器控件，因此許多ID都基於控件的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)
}

您還可以嘗試以下操作：

• 將您的工具提示文字推到一個實時顯示的詠嘆調區域， 屏幕閱讀器始終在屏幕上可用
• 動態將用戶的焦點移至工具提示。 （不過，我會非常謹慎地執行此操作。這可能會使您的用戶感到困惑。）