製作一個字體真棒圖標標籤能夠提示工具提示

我在一個508合規網站工作，並且對於不具視力的用戶的可訪問性是一個優先事項。這些用戶使用屏幕閱讀器（下巴）盲目瀏覽網站。從邏輯上說，它們不能使用鼠標，因此必須通過鍵盤對其進行標籤訪問。如果將工具提示應用於輸入字段，這樣做相當容易，但我們的可訪問性管理器在使用工具提示的字體真棒圖標時很重要。問題在於，該圖標不是輸入字段，因此它不遵守標籤順序。製作一個字體真棒圖標標籤能夠提示工具提示

我知道必須爲此做一個解決方法。我附上一個搗鼓這個HERE

下面是代碼

<div class="form-group"> 
    <label class="control-label">Email</label> <i id="fieldwithtooltip" class="fa fa-question-circle" data-trigger="click" data-toggle="tooltip" data-placement="right" title="Tooltip on right" aria-describedby="tip1"></i> 
    <span id="tip1" class="tooltip hidden" role="tooltip">Also known as User ID</span> 

    <input type="text" name="email" class="form-control input-sm" /> 
</div>

CSS

.hidden {display:none;} 
span[aria-hidden="true"] {display:none;} 
span[aria-hidden="false"] {display:block;}

$(document).ready(function() { 
    $("#tip1").attr("aria-hidden", "true"); 
});

任何想法給字體真棒圖標「？」標籤焦點？

來源

2014-11-13 LOTUSMS

你'.hidden'類將隱藏大家內容：屏幕閱讀器和非屏幕閱讀器的用戶。你的意思是['.visually-hidden']（https://developer.yahoo.com/blogs/tenydnblog/clip-hidden-content-better-accessibility-53456.html）（或者'.element-invisible'，如果你喜歡）？ – FelipeAls

非常有用的內容與您的問題相關：http://www.powermapper.com/tests/screen-readers/labelling/ – FelipeAls

確實很有趣。我今天會仔細檢查這個鏈接。隱藏的類讓它不會以任何方式顯示，直到獲得焦點或點擊。我實際上設法通過將它包裝在標籤中來給出Tab鍵順序。但是這引發了其他可訪問性差異，例如將其識別爲實際的超鏈接。我猜ARIA和角色會照顧這個問題。如果我找出答案，或者其他人打我的話，我會在這裏爲未來的讀者發佈一個答案:) – LOTUSMS

這裏有一個新的fiddle

我加tabindex="0"到<i>並創造了兩個事件來切換詠歎調屬性。

$(document).ready(function() { 
    $("#tip1").attr("aria-hidden", "true"); 
    $("#fieldwithtooltip").on("focus", function(){ 
      var target = "#" + $(this).attr("aria-describedby"); 
      $(target).attr("aria-hidden", "false"); 
    }); 
    $("#fieldwithtooltip").on("blur", function(){ 
      var target = "#" + $(this).attr("aria-describedby"); 
      $(target).attr("aria-hidden", "true"); 
    }); 
});

雖然這顯然有效，但我不確定屏幕閱讀器如何響應。請讓我知道你是否運行了一些測試。

來源

2014-11-20 07:29:10 MCTaylor17

我設法以不同方式構建它，但這是一個很好的解決方案！謝謝。如果我的修復程序未傳遞可訪問性，我一定會使用它。做得好！ – LOTUSMS

將圖標包裝在錨標籤內以允許通過標籤在其上。 Foe anchor tag（定義空href）並添加onclick來執行所需的操作。

<a href onclick="someFun()"><i class="fa fa-close" ></i></a>

來源

2017-07-21 12:45:53

製作一個字體真棒圖標標籤能夠提示工具提示

回答

相關問題