ボタン要素にaria-labelの追加を希望

0
いいねをした人: 居ません
  • このトピックには10件の返信、2人の参加者があり、最後にhisanobuにより1年、 1ヶ月前に更新されました。
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #130581
    hisanobu
    参加者
    30

    お世話になります。

    サイトの改善をしていたところ、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', 'アコーディオンメニュー');
    });

     

     

    クライアントに納品する際の安心感と品質の担保として、ボタン要素にラベルの実装していただけたらありがたいです。ご検討よろしくお願いいたします。

    1
    いいねをした人:
    #130613
    アバター画像キタジマ タカシ
    参加者
    2371

    なるほど! ご提案ありがとうございます!

    各ハンバーガーボタンに aria-label 属性を追加

    ハンバーガーボタンはデフォルトで .c-hamburger-btn__label に「MENU」という文字列があって aria-label をつけると二重で読まれてしまうのかなと思うので、.c-hamburger-btn__labelaria-labeledby をつけるか、.c-hamburger-btn__labelaria-hidden="true" にした上で aria-label を追加する必要があるのかなと思いました。

    各アコーディオンコントロールに aria-label 属性を追加

    こちらアコーディオンブロックの HTML を変更する方法で対応しようと思うのですが、ブロックの場合はそのページの編集画面を開いたときにブロックの HTML 構造のアップデートがかかるので、既存のアコーディオンブロックに aria-label を追加したい場合はアコーディオンブロックを設置しているページの編集画面を開いて更新していく作業が必要になります。

    0
    いいねをした人: 居ません
    #130614
    アバター画像キタジマ タカシ
    参加者
    2371

    あ、というかハンバーガーボタン自体が button だから、span.c-hamburger-btn__labellabel.c-hamburger-btn__label にしたら良いのかな…?

    0
    いいねをした人: 居ません
    #130620
    アバター画像キタジマ タカシ
    参加者
    2371

    すみません、こちらの環境だとハンバーガーメニューにはエラーがでていないっぽいのですが、「MENU」の文字列を消されたりしていますかね…?

    0
    いいねをした人: 居ません
    #130623
    hisanobu
    参加者
    30

    申し訳ありません。確かに、menuの文字列は削除してました…!
    アイコンのみのハンバーガーメーニューの実装は多いため、button要素自体にラベルがあった方が都合は良いですが、.c-hamburger-btn__labelとの兼ね合いがありますよね…。

    アコーディオンブロックの更新の件、承知いたしました。ありがとうございます!

    0
    いいねをした人: 居ません
    #130626
    アバター画像キタジマ タカシ
    参加者
    2371

    申し訳ありません。確かに、menuの文字列は削除してました…!

    なるほど! menu はフックとかで消されていると思うので、そのときに aria-label も追加するようにしてもらうのが良いのかなと思いました。

    作業してたら、他にもウィジェットのカテゴリー一覧の部分とか、タブブロックの部分でも似たような指摘がでることに気づきましたので、そこもあわせて修正いれます。

    2
    いいねをした人:
    #130679
    アバター画像キタジマ タカシ
    参加者
    2371

    Snow Monkey Blocks v20.2.1 で変更を入れました。アップデートして確認してみてください!

    0
    いいねをした人: 居ません
    #130687
    hisanobu
    参加者
    30

    アップデートで確認できました!
    他の部分まで実装いただきありがとうございます。

    // ハンバーガーメニューのmenuを削除
    add_filter(
      'snow_monkey_get_template_part_args_template-parts/header/hamburger-btn',
      function( $args ) {
        $args['vars']['_label'] = '';
        return $args;
      }
    );

    文字の削除はこのように処理しているのですが、同時にフックでbuttonに属性追加することってできますでしょうか?
    それともJavaScriptが適切ですかね?

    0
    いいねをした人: 居ません
    #130688
    アバター画像キタジマ タカシ
    参加者
    2371

    あ! コードありがとうございます、そのコードでラベルのオンオフができるようになっていたのをうっかり忘れていました。これがあるならオフにしたときは自動的に aria-label が追加されるようにしたほうが良いですよね。ちょっとまた変更入れてみます!

    0
    いいねをした人: 居ません
    #130710
    アバター画像キタジマ タカシ
    参加者
    2371

    v25.1.4 で変更を入れてみました。アップデートしていただければ自動的に aria-label が追加されます。aria-label に使用する文字列を変更したい場合は下記の記事のサンプルコードを確認してみてください。

    1
    いいねをした人:
    #130784
    hisanobu
    参加者
    30

    おお、マジですか!
    コード見てなるほどと感心してしまいました。
    細かい点まで実装ありがとうございました。

    ではトピック閉じさせていただきます。

    1
    いいねをした人:
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • トピック「ボタン要素にaria-labelの追加を希望」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。