Question

我有以下代码：

if (screen.width > 769) {
  $(".searchIcon").on("click", function () {
    $(".searchForm").toggle("slow");
    $(".searchIcon").children().toggleClass("icon-search").toggleClass("icon-close");
    $("#SearchBox").focus();
  });
}

我的标记：

<div class="searchContainer navbar-right hidden-xs hidden-sm">
   <button class="searchIcon" aria-label="Search" type="button">
   <i class="icon-search" aria-hidden="true"></i>
   </button>
</div>
<div class="searchContainer hidden-md hidden-lg">
   <i class="icon-search" aria-hidden="true"></i>
</div>
<div class="navbar-form navbar-right searchForm" style="display: none;">
   <label class="sr-only" for="#SearchBox">Search</label>
   <input id="SearchBox" class="form-control" type="text" placeholder="Search">
</div>

单击该按钮时，.searchForm容器会慢慢切换到视图以显示搜索框。这在桌面和移动设备上运行良好，但在使用屏幕阅读器导航时（使用iPad上的内置辅助功能工具），选择单击按钮无效。我在这里缺少什么？

Answer 1

好像我在这里找到了答案： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

我将我的JS改为：

    if (screen.width > 769) {
        $(".searchIcon").on("click", function(e) {
            e.preventDefault();
            var pressed = e.target.getAttribute("aria-pressed") == "true";
            //change the aria-pressed value as the button is toggled:
            e.target.setAttribute("aria-pressed", pressed ? "false" : "true");
            $(".searchForm").toggle("slow");
            $(".searchIcon").children().toggleClass("icon-search").toggleClass("icon-close");
            $("#SearchBox").focus();
        });
    }

和我的标记：

<div class="searchContainer navbar-right hidden-xs hidden-sm">
   <button class="searchIcon" aria-label="Search" type="button" aria-pressed="false">
   <i class="icon-cmich-search" aria-hidden="true"></i>
   </button>
</div>
<div class="searchContainer hidden-md hidden-lg">
   <i class="icon-cmich-search" aria-hidden="true"></i>
</div>
<div class="navbar-form navbar-right searchForm" style="display: none;">
   <label class="sr-only" for="#SearchBox">Search</label>
   <input id="SearchBox" class="form-control" type="text" placeholder="Search">
</div>

我在过去3个月左右才使用咏叹调，而且这里仍然有一个巨大的学习曲线，但这产生了我期待的结果。现在，搜索框会像桌面/移动设备一样慢慢切换到位。

切换不使用屏幕阅读器

1 个答案: