問題タブ [web-accessibility]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - 同じ ID を持つデスクトップとモバイルのナビゲーションに ADA の問題がありますか?
私はサイトを調べて、完全に ADA に準拠させることを任されています。私が困惑している現在の問題は、重複した ID の問題を修正する方法です。
ここを読む: https://dequeuniversity.com/rules/axe/2.2/duplicate-id?application=lighthouse
ID の重複は ADA の問題であると述べています。
このサイトに重複する ID があるのは、2 つの主要なナビゲーションがあるためです。1 つはデスクトップ用、もう 1 つはモバイル用です。特定のビューポートで、モバイル メニューは CSS スタイルを display: none; から切り替えます。表示する: ブロック; デスクトップメニューの場合はその逆です。
私はここで読みました: https://www.html5accessibility.com/tests/hidden2013.html
その表示：なし。は、スクリーン リーダーからコンテンツを非表示にするためにサポートされている方法です。だから私が疑問に思っているのは、重複した ID の問題が問題ではないかどうか、そしてモバイルとデスクトップのメニューが同時に表示されることはないので、問題ではないということです。
これらの ID は、フォームやテーブル ヘッダー セルなどのラベルにも関連付けられていません。それとも、これはまだ ADA に準拠していないものですか? もしそうなら、デスクトップとモバイルのメニューを 1 つに結合したり、両方に一意の ID を与えたりせずに ADA に準拠させるには、どのような手順を踏むことができますか?
javascript - menu および menuitem ロールのデフォルトの JAWS 読み取りをカスタマイズされたものに変更するにはどうすればよいですか?
menu および menuitem としてロールを追加して、div タグを使用して水平メニュー項目を作成しています。
私が作成している上記のコードのように。これを水平ナビゲーションとしてスタイリングし、イベントをバインドしてこれを行います(左矢印と右矢印)
しかし、あごが読むとき、その読書のように、上と矢印ボタンを使用してナビゲートします。どうすればこれを変更できますか? 私の場合、左右の矢印ボタンを使用してナビゲートするように読む必要があります。
以下はプランカーですhttps://plnkr.co/edit/rVOGMFHoWFt7F3Aicipz?p=preview