フロントエンドカンファレンス2023 沖縄での登壇資料 https://frontend-conf.okinawa.jp/
アクセシビリティを理解するとフロントエンドのテストが楽になる！フロントエンドカンファレンス2023 沖縄2023/11/18@nano72mkn
View Slide
自己紹介フロントエンドエンジニアスターフェスティバル株式会社しょうた（なつみかん）@nano72mkn11/11生まれ 28歳になりました！ポメラニアンを飼っていますゲーム好きです（Apexなど（https://gochikuru.com/）初登壇で緊張してます
アジェンダ03. WAI-ARIAで意味を伝える05. テストでアクセシビリティを意識してみる06. おわりに01. アクセシビリティってなに？02. Webアクセシビリティと支援技術
01アクセシビリティってなに？
access01. アクセシビリティってなに？英語で書くと+ abilityaccessibility ＝利用 できること
01. アクセシビリティってなに？アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような環境（うるさい場所や、暗い場所、逆に明るい場所など）においても柔軟にWebサイトを利用できるように構築することを考慮する場合に使われる。weblioから引用
アクセシビリティとは誰が何処でとか関係なく全ての人が利用できることを指している
02Webアクセシビリティと支援技術
WebアクセシビリティWebアクセシビリティのガイドラインがあります。W3Cが発行している、WCAG（Web Content Accessibility Guideline）
WCAGについてWeb Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツをよりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガイドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、認知障害、運動制限、発話困難、光感受性発作及びこれらの組合せ等を含んだ、様々な障害のある人に対して、コンテンツをアクセシブルにすることができる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとってウェブコンテンツがより使いやすくなる。WCAGから引用
WCAGには３段階のレベルが設定されている
レベルAこの基準を満たしていなければ支援技術を使ってもアクセスできない場合がある最低限の基準ユーザーが支援技術なしでもアクセスできるようになる望ましい基準レベルAAこの基準を満たすとよりアクセスしやすくなることがある最高基準レベルAAAWCAGが設定している３つのレベル
レベルAのガイドラインの一部紹介1.1.1 非テキストコンテンツ画像にはAlt属性を追加2.1.1 キーボードマウスで操作できるものはキーボードでも操作できる2.4.2 ページタイトルtitleタグをつけて、利用者が現在位置を把握できる2.4.4 リンクの目的 (コンテキスト内)aタグ内のテキストはリンクの目的をしっかり書きましょう
対応してどうなるのか
視覚に頼らずにリンクを認識する時完全に目が見えない状態視野が狭い視力が著しく低下している
支援技術を使うことがある今回はスクリーンリーダーVoiceOver（macOS）VoiceOver（iOS）PC-TalkerNVDAナレーターJAWSTalkBackなどなど...
スクリーンリーダーで読み上げてみる VoiceOver（MacOS）ターゲットはこのリンク...参加申し込み...コード（styleなどは省略）
スクリーンリーダーで読み上げてみる VoiceOver（MacOS）フォーカスを当てると「リンク、参加申し込み」と読み上げられる
なるほどねー参加申し込みって書いてあるリンクがあるのか！スクリーンリーダーで読み上げてみる視覚に頼らずリンクを認識できるVoiceOver（MacOS）
1.1.1 非テキストコンテンツ画像にはAlt属性を追加2.1.1 キーボードマウスで操作できるものはキーボードでも操作できる2.4.2 ページタイトルtitleタグをつけて、利用者が現在位置を把握できる2.4.4 リンクの目的 (コンテキスト内)aタグ内のテキストはリンクの目的をしっかり書きましょうレベルAの一部紹介
もし、目的をしっかり書いていなかったら資料請求はこちらフォーカスを当てると「リンク、こちら」と読み上げられる
これが、Webアクセシビリティ
03WAI-ARIAで意味を伝える
WAI-ARIAとはW3C によって定められた仕様HTMLなどでセマンティクス（意味）を補強するための技術
WAI-ARIAの３つの機能ロール (Role)プロパティ (Property)ステート (State)
ロールについて ～AirbnbのカレンダーUIの場合～Airbnbのカレンダーで見ていきます
tdタグやdivタグなどを駆使してUIを作っていますもちろん、jsで制御しているのでクリックしたときに選択することは可能ですロールについて ～AirbnbのカレンダーUIの場合～
しかし、tdタグやdivタグのままではスクリーンリーダーなどの支援技術では認識できませんロールについて ～AirbnbのカレンダーUIの場合～
ここでWAI-ARIAのロールを使用
role=”button”ロールについて ～AirbnbのカレンダーUIの場合～tdタグで指定されているRole属性がWAI-ARIAのロールと呼ばれるものです今回はbuttonと指定されているので、支援技術ではボタンとして認識してくれます。ロール
しっかりと「ボタン」として認識されていますロールについて ～AirbnbのカレンダーUIの場合～Invalid dateは無視してー！多分、日付出そうとしてると思う！
これが、WAI-ARIAのロール
04テストでアクセシビリティを意識してみる
divボタンのテストを書いてみるボタン例えば、GitHub上でもよく見るこのボタンをサンプルにテストを書いてみます
ボタンをテストするぞ！となった時、このボタンを取得するための要素は下記の２ヶ所になると思いますボタンdivボタンのテストを書いてみるボタンクラスのbutton ラベルの役割をしているボタン
を使ってボタン要素を取得する場合divボタンのテストを書いてみるclass=”button”document.querySelector(‘.button’) document.querySelectorAll(‘.button’)や要素を特定するために、を使用することになります。ただ、どちらも class=”button” がついた要素が増えるたびに取得できる要素や順番が変わるため、テストが壊れ修正することになります。button-outlineとかボタンの種類が増えた時も壊れる！
を使ってボタン要素を取得する場合divボタンのテストを書いてみるボタンscreen.getByText(‘ボタン’) で取れますが、‘ボタン’と書かれたものならなんでもヒットしてしまいます。その為、「ボタンを押してください」などのテキストを追加するとテストが壊れてしまいます。
では、どうするか
支援技術が読み取ってた情報使えばいいのでは？スクリーンリーダー
divボタンのテストを書いてみるボタン本来、この要素はボタンとして認識してもらいたいそれなら、ロールを付与するだけ
WAI-ARIAのロールを使った場合divボタンのテストを書いてみるscreen.getByRole(‘button‘, {name: ’ボタン’}) で取れるようになり全く同じ要素が現れない限りは、テストが壊れてしまうこともありません。
残念ながら、divで作成されたボタンにはtabでフォーカスする対応も、EnterやSpaceキーで発火する対応もしなくては、アクセシビリティ的にアウトアクセシビリティ的にアウトボタン
buttonタグに差し替えてもOK！ボタンボタンそんなに頑張る必要があるなら全て対応済みなbuttonタグを使った方が楽なので差し替えてみますとっても便利！
buttonタグに差し替えてもOK！差し替えてもbuttonタグにはあらかじめ role=”button” が付与されているのでテストはそのままでも通ります
0５おわりに
おわりにアクセシビリティはみんなの為のものWebアクセシビリティ対応は難しそうに思えるけど、WCAGのレベルAの中にはHTMLの基礎レベルの対応でクリアできるものがあるWebアクセシビリティの対応をしていくと、壊れにくいテストも書けてお得ロールは種類が沢山あるので、button以外も使ってみてね
ThankYou!
参照https://developer.mozilla.org/ja/docs/Learn/Accessibility/What_is_accessibilityhttps://waic.jp/translations/UNDERSTANDING-WCAG20/conformance.html#uc-conformance-requirements-headhttps://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdfhttps://developer.mozilla.org/ja/docs/Learn/Accessibility/WAI-ARIA_basics#wai-aria_%E3%81%AE%E5%B0%8E%E5%85%A5
nano72mkn
fbei_ot
chimame
qnighy
ivargrimstad
trapezoid
smt7174
misatokii
yuhei_fujita
kasacchiful
ffjlabo
nrslib
zakky21
panda_program
smashingmag
philhawksworth
mojombo
erikaheidi
addyosmani
eileencodes
brad_frost
jasonvnalue
chrislema
geoffreycrofte