jquery - 为工具提示可访问性制作一个字体很棒的图标选项卡

Question

我在一个 508 合规网站工作，为视力不佳的用户提供可访问性是当务之急。这些用户使用屏幕阅读器 (jaws) 盲目浏览网站。从逻辑上讲，他们不能使用鼠标，因此必须使用键盘按 Tab 键访问工具提示。如果将工具提示应用于输入字段，这很容易做到，但我们的辅助功能管理器决心为工具提示使用字体很棒的图标。问题在于，该图标不是输入字段，因此它不遵守 Tab 键顺序。

我知道必须有一个解决方法。我为此 HERE 附加了一个 FIDDLE

这是代码

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

JS

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

有什么想法可以给字体很棒的图标“？”标签焦点？

Answer 1

这是一个新的 fiddle

我添加了 tabindex="0"至 <i>并创建了几个事件处理程序来切换 aria 属性。

$(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");
     });
});

虽然这明显可行，但我不确定屏幕阅读器会如何响应。如果您运行一些测试，请告诉我。