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

by Shota

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

01 アクセシビリティってなに？

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

対応してどうなるのか

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

参加申し込み

... コード（styleなどは省略）

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

03 WAI-ARIAで意味を伝える

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

これが、 WAI-ARIAのロール

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

divボタンのテストを書いてみる

ボタン

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

Slide 37

Slide 37 text

ボタンをテストするぞ！となった時、このボタンを取得するための要素は下記の２ヶ所になると思います

ボタン

divボタンのテストを書いてみる

ボタン

クラスのbutton ラベルの役割をしているボタン

Slide 38

Slide 38 text

を使ってボタン要素を取得する場合 divボタンのテストを書いてみる class=”button” document.querySelector(‘.button’) document.querySelectorAll(‘.button’) や要素を特定するために、を使用することになります。ただ、どちらも class=”button” がついた要素が増えるたびに取得できる要素や順番が変わるため、テストが壊れ修正することになります。 button-outlineとかボタンの種類が増えた時も壊れる！

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

では、どうするか

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

divボタンのテストを書いてみる

ボタン

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

ボタン

Slide 45

Slide 45 text

Slide 46

Slide 46 text

buttonタグに差し替えてもOK！

ボタン

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

0５おわりに

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Thank You!

Slide 51

Slide 51 text

参照 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