Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アクセシビリティを理解するとフロントエンドのテストが楽になる!
Search
Shota
November 17, 2023
Programming
1
3.8k
アクセシビリティを理解するとフロントエンドのテストが楽になる!
フロントエンドカンファレンス2023 沖縄での登壇資料
https://frontend-conf.okinawa.jp/
Shota
November 17, 2023
Tweet
Share
More Decks by Shota
See All by Shota
フロントエンドのテストからアクセシビリティをしれっと広めていく
nano72mkn
3
860
OpenAI APIを触ってみた
nano72mkn
0
1.2k
年末年始にFlutter入門
nano72mkn
0
220
Other Decks in Programming
See All in Programming
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
200
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
1.1k
歴史と現在から考えるスケーラブルなソフトウェア開発のプラクティス
i10416
0
240
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
180
Beyond ORM
77web
11
1.5k
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
490
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
360
情報漏洩させないための設計
kubotak
5
1.2k
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
890
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
5.8k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
970
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
170
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Bash Introduction
62gerente
609
210k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
550
Code Reviewing Like a Champion
maltzj
521
39k
Gamification - CAS2011
davidbonilla
80
5.1k
The Invisible Side of Design
smashingmag
299
50k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
230
Producing Creativity
orderedlist
PRO
343
39k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Transcript
アクセシビリティを理解すると フロントエンドのテストが楽になる! フロントエンドカンファレンス2023 沖縄 2023/11/18 @nano72mkn
自己紹介 フロントエンドエンジニア スターフェスティバル株式会社 しょうた(なつみかん) @nano72mkn 11/11生まれ 28歳になりました! ポメラニアンを飼っています ゲーム好きです(Apexなど (https://gochikuru.com/)
初登壇で 緊張してます
アジェンダ 03. WAI-ARIAで意味を伝える 05. テストでアクセシビリティを意識してみる 06. おわりに 01. アクセシビリティってなに? 02.
Webアクセシビリティと支援技術
01 アクセシビリティってなに?
access 01. アクセシビリティってなに? 英語で書くと + ability accessibility = 利用 できること
01. アクセシビリティってなに? アクセシビリティは、高齢者や障害者なども含めたあらゆる人が、どのような 環境(うるさい場所や、暗い場所、逆に明るい場所など)においても柔軟に Webサイトを利用できるように構築することを考慮する場合に使われる。 weblioから引用
アクセシビリティとは 誰が何処でとか関係なく 全ての人が利用できることを指している
02 Webアクセシビリティと支援技術
Webアクセシビリティ Webアクセシビリティのガイドラインがあります。 W3Cが発行している、 WCAG(Web Content Accessibility Guideline)
WCAGについて Web Content Accessibility Guidelines (WCAG) 2.0 は、ウェブコンテンツを よりアクセシブルにするための広範囲に及ぶ推奨事項を網羅している。 このガ
イドラインに従うことで、全盲又はロービジョン、ろう又は難聴、学習障害、 認知障害、運動制限、発話困難、光感受性発作及びこれらの組合せ等を含ん だ、様々な障害のある人に対して、コンテンツをアクセシブルにすることがで きる。又、このガイドラインに従うと、多くの場合、ほとんどの利用者にとっ てウェブコンテンツがより使いやすくなる。 WCAGから引用
WCAGには 3段階のレベルが設定されている
レベル A この基準を満たしていなければ 支援技術を使っても アクセスできない場合がある 最低限の基準 ユーザーが支援技術なしでも アクセスできるようになる 望ましい基準 レベル
AA この基準を満たすと よりアクセスしやすくなる ことがある 最高基準 レベル AAA WCAGが設定している3つのレベル
レベル A この基準を満たしていなければ 支援技術を使っても アクセスできない場合がある 最低限の基準 ユーザーが支援技術なしでも アクセスできるようになる 望ましい基準 レベル
AA この基準を満たすとより アクセスしやすくなることが ある 最高基準 レベル AAA WCAGが設定している3つのレベル
レベルAのガイドラインの一部紹介 1.1.1 非テキストコンテンツ 画像にはAlt属性を追加 2.1.1 キーボード マウスで操作できるものはキーボードでも操作できる 2.4.2 ページタイトル titleタグをつけて、利用者が現在位置を把握できる
2.4.4 リンクの目的 (コンテキスト内) aタグ内のテキストはリンクの目的をしっかり書きましょう
対応してどうなるのか
視覚に頼らずにリンクを認識する時 完全に目が見えない状態 視野が狭い 視力が著しく低下している
支援技術を使うことがある 今回はスクリーンリーダー VoiceOver(macOS) VoiceOver(iOS) PC-Talker NVDA ナレーター JAWS TalkBack などなど...
スクリーンリーダーで読み上げてみる VoiceOver(MacOS) ターゲットは このリンク <a href="https://〜" ...> ... <p>参加申し込み</p> ...
</a> コード(styleなどは省略)
スクリーンリーダーで読み上げてみる VoiceOver(MacOS) フォーカスを当てると 「リンク、参加申し込み」 と読み上げられる
なるほどねー 参加申し込みって書いてある リンクがあるのか! スクリーンリーダーで読み上げてみる 視覚に頼らずリンクを認識できる VoiceOver(MacOS)
1.1.1 非テキストコンテンツ 画像にはAlt属性を追加 2.1.1 キーボード マウスで操作できるものはキーボードでも操作できる 2.4.2 ページタイトル titleタグをつけて、利用者が現在位置を把握できる 2.4.4
リンクの目的 (コンテキスト内) aタグ内のテキストはリンクの目的をしっかり書きましょう レベルAの一部紹介
もし、目的をしっかり書いていなかったら 資料請求はこちら フォーカスを当てると「リンク、こちら」と読み上げられる
これが、 Webアクセシビリティ
03 WAI-ARIAで意味を伝える
WAI-ARIAとは W3C によって定められた仕様 HTMLなどでセマンティクス(意味)を補強するための技術
WAI-ARIAの3つの機能 ロール (Role) プロパティ (Property) ステート (State)
WAI-ARIAの3つの機能 ロール (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と指定されているので、 支援技術ではボタンとして認識してくれ ます。 ロール <td
しっかりと「ボタン」として 認識されています ロールについて ~AirbnbのカレンダーUIの場合~ Invalid dateは無視してー! 多分、日付出そうとしてると思う!
これが、 WAI-ARIAのロール
04 テストでアクセシビリティを意識してみる
divボタンのテストを書いてみる <div class=”button” onClick=”handleClick”>ボタン</div> 例えば、GitHub上でもよく見るこのボタンを サンプルにテストを書いてみます
ボタンをテストするぞ!となった時、 このボタンを取得するための要素は下記の2ヶ所になると思います <div class=”button” onClick=”handleClick”>ボタン</div> divボタンのテストを書いてみる <div class=”button” onClick=”handleClick”>ボタン</div> クラスのbutton
ラベルの役割をしているボタン
を使ってボタン要素を取得する場合 divボタンのテストを書いてみる class=”button” document.querySelector(‘.button’) document.querySelectorAll(‘.button’) や 要素を特定するために、 を使用することになります。 ただ、どちらも class=”button”
がついた要素が増えるたびに 取得できる要素や順番が変わるため、テストが壊れ修正することになります。 button-outlineとか ボタンの種類が増えた時も 壊れる!
を使ってボタン要素を取得する場合 divボタンのテストを書いてみる ボタン screen.getByText(‘ボタン’) で取れますが、 ‘ボタン’と書かれたものならなんでもヒットしてしまいます。 その為、「ボタンを押してください」などのテキストを追加すると テストが壊れてしまいます。
では、どうするか
支援技術が読み取ってた 情報使えばいいのでは? スクリーンリーダー
divボタンのテストを書いてみる <div role=”button” class=”button” onClick=”handleClick”>ボタン</div> 本来、この要素はボタンとして認識してもらいたい それなら、ロールを付与するだけ
WAI-ARIAのロールを使った場合 divボタンのテストを書いてみる screen.getByRole(‘button‘, {name: ’ボタン’}) で取れるようになり 全く同じ要素が現れない限りは、テストが壊れてしまうこともありません。
残念ながら、divで作成されたボタンにはtabでフォーカスする対応も、 EnterやSpaceキーで発火する対応もしなくては、アクセシビリティ的にアウト アクセシビリティ的にアウト <div role=”button” class=”button” onClick=”handleClick”>ボタン</div>
レベルAのガイドラインの一部紹介 1.1.1 非テキストコンテンツ 画像にはAlt属性を追加 2.1.1 キーボード マウスで操作できるものはキーボードでも操作できる 2.4.2 ページタイトル titleタグをつけて、利用者が現在位置を把握できる
2.4.4 リンクの目的 (コンテキスト内) aタグ内のテキストはリンクの目的をしっかり書きましょう
buttonタグに差し替えてもOK! <div role=”button” class=”button” onClick=”handleClick”>ボタン</div> <button class=”button” onClick=”handleClick”>ボタン</button> そんなに頑張る必要があるなら 全て対応済みなbuttonタグを使った方が楽なので差し替えてみます
とっても 便 利 !
buttonタグに差し替えてもOK! 差し替えてもbuttonタグにはあらかじめ role=”button” が付与されているので テストはそのままでも通ります
05 おわりに
おわりに アクセシビリティはみんなの為のもの Webアクセシビリティ対応は難しそうに思えるけど、WCAGのレベ ルAの中にはHTMLの基礎レベルの対応でクリアできるものがある Webアクセシビリティの対応をしていくと、壊れにくいテストも書け てお得 ロールは種類が沢山あるので、button以外も使ってみてね
Thank You!
参照 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