Upgrade to Pro — share decks privately, control downloads, hide ads and more …

アクセシビリティを理解するとフロントエンドのテストが楽になる!

Shota
November 17, 2023

 アクセシビリティを理解するとフロントエンドのテストが楽になる!

フロントエンドカンファレンス2023 沖縄での登壇資料
https://frontend-conf.okinawa.jp/

Shota

November 17, 2023
Tweet

More Decks by Shota

Other Decks in Programming

Transcript

  1. アクセシビリティを理解すると
    フロントエンドのテストが楽になる!
    フロントエンドカンファレンス2023 沖縄
    2023/11/18
    @nano72mkn

    View full-size slide

  2. 自己紹介
    フロントエンドエンジニア
    スターフェスティバル株式会社
    しょうた(なつみかん)
    @nano72mkn
    11/11生まれ 28歳になりました!
    ポメラニアンを飼っています
    ゲーム好きです(Apexなど
    (https://gochikuru.com/)
    初登壇で
    緊張してます

    View full-size slide

  3. アジェンダ
    03. WAI-ARIAで意味を伝える
    05. テストでアクセシビリティを意識してみる
    06. おわりに
    01. アクセシビリティってなに?
    02. Webアクセシビリティと支援技術

    View full-size slide

  4. 01
    アクセシビリティってなに?

    View full-size slide

  5. access
    01. アクセシビリティってなに?
    英語で書くと
    + ability
    accessibility =
    利用 できること

    View full-size slide

  6. 01. アクセシビリティってなに?
    アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような
    環境(うるさい場所や、暗い場所、逆に明るい場所など)においても柔軟に
    Webサイトを利用できるように構築することを考慮する場合に使われる。
    weblioから引用

    View full-size slide

  7. アクセシビリティとは
    誰が何処でとか関係なく
    全ての人が利用できることを指している

    View full-size slide

  8. 02
    Webアクセシビリティと支援技術

    View full-size slide

  9. Webアクセシビリティ
    Webアクセシビリティのガイドラインがあります。
    W3Cが発行している、
    WCAG(Web Content Accessibility Guideline)

    View full-size slide

  10. WCAGについて
    Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツを
    よりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガ
    イドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、
    認知障害、運動制限、発話困難、光感受性発作及びこれらの組合せ等を含ん
    だ、様々な障害のある人に対して、コンテンツをアクセシブルにすることがで
    きる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとっ
    てウェブコンテンツがより使いやすくなる。
    WCAGから引用

    View full-size slide

  11. WCAGには
    3段階のレベルが設定されている

    View full-size slide

  12. レベル
    A
    この基準を満たしていなければ
    支援技術を使っても
    アクセスできない場合がある
    最低限の基準
    ユーザーが支援技術なしでも
    アクセスできるようになる
    望ましい基準
    レベル
    AA
    この基準を満たすと
    よりアクセスしやすくなる
    ことがある
    最高基準
    レベル
    AAA
    WCAGが設定している3つのレベル

    View full-size slide

  13. レベル
    A
    この基準を満たしていなければ
    支援技術を使っても
    アクセスできない場合がある
    最低限の基準
    ユーザーが支援技術なしでも
    アクセスできるようになる
    望ましい基準
    レベル
    AA
    この基準を満たすとより
    アクセスしやすくなることが
    ある
    最高基準
    レベル
    AAA
    WCAGが設定している3つのレベル

    View full-size slide

  14. レベルAのガイドラインの一部紹介
    1.1.1 非テキストコンテンツ
    画像にはAlt属性を追加
    2.1.1 キーボード
    マウスで操作できるものはキーボードでも操作できる
    2.4.2 ページタイトル
    titleタグをつけて、利用者が現在位置を把握できる
    2.4.4 リンクの目的 (コンテキスト内)
    aタグ内のテキストはリンクの目的をしっかり書きましょう

    View full-size slide

  15. 対応してどうなるのか

    View full-size slide

  16. 視覚に頼らずにリンクを認識する時
    完全に目が見えない状態
    視野が狭い
    視力が著しく低下している

    View full-size slide

  17. 支援技術を使うことがある
    今回はスクリーンリーダー
    VoiceOver(macOS)
    VoiceOver(iOS)
    PC-Talker
    NVDA
    ナレーター
    JAWS
    TalkBack
    などなど...

    View full-size slide

  18. スクリーンリーダーで読み上げてみる VoiceOver(MacOS)
    ターゲットは
    このリンク

    ...
    参加申し込み
    ...

    コード(styleなどは省略)

    View full-size slide

  19. スクリーンリーダーで読み上げてみる VoiceOver(MacOS)
    フォーカスを当てると
    「リンク、参加申し込み」
    と読み上げられる

    View full-size slide

  20. なるほどねー
    参加申し込みって書いてある
    リンクがあるのか!
    スクリーンリーダーで読み上げてみる
    視覚に頼らずリンクを認識できる
    VoiceOver(MacOS)

    View full-size slide

  21. 1.1.1 非テキストコンテンツ
    画像にはAlt属性を追加
    2.1.1 キーボード
    マウスで操作できるものはキーボードでも操作できる
    2.4.2 ページタイトル
    titleタグをつけて、利用者が現在位置を把握できる
    2.4.4 リンクの目的 (コンテキスト内)
    aタグ内のテキストはリンクの目的をしっかり書きましょう
    レベルAの一部紹介

    View full-size slide

  22. もし、目的をしっかり書いていなかったら
    資料請求はこちら
    フォーカスを当てると「リンク、こちら」と読み上げられる

    View full-size slide

  23. これが、
    Webアクセシビリティ

    View full-size slide

  24. 03
    WAI-ARIAで意味を伝える

    View full-size slide

  25. WAI-ARIAとは
    W3C によって定められた仕様
    HTMLなどでセマンティクス(意味)を補強するための技術

    View full-size slide

  26. WAI-ARIAの3つの機能
    ロール (Role)
    プロパティ (Property)
    ステート (State)

    View full-size slide

  27. WAI-ARIAの3つの機能
    ロール (Role)
    プロパティ (Property)
    ステート (State)

    View full-size slide

  28. ロールについて ~AirbnbのカレンダーUIの場合~
    Airbnbのカレンダーで見ていきます

    View full-size slide

  29. tdタグやdivタグなどを
    駆使してUIを作っています
    もちろん、jsで制御しているのでク
    リックしたときに選択することは可
    能です
    ロールについて ~AirbnbのカレンダーUIの場合~

    View full-size slide

  30. しかし、
    tdタグやdivタグのままでは
    スクリーンリーダーなどの
    支援技術では認識できません
    ロールについて ~AirbnbのカレンダーUIの場合~

    View full-size slide

  31. ここで
    WAI-ARIAのロールを使用

    View full-size slide

  32. role=”button”
    ロールについて ~AirbnbのカレンダーUIの場合~
    tdタグで指定されているRole属性が
    WAI-ARIAのロールと呼ばれるもの
    です
    今回はbuttonと指定されているので、
    支援技術ではボタンとして認識してくれ
    ます。
    ロール

    View full-size slide

  33. しっかりと「ボタン」として
    認識されています
    ロールについて ~AirbnbのカレンダーUIの場合~
    Invalid dateは無視してー!
    多分、日付出そうとしてると思う!

    View full-size slide

  34. これが、
    WAI-ARIAのロール

    View full-size slide

  35. 04
    テストでアクセシビリティを意識してみる

    View full-size slide

  36. divボタンのテストを書いてみる
    ボタン
    例えば、GitHub上でもよく見るこのボタンを
    サンプルにテストを書いてみます

    View full-size slide

  37. ボタンをテストするぞ!となった時、
    このボタンを取得するための要素は下記の2ヶ所になると思います
    ボタン
    divボタンのテストを書いてみる
    ボタン
    クラスのbutton ラベルの役割をしているボタン

    View full-size slide

  38. を使ってボタン要素を取得する場合
    divボタンのテストを書いてみる
    class=”button”
    document.querySelector(‘.button’) document.querySelectorAll(‘.button’)

    要素を特定するために、
    を使用することになります。
    ただ、どちらも class=”button” がついた要素が増えるたびに
    取得できる要素や順番が変わるため、テストが壊れ修正することになります。
    button-outlineとか
    ボタンの種類が増えた時も
    壊れる!

    View full-size slide

  39. を使ってボタン要素を取得する場合
    divボタンのテストを書いてみる
    ボタン
    screen.getByText(‘ボタン’) で取れますが、
    ‘ボタン’と書かれたものならなんでもヒットしてしまいます。
    その為、「ボタンを押してください」などのテキストを追加すると
    テストが壊れてしまいます。

    View full-size slide

  40. では、どうするか

    View full-size slide

  41. 支援技術が読み取ってた
    情報使えばいいのでは?
    スクリーンリーダー

    View full-size slide

  42. divボタンのテストを書いてみる
    ボタン
    本来、この要素はボタンとして認識してもらいたい
    それなら、ロールを付与するだけ

    View full-size slide

  43. WAI-ARIAのロールを使った場合
    divボタンのテストを書いてみる
    screen.getByRole(‘button‘, {name: ’ボタン’}) で取れるようになり
    全く同じ要素が現れない限りは、テストが壊れてしまうこともありません。

    View full-size slide

  44. 残念ながら、divで作成されたボタンにはtabでフォーカスする対応も、
    EnterやSpaceキーで発火する対応もしなくては、アクセシビリティ的にアウト
    アクセシビリティ的にアウト
    ボタン

    View full-size slide

  45. レベルAのガイドラインの一部紹介
    1.1.1 非テキストコンテンツ
    画像にはAlt属性を追加
    2.1.1 キーボード
    マウスで操作できるものはキーボードでも操作できる
    2.4.2 ページタイトル
    titleタグをつけて、利用者が現在位置を把握できる
    2.4.4 リンクの目的 (コンテキスト内)
    aタグ内のテキストはリンクの目的をしっかり書きましょう

    View full-size slide

  46. buttonタグに差し替えてもOK!
    ボタン
    ボタン
    そんなに頑張る必要があるなら
    全て対応済みなbuttonタグを使った方が楽なので差し替えてみます
    とっても
    便


    View full-size slide

  47. buttonタグに差し替えてもOK!
    差し替えてもbuttonタグにはあらかじめ role=”button” が付与されているので
    テストはそのままでも通ります

    View full-size slide

  48. 05
    おわりに

    View full-size slide

  49. おわりに
    アクセシビリティはみんなの為のもの
    Webアクセシビリティ対応は難しそうに思えるけど、WCAGのレベ
    ルAの中にはHTMLの基礎レベルの対応でクリアできるものがある
    Webアクセシビリティの対応をしていくと、壊れにくいテストも書け
    てお得
    ロールは種類が沢山あるので、button以外も使ってみてね

    View full-size slide

  50. 参照
    https://developer.mozilla.org/ja/docs/Learn/Accessibility/What_is_accessibility
    https://waic.jp/translations/UNDERSTANDING-WCAG20/conformance.html#uc-
    conformance-requirements-head
    https://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdf
    https://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics#wai-
    aria_%E3%81%AE%E5%B0%8E%E5%85%A5

    View full-size slide