Question

我在508合规网站工作，无视用户的可访问性是首要任务。这些用户使用屏幕阅读器（下颚）盲目地浏览网站。从逻辑上讲，它们不能使用鼠标，因此必须通过键盘使用鼠标来访问工具提示。如果将工具提示应用于输入字段，这很容易做到，但我们的可访问性管理器是使用工具提示的字体真棒图标设置的。问题是，图标不是输入字段，因此它不遵循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");
});

任何提供字体真棒图标的想法＆＃34;？＆＃34;标签焦点？

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

虽然这显然有效，但我不确定屏幕阅读器会如何回应。如果您进行一些测试，请告诉我。

Answer 2

在锚标记内包装图标以允许通过选项卡在其上。 Foe anchor tag（定义空href）并添加onclick以执行所需的操作。

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

为Tooltip辅助功能制作一个字体很棒的图标

2 个答案: