Hatena Engineer Seminar #25 アクセシビリティ編 https://hatena.connpass.com/event/283800/
Google Slide: https://docs.google.com/presentation/d/1etZBl-yKEEffqGYODdj4hIhPZXKNS8XOGraTUkevno0/edit?usp=sharing
手を動かして始めるアクセシビリティ改善id:Pasta-K / @pastak2023/06/06 Hatena Engineer Seminer #25 アクセシビリティ編1
View Slide
About me● id:Pasta-K● mackerel チーム Webアプリケーションエンジニア(パートタイム)○ 主にフロントエンド周りのあれこれを担当2
PR: Helpfeel Tech Hour vol.3「アクセシビリティを始めたい！編」僕が所属しているもう1つの会社でもオフラインでアクセシビリティの話をする会をやります！2023年6月16日(金)東京 銀座で開催！3https://nota.connpass.com/event/284361/
このトークで話すことここまでのトークではチームでのアクセシビリティの改善の進め方や取り組みについて紹介しました。このトークでは、手の動かしはじめ方について、mackerelチームの開発合宿などで取り組んだ実例を交えつつお話します。4
手を動かして改善を始める● 啓発のために実際に手を動かして、改善の様子を見せたい● 気持ちが高まったので、とにかく改善できるところからやってみたい5
どこから手をつけ始めれば良いか● 動的解析○ 実際のウェブページにブラウザでアクセスして問題点を発見する● 静的解析○ ESLintのeslint-plugin-jsx-a11yなどを利用してコードから問題点を発見する6
動的解析: ウェブページを色んな方法で触ってみる● キーボード操作のみで● 画面を暗くして読み上げソフトと共に● ブラウザの翻訳機能を介して7
● キーボード操作のみで● 画面を暗くして読み上げソフトと共に● ブラウザの翻訳機能を介して● スマートフォンを回転させて見る● タブレット端末で8動的解析: ウェブページを色んな方法で触ってみる
● キーボード操作のみで● 画面を暗くして読み上げソフトと共に● ブラウザの翻訳機能を介して● スマートフォンを回転させて見る● タブレット端末で9動的解析: ウェブページを色んな方法で触ってみる
動作確認: ウェブページを色んな方法で触ってみる● キーボード操作のみで● 画面を暗くして読み上げソフトと共に● ブラウザの翻訳機能を介して● スマートフォンを回転させて見る● タブレット端末で10
「アクセシビリティ」は特別なことではない● 色んなユーザーが色んな使い方をすることを想定してウェブページを触ってみる● そうしたユースケースに対して適切なアクセス方法を提供する● 結果的にアクセシビリティと呼ばれる観点の向上に繋がる11
色んなユーザーの例● マウスが壊れて、キーボードを使うしかなくなった● 骨折して腕が一時的に使えなくなった● スマートフォンの画面が割れて液晶が映らなくなった● 視力が低い・見えない12● イヤホンを忘れて、音声を再生できない● 日本語を理解できない● 小さい字が読めない● ギガを使いすぎて通信制限にあった● 色覚特性を有している
あらゆる人に利用可能で快適なウェブサービスを目指す● これ自体は何も特別なことではないはず● SaaSやBtoCどんなパターンでもエンドユーザーの中で「利用困難」な人が居ると、我々のサービスが選択されなくなってしまう○ 操作性が悪いなどで使い辛いだけなら、利用はできる■ ユーザーの操作性を凝ることよりも重要なのでは？13
14閑話休題アクセシビリティ改善にどこから手をつけるかに話題を戻しましょう
では、どこから手をつけ始めるか● 動的解析○ 実際のウェブページにブラウザでアクセスして問題点を発見する (今日の発表はこのアプローチに注目)● 静的解析○ ESLintのeslint-plugin-jsx-a11yなどを利用してコードから問題点を発見する15
よくあるパターンに当てはめてみる● Tabキーでフォーカスの様子がどうなるか● VoiceOverで読み上げの様子がどうなるか● 文字やUIなどの色のコントラストはどうか16
よくあるパターンに当てはめてみる● Tabキーでフォーカスの様子がどうなるか● VoiceOverで読み上げの様子がどうなるか● 文字やUIなどの色のコントラストはどうか17
Tabキーを押すとどうなるか素朴にTabキーを連打して、フォーカスの様子を観察してみる18
素朴にTabキーを連打すると気付くことの例● どこにフォーカスが当たっているか不明● フォーカスの当たる順番が予想に反する● そもそもフォーカス出来ない要素がある● 主要な操作要素にたどり着くまでが遠い19
素朴にTabキーを連打すると気付くことの例● どこにフォーカスが当たっているか不明● フォーカスの当たる順番が予想に反する● そもそもフォーカス出来ない要素がある● 主要な操作要素にたどり着くまでが遠い20
フォーカスリング● フォーカスの可視化(*)をして、キーボード フォーカスを持っている要素を利用者が認識しやすくするためのアプローチの1つ● フォーカス可能な要素にはブラウザ標準でフォーカスリングが表示されるようになっているが、CSS で outline: none; を指定していて、非表示になっていることもしばしば。21※ 達成基準 2.4.7: フォーカスの可視化を理解するhttps://waic.jp/translations/WCAG21/Understanding/focus-visible.html
フォーカスリングを復活させる● 消滅してしまっている場合は、:focus や:focus-visible などを利用して、outline: auto;を適用するようにする。● 見た目の良さの観点で消されていることも多いが、どう表示するか・何故表示するかという観点で色や見せ方について再考出来ると良い22
素朴にTabキーを連打すると気付くことの例● どこにフォーカスが当たっているか不明● フォーカスの当たる順番が予想に反する● そもそもフォーカス出来ない要素がある● 主要な操作要素にたどり着くまでが遠い23
フォーカスの当たる順番を可視化するFirefox開発者ツールのアクセシビリティ機能やChromeの拡張機能(taba11y(*))で可視化してみる24※ https://chrome.google.com/webstore/detail/taba11y/aocppmckdocdjkphmofnklcjhdidgmga
フォーカスを可視化した例25
tabIndexの値を調整する● tabIndex属性に-1 or 0以外の値を設定しないようにする● ESLintのjsx-a11y/tabindex-no-positive で検出するなどして、tabIndexが1より大きいものを削除して、DOMツリー順になるように○ mackerel開発合宿での最強の値は10001でした26
tabIndexの値を調整する● DOMツリー順と見た目が異なる場合は、ここで調整などが発生するかもしれないが、mackerelの場合はそういったことがなかったので、サクサクと変更できた27
素朴にTabキーを連打すると気付くことの例● どこにフォーカスが当たっているか不明● フォーカスの当たる順番が予想に反する● そもそもフォーカス出来ない要素がある● 主要な操作要素にたどり着くまでが遠い28
クリック可能な要素をフォーカス可能に● そもそもとして、onClickなどのハンドラーを設定する際には、基本的にはを使うようにすることで解消する○ リンクがある場合はを利用する● jsx-a11y/no-noninteractive-element-to-interactive-roleで検出できる29
のデフォルトCSSを無効化が使われていないとき、その原因は見た目に起因していることが多い。のブラウザのデフォルトCSSを無効に出来るクラスなどを用意することで脱出を容易に出来る30
素朴にTabキーを連打すると気付くことの例● どこにフォーカスが当たっているか不明● フォーカスの当たる順番が予想に反する● そもそもフォーカス出来ない要素がある● 主要な操作要素にたどり着くまでが遠い31
主要な操作要素までの距離が遠い● ヘッダーやサイドバーの要素の数だけTabキーを押さないとメイン部分にフォーカスが移行しない32
スキップリンクの活用例: GithubTabキーでフォーカスを操作し始めると、最初に「Skip to content」と書かれた要素にフォーカスする（「スキップリンク」と呼ばれる）33
スキップリンクを実装する● 素朴にやるなら、メインコンテンツの始まる要素に id="start-of-content" を付与して、Skip to Content要素をとすれば良い34
Mackerel開発合宿での事例● URLのhash部分を使って画面の切り替えを実装している画面があった● どうするかディスカッションをして、JavaScriptで最初にフォーカス可能な要素にフォーカスするのが良いんじゃないかということに35
ランドマークロールを利用する● スクリーンリーダーのユーザーなどがウェブページの重要な領域などを確認したり、それらに素早く到達するための構造化の方法● 暗黙のロールを持つタグやrole属性を用いて表現できる36
ランドマークロールとそれらに対応するHTML要素main navigation region search (*)37基本的にはランドマークロールを持つHTMLタグを使えば良い(右側)が、role属性を付与すること(左側)でも同様の情報を付与できるbanner complementary contentinfo form ※ 2023/06/01時点ではをサポートしているブラウザはない
ランドマークロールとスキップリンク● 読み上げソフトのランドマークロールを扱う機能などを使えばスキップリンクは不要？● 2022年の支援技術利用状況調査報告書(*)ではスキップリンクを「よく使う」「時々使う」と答えた人はほぼ80%38※https://jbict.net/survey/at-survey-02
動的解析についての補足● axeやlighthouseなどのツールを利用することでこれらの検出は自動化出来たりもします○ まずは自分の手で触ってみて、違和感への感覚を得る39
40まとめ
まずは出来ることから始める● ブラウザでウェブサイトにアクセスして発見する○ キーボードを用いてフォーカスを移して操作可能か○ 色のコントラストは適切か○ 読み上げは可能か■ のalt属性や各種labelなどは適切か41
まずは出来ることから始める● ESLintなどで静的に発見する○ 動的に発見したものを潰せる設定を入れる○ 全部有効にしてみてリスト化してみる■ その後、ルールを1つずつ有効にする○ 関心のあるルール / (サービスとしての)重要度の高いルールから有効にしてみる42
まずは出来ることから始める● アクセシビリティ改善は0 or 100ではない● 改善できることがあるならそれはチャンスでしかない● 少しずつでも改善して成果を出すことが周りを巻き込むことやウェブサービスを利用できる人を増やすことに必ず繋がる43
手を動かして改善する● ウェブサービスを提供する上で、手を動かなさいことにはウェブサービスのアクセシビリティが改善されることはない● サービスの重要なところはUIが複雑だったりして、いきなり取り掛かるのは難しいことも多い○ 気負いすぎずに、まずは改善できるところから徐々に取り組んでいくで良いのではないかと思います○ まずは取り組むハードルを下げて関わる人を増やす44
Thanks for your listening● 是非、まずは出来ることからアクセシビリティ改善を始めてみてください● 今日紹介したような一歩から始めて、こつこつと少しずつの積み重ねでウェブサービスのアクセシビリティの改善を続けていきます45
pastak
jonyablonski
colly
aarron
tenderlove
addyosmani
marcelosomers
sachag
3n
paulrobertlloyd
lara
geoffreycrofte
garrettdimon