アバウト

あなたのウェブサイトにハンバーガーメニューはありますか?たぶんそうでしょう.そして、なぜあなたは?それはモバイル上で忙しいウェブサイトを乱雑に役立ちます.
しかし、問題があります.あなたが実際に時間と努力をそうしないならば、それはアクセスできません.
良いニュースは、これが修正されることです.見てみましょう.

状況

まず、ハンバーガーのメニューはこのように見えます.

HTMLでは、メニューボタンは次のようになります.

<button onclick="toggleMenuVisibility()">Menu</button>

どのように実装toggleMenuVisibility() あなた次第ですが、我々はいくつかの時点で更新されます.

問題

問題は、あなたがそのように指定しない限り、これがメニューを広げるボタンであるかどうか、スクリーンリーダーが知る方法が全くないということです.
スクリーンリーダーは次のようにボタンを読みます.

Menu, button

これは盲目のユーザが、これがメニューと呼ばれるボタンであることを知っているだけであることを意味しています.
これはアリア属性が入っているところです.

解決策

メニューボタンには2つの属性が必要です.

aria-haspopup ボタンを表示するか、またはメニューを表示するには

aria-expanded 私たちのメニューの状態を表すために、拡大または崩壊

まず、追加しましょうaria-haspopup ボタンに

<button onclick="toggleMenuVisibility()" aria-haspopup="true">Menu</button>

次に追加しますaria-expanded . デフォルトはfalse 当初はメニューが隠されている.

<button onclick="toggleMenuVisibility()" aria-haspopup="true" aria-expanded="false">Menu</button>

これらの2つの属性を追加した後、次のようにしてメニューボタンを読み取ります

Menu, menu pop-up, collapsed, button

これは今、このボタンをクリックすると何かを展開するリーダーのユーザーに明確な指示を与えます.より多くの有益!
最後に、我々のステータスを更新する必要がありますaria-expanded たびにユーザーがハンバーガーメニューボタンをタップするように設定されてtrue メニューが開いていてfalse メニューが閉じられたとき.これのために、我々は我々を更新する必要がありますtoggleMenuVisibility() 属性を設定する関数

var menuElement = document.querySelector("#menu")
+ var menuButtonElement = document.querySelector("#menu-button")

function toggleMenuVisibility(){
  var currentStatus = menuElement.getAttribute("status")

  if(currentStatus === "visible"){
    menuElement.setAttribute("status", "hidden")
+    menuButtonElement.setAttribute("aria-expanded", "false")
  }
  else{
    menuElement.setAttribute("status", "visible")
+    menuButtonElement.setAttribute("aria-expanded", "true")
  }
}

あなたが現在スクリーンリーダーであなたのページを開いて、メニューを開くためにメニューボタンを軽くたたくならば、スクリーン読者は以下の線に沿って何かを言います

Menu, menu pop-up, expanded, button

メニューボタンをもう一度タップすると、もう一度読みます.

Menu, menu pop-up, collapsed, button

パーフェクト!正確に我々はすべてのユーザーが通知を維持すると言うには、画面のリーダーが必要です.
そして、あなたはセットされるべきです!ハンバーガーメニューをすぐにアクセスする必要があります!

更なる考察

1 .ハンバーガーアイコンの代替ラベリングを提供する

あなたがFontaWarm、ブートストラップや画像からハンバーガーのアイコンを使用している場合は、使用を確認してくださいaria-label and aria-hidden スクリーンリーダの代替ラベルを提供する属性

<a href="#" aria-label="Collapse or expand the menu">
  <i class="fas fa-bars" aria-hidden="true"></i>
</a>

2 .メニューを拡張した後にフォーカスを確認してください

キーボードと画面リーダーのユーザーは、メニューボタンをタップした後すぐにメニューにアクセスしたい.あなたのメニューがそれを拡大した直後に焦点があることを確認してください.

それはあまりにも多くの仕事だ！ポイントは？

私は、私が前に終わったのと同じようにこの記事を終えるつもりです.あなたは人間としての義務を第一に、そして開発者として、あなたの仕事、さらにあなたの個人的なポートフォリオに含まれている.を含む.人間であれ.

あなたは？

あなたのメニューをよりアクセスできるようにステップを取るか?どのような彼らはどのような困難に直面している?コメントで知らせてください!