切換不與屏幕閱讀

工作，我有以下代碼：切換不與屏幕閱讀

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上的內置輔助功能工具），選擇按鈕以單擊它不起作用。我在這裏錯過了什麼？

來源

2015-12-04 JesseEarley

寬度通常具有像素，百分比等，而不僅僅是整數。我可能會在屏幕出現問題時出錯，但是您能否確認'screen.width'返回一個數字而不是一個字符串？ –

screen.width返回像素，這不是我的問題。 – JesseEarley

它好像我發現我的答案在這裏： 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個月左右才使用aria，這裏對我來說仍然有一個巨大的學習曲線，但是這產生了我期待的結果。搜索框現在緩慢切換到與桌面/移動設備一樣的位置。

來源

2015-12-04 19:21:47 JesseEarley

切換不與屏幕閱讀

回答

相關問題