- このトピックには10件の返信、2人の参加者があり、最後に
により1年、 2ヶ月前に更新されました。
-
投稿
-
お世話になります。
サイトの改善をしていたところ、PageSpeed Insightsにて「ユーザー補助」のラベルについて指摘がありました。
分かる範囲では「ドロワーメニューボタン」と「アコーディオンブロック」です。JavaScriptでaria-labelを付与したところ、改善され、モバイルにおいてもほぼパーフェクトスコアとなりました。
// .c-hamburger-btn 要素を取得 const hamburgerButtonElements = document.querySelectorAll('.c-hamburger-btn'); // 各ハンバーガーボタンに aria-label 属性を追加 hamburgerButtonElements.forEach(button => { button.setAttribute('aria-label', 'メニューボタン'); }); // .smb-accordion__item__control 要素を取得 const accordionControlElements = document.querySelectorAll('.smb-accordion__item__control'); // 各アコーディオンコントロールに aria-label 属性を追加 accordionControlElements.forEach(control => { control.setAttribute('aria-label', 'アコーディオンメニュー'); });
クライアントに納品する際の安心感と品質の担保として、ボタン要素にラベルの実装していただけたらありがたいです。ご検討よろしくお願いいたします。
いいねをした人:なるほど！ ご提案ありがとうございます！
各ハンバーガーボタンに aria-label 属性を追加
ハンバーガーボタンはデフォルトで
.c-hamburger-btn__labelに「MENU」という文字列があってaria-labelをつけると二重で読まれてしまうのかなと思うので、.c-hamburger-btn__labelにaria-labeledbyをつけるか、.c-hamburger-btn__labelをaria-hidden="true"にした上でaria-labelを追加する必要があるのかなと思いました。各アコーディオンコントロールに aria-label 属性を追加
こちらアコーディオンブロックの HTML を変更する方法で対応しようと思うのですが、ブロックの場合はそのページの編集画面を開いたときにブロックの HTML 構造のアップデートがかかるので、既存のアコーディオンブロックに
aria-labelを追加したい場合はアコーディオンブロックを設置しているページの編集画面を開いて更新していく作業が必要になります。いいねをした人: 居ませんあ、というかハンバーガーボタン自体が
buttonだから、span.c-hamburger-btn__labelをlabel.c-hamburger-btn__labelにしたら良いのかな…？いいねをした人: 居ません申し訳ありません。確かに、menuの文字列は削除してました…！
アイコンのみのハンバーガーメーニューの実装は多いため、button要素自体にラベルがあった方が都合は良いですが、.c-hamburger-btn__labelとの兼ね合いがありますよね…。アコーディオンブロックの更新の件、承知いたしました。ありがとうございます！
いいねをした人: 居ません申し訳ありません。確かに、menuの文字列は削除してました…！
なるほど！ menu はフックとかで消されていると思うので、そのときに aria-label も追加するようにしてもらうのが良いのかなと思いました。
作業してたら、他にもウィジェットのカテゴリー一覧の部分とか、タブブロックの部分でも似たような指摘がでることに気づきましたので、そこもあわせて修正いれます。
いいねをした人:アップデートで確認できました！
他の部分まで実装いただきありがとうございます。// ハンバーガーメニューのmenuを削除 add_filter( 'snow_monkey_get_template_part_args_template-parts/header/hamburger-btn', function( $args ) { $args['vars']['_label'] = ''; return $args; } );文字の削除はこのように処理しているのですが、同時にフックでbuttonに属性追加することってできますでしょうか？
それともJavaScriptが適切ですかね？いいねをした人: 居ませんあ！ コードありがとうございます、そのコードでラベルのオンオフができるようになっていたのをうっかり忘れていました。これがあるならオフにしたときは自動的に
aria-labelが追加されるようにしたほうが良いですよね。ちょっとまた変更入れてみます！いいねをした人: 居ません
- トピック「ボタン要素にaria-labelの追加を希望」には新しい返信をつけることはできません。