可访问性javascript:make down-up箭头键模拟TAB键

感谢您的关注，感谢您的反馈

我的（单击右下角的“我”）

按TAB键（或按键代码9）后，它将聚焦第一个链接，以聚焦

内的链接。但我必须先点击TAB键

如何使脚本自动对焦第一个链接而不必按TAB键

脚本也可以反转吗？向上箭头应该“重新自动对焦”输入字段，并让用户继续键入

我们如何使ESC关闭折叠？这样用户就不必重新单击按钮

$（文档）.keydown(
职能（e）
{    
如果（e.keyCode==38）{
e、 preventDefault（）；//这使得向上箭头不会滚动
$（“链接：焦点”）.prev（）.focus（）；
}
如果（e.keyCode==40）{
e、 预防默认值（）；
$（“链接：焦点”）.next（）.focus（）；
}
}
);

带输入搜索和隐藏井的标准引导3折叠：

<a class="demo" data-toggle="collapse" href="#Foo"><i class="fa fa-info"></i></a>
<div class="collapse" id="Foo">
    <form action="" method="post" role="form">
       <input autocomplete="off" autofocus="" class="form-control" id="inputSearch" name="search" placeholder="" type="text">
    </form>
    <!-- this auto populates on search input with database stuff -->
    <div class="hidden" id="Foo2"></div> 
</div>

以下是用户搜索查询后隐藏的well/autopopulate内容：

<div id="Foo2" class="">
    <div tabindex="-1">
        <a class="link" href="#">database result #1</a>
        <a class="link" href="#">database result #2</a>
        <a class="link" href="#">database result #3</a>
        <a class="link" href="#">database result #4</a>
    </div>
</div>

让我们按部分进行：

如何使脚本自动对焦第一个链接而不必按TAB键

您可以使用Bootstrap的collapse.bs.collapse：

脚本也可以反转吗？向上箭头应该“重新自动聚焦”输入字段，并让用户继续键入

是的；修改您的代码时，它将如下所示：

if (e.keyCode == 38) {
        e.preventDefault();
        $("#inputSearch").focus();
      }

$(document).keyup(
    function(e) {
      if (e.keyCode == 38) {
        e.preventDefault(); // this makes it so arrow up doesn't scroll
        $("#inputSearch").focus();

      }
      if (e.keyCode == 40) {
        e.preventDefault();
        $(".link:focus").next().focus();

      }
      if (e.keyCode == 27) {
        e.preventDefault();
        $("#Foo").collapse('hide');

      }
    }
  );

$('#Foo').on('shown.bs.collapse', function () {
  $('#Foo2').children().children('a:first').focus();
  e.preventDefault();
});

我们如何使ESC关闭折叠？这样用户就不必重新单击按钮

是，使用“折叠”（“隐藏”）：

注:

• 使用keyup而不是keydown
• $中缺少一个点（链接：焦点）

最终JQuery代码如下所示：

if (e.keyCode == 38) {
        e.preventDefault();
        $("#inputSearch").focus();
      }

$(document).keyup(
    function(e) {
      if (e.keyCode == 38) {
        e.preventDefault(); // this makes it so arrow up doesn't scroll
        $("#inputSearch").focus();

      }
      if (e.keyCode == 40) {
        e.preventDefault();
        $(".link:focus").next().focus();

      }
      if (e.keyCode == 27) {
        e.preventDefault();
        $("#Foo").collapse('hide');

      }
    }
  );

$('#Foo').on('shown.bs.collapse', function () {
  $('#Foo2').children().children('a:first').focus();
  e.preventDefault();
});

---

<>这是标记<代码>可访问性< /代码>有很多事情要考虑，这不仅会让你的生活更轻松，而且让事情更容易接近。

这个答案很长，所以第4节涵盖了您的大部分观点，其他所有内容都是您可以对可访问性进行的改进

1.HTML语义 1a-按钮使用按钮，锚栓使用锚栓 由于没有JavaScript，“i”按钮无法工作，因此应该使用

而不是锚（

）

1b-确保屏幕阅读器用户可以访问信息 此外，您还需要在

中添加一些“视觉隐藏”文本，因为屏幕阅读器不会向用户显示任何信息（无法访问图标）

1c-确保图标对所有用户可见。 最后，从性能和可访问性的角度来看，使用font awesome是一个坏主意。一些用户（即患有诵读困难症的用户）可能会使用自定义样式表来交换网站上的字体。其中一些样式表会交换所有字体，这包括图标字体（因此，你漂亮的图标就会变成可怕的“矩形”，因为缺少字体）

每个内联SVG只有500字节，而这两种字体的加载时间为185千字节，这将缩短站点加载时间，并将请求数量减少2

数字1的粗略示例

。视觉隐藏{
位置：绝对！重要；
高度：1px；
宽度：1px；
溢出：隐藏；
剪辑：rect（1px 1px 1px）；/*IE6，IE7*/
剪辑：rect（1px，1px，1px，1px）；
空白：nowrap；/*添加了行*/
}
svg{
宽度：40px；
高度：40px；
填充：4px；
}

说明按钮的信息/相关文本

试着一次只问一个问题，巴德，给了你一个可能看起来很吓人的答案，但最后一部分有你问题的信息，其余部分是因为你标记了它

可访问性

，所以我想我会给你一些建议来帮助你。哇！是的，SVG是一个不错的选择。哈哈哈…可怕的矩形。太对了！谢谢你的自动完成文章。我会查出来的。非常感谢你的反馈和花时间分享。我已经整合了你的智慧。没问题，你可能想找到一个比我使用的更好的“i”。还可以运行svg（复制粘贴构成svg的原始文本）优化它们并清除所有你不需要的垃圾。这是一个很好的工具。你可能知道在

a:first

之后“循环”的建议吗？如果我再次按下箭头，它将不会转到第二个链接或第三个链接，等等。只有第一个链接。我尝试了一些方法，但没有效果。它看起来像

。next（）

曾经是诀窍。嗯。如果

，.focus（）部分位于错误的位置，如果发生这种情况，则应将其附加到打开隐藏内容的函数（即“i”按钮上的单击处理程序）再想一想，您可能在我链接的另一个示例中使用了错误的函数，并且设置得太早。您需要在打开框后查找可以聚焦的项目，否则它们将不会被归类为可聚焦（因为它们在
display:none；
$(document).keyup(
    function(e) {
      if (e.keyCode == 38) {
        e.preventDefault(); // this makes it so arrow up doesn't scroll
        $("#inputSearch").focus();

      }
      if (e.keyCode == 40) {
        e.preventDefault();
        $(".link:focus").next().focus();

      }
      if (e.keyCode == 27) {
        e.preventDefault();
        $("#Foo").collapse('hide');

      }
    }
  );

$('#Foo').on('shown.bs.collapse', function () {
  $('#Foo2').children().children('a:first').focus();
  e.preventDefault();
});