手を動かして始めるアクセシビリティ改善

by pastak

Slide 1

Slide 1 text

手を動かして始めるアクセシビリティ改善 id:Pasta-K / @pastak 2023/06/06 Hatena Engineer Seminer #25 アクセシビリティ編 1

Slide 2

Slide 2 text

About me ● id:Pasta-K ● mackerel チーム Webアプリケーションエンジニア(パートタイム) ○ 主にフロントエンド周りのあれこれを担当 2

Slide 3

Slide 3 text

PR: Helpfeel Tech Hour vol.3 「アクセシビリティを始めたい！編」僕が所属しているもう1つの会社でもオフラインでアクセシビリティの話をする会をやります！ 2023年6月16日(金)東京銀座で開催！ 3 https://nota.connpass.com/event/284361/

Slide 4

Slide 4 text

このトークで話すことここまでのトークではチームでのアクセシビリティの改善の進め方や取り組みについて紹介しました。このトークでは、手の動かしはじめ方について、mackerelチームの開発合宿などで取り組んだ実例を交えつつお話します。 4

Slide 5

Slide 5 text

手を動かして改善を始める ● 啓発のために実際に手を動かして、改善の様子を見せたい ● 気持ちが高まったので、とにかく改善できるところからやってみたい 5

Slide 6

Slide 6 text

どこから手をつけ始めれば良いか ● 動的解析 ○ 実際のウェブページにブラウザでアクセスして問題点を発見する ● 静的解析 ○ ESLintのeslint-plugin-jsx-a11yなどを利用してコードから問題点を発見する 6

Slide 7

Slide 7 text

動的解析: ウェブページを色んな方法で触ってみる ● キーボード操作のみで ● 画面を暗くして読み上げソフトと共に ● ブラウザの翻訳機能を介して 7

Slide 8

Slide 8 text

● キーボード操作のみで ● 画面を暗くして読み上げソフトと共に ● ブラウザの翻訳機能を介して ● スマートフォンを回転させて見る ● タブレット端末で 8 動的解析: ウェブページを色んな方法で触ってみる

Slide 9

Slide 9 text

● キーボード操作のみで ● 画面を暗くして読み上げソフトと共に ● ブラウザの翻訳機能を介して ● スマートフォンを回転させて見る ● タブレット端末で 9 動的解析: ウェブページを色んな方法で触ってみる

Slide 10

Slide 10 text

動作確認: ウェブページを色んな方法で触ってみる ● キーボード操作のみで ● 画面を暗くして読み上げソフトと共に ● ブラウザの翻訳機能を介して ● スマートフォンを回転させて見る ● タブレット端末で 10

Slide 11

Slide 11 text

「アクセシビリティ」は特別なことではない ● 色んなユーザーが色んな使い方をすることを想定してウェブページを触ってみる ● そうしたユースケースに対して適切なアクセス方法を提供する ● 結果的にアクセシビリティと呼ばれる観点の向上に繋がる 11

Slide 12

Slide 12 text

色んなユーザーの例 ● マウスが壊れて、キーボードを使うしかなくなった ● 骨折して腕が一時的に使えなくなった ● スマートフォンの画面が割れて液晶が映らなくなった ● 視力が低い・見えない 12 ● イヤホンを忘れて、音声を再生できない ● 日本語を理解できない ● 小さい字が読めない ● ギガを使いすぎて通信制限にあった ● 色覚特性を有している

Slide 13

Slide 13 text

あらゆる人に利用可能で快適なウェブサービスを目指す ● これ自体は何も特別なことではないはず ● SaaSやBtoCどんなパターンでもエンドユーザーの中で「利用困難」な人が居ると、我々のサービスが選択されなくなってしまう ○ 操作性が悪いなどで使い辛いだけなら、利用はできる ■ ユーザーの操作性を凝ることよりも重要なのでは？ 13

Slide 14

Slide 14 text

14 閑話休題アクセシビリティ改善にどこから手をつけるかに話題を戻しましょう

Slide 15

Slide 15 text

では、どこから手をつけ始めるか ● 動的解析 ○ 実際のウェブページにブラウザでアクセスして問題点を発見する (今日の発表はこのアプローチに注目) ● 静的解析 ○ ESLintのeslint-plugin-jsx-a11yなどを利用してコードから問題点を発見する 15

Slide 16

Slide 16 text

よくあるパターンに当てはめてみる ● Tabキーでフォーカスの様子がどうなるか ● VoiceOverで読み上げの様子がどうなるか ● 文字やUIなどの色のコントラストはどうか 16

Slide 17

Slide 17 text

よくあるパターンに当てはめてみる ● Tabキーでフォーカスの様子がどうなるか ● VoiceOverで読み上げの様子がどうなるか ● 文字やUIなどの色のコントラストはどうか 17

Slide 18

Slide 18 text

Tabキーを押すとどうなるか素朴にTabキーを連打して、フォーカスの様子を観察してみる 18

Slide 19

Slide 19 text

素朴にTabキーを連打すると気付くことの例 ● どこにフォーカスが当たっているか不明 ● フォーカスの当たる順番が予想に反する ● そもそもフォーカス出来ない要素がある ● 主要な操作要素にたどり着くまでが遠い 19

Slide 20

Slide 20 text

素朴にTabキーを連打すると気付くことの例 ● どこにフォーカスが当たっているか不明 ● フォーカスの当たる順番が予想に反する ● そもそもフォーカス出来ない要素がある ● 主要な操作要素にたどり着くまでが遠い 20

Slide 21

Slide 21 text

フォーカスリング ● フォーカスの可視化(*)をして、キーボードフォーカスを持っている要素を利用者が認識しやすくするためのアプローチの1つ ● フォーカス可能な要素にはブラウザ標準でフォーカスリングが表示されるようになっているが、 CSS で outline: none; を指定していて、非表示になっていることもしばしば。 21 ※ 達成基準 2.4.7: フォーカスの可視化を理解する https://waic.jp/translations/WCAG21/Understanding/focus-visible.html

Slide 22

Slide 22 text

フォーカスリングを復活させる ● 消滅してしまっている場合は、:focus や :focus-visible などを利用して、 outline: auto;を適用するようにする。 ● 見た目の良さの観点で消されていることも多いが、どう表示するか・何故表示するかという観点で色や見せ方について再考出来ると良い 22

Slide 23

Slide 23 text

素朴にTabキーを連打すると気付くことの例 ● どこにフォーカスが当たっているか不明 ● フォーカスの当たる順番が予想に反する ● そもそもフォーカス出来ない要素がある ● 主要な操作要素にたどり着くまでが遠い 23

Slide 24

Slide 24 text

フォーカスの当たる順番を可視化する Firefox開発者ツールのアクセシビリティ機能や Chromeの拡張機能(taba11y(*))で可視化してみる 24 ※ https://chrome.google.com/webstore/detail/taba11y/aocppmckdocdjkphmofnklcjhdidgmga

Slide 25

Slide 25 text

フォーカスを可視化した例 25

Slide 26

Slide 26 text

tabIndexの値を調整する ● tabIndex属性に-1 or 0以外の値を設定しないようにする ● ESLintのjsx-a11y/tabindex-no-positive で検出するなどして、tabIndexが1より大きいものを削除して、DOMツリー順になるように ○ mackerel開発合宿での最強の値は10001でした 26

Slide 27

Slide 27 text

tabIndexの値を調整する ● DOMツリー順と見た目が異なる場合は、ここで調整などが発生するかもしれないが、 mackerelの場合はそういったことがなかったので、サクサクと変更できた 27

Slide 28

Slide 28 text

素朴にTabキーを連打すると気付くことの例 ● どこにフォーカスが当たっているか不明 ● フォーカスの当たる順番が予想に反する ● そもそもフォーカス出来ない要素がある ● 主要な操作要素にたどり着くまでが遠い 28

Slide 29

Slide 29 text

クリック可能な要素をフォーカス可能に ● そもそもとして、onClickなどのハンドラーを設定する際には、基本的にはを使うようにすることで解消する ○ リンクがある場合はを利用する ● jsx-a11y/no-noninteractive-element-to-i nteractive-roleで検出できる 29

Slide 30

Slide 30 text

のデフォルトCSSを無効化が使われていないとき、その原因は見た目に起因していることが多い。のブラウザのデフォルトCSSを無効に出来るクラスなどを用意することで脱出を容易に出来る 30

Slide 31

Slide 31 text

素朴にTabキーを連打すると気付くことの例 ● どこにフォーカスが当たっているか不明 ● フォーカスの当たる順番が予想に反する ● そもそもフォーカス出来ない要素がある ● 主要な操作要素にたどり着くまでが遠い 31

Slide 32

Slide 32 text

主要な操作要素までの距離が遠い ● ヘッダーやサイドバーの要素の数だけTab キーを押さないとメイン部分にフォーカスが移行しない 32

Slide 33

Slide 33 text

スキップリンクの活用例: Github Tabキーでフォーカスを操作し始めると、最初に「Skip to content」と書かれた要素にフォーカスする（「スキップリンク」と呼ばれる） 33

Slide 34

Slide 34 text

スキップリンクを実装する ● 素朴にやるなら、メインコンテンツの始まる要素に id="start-of-content" を付与して、Skip to Content要素をとすれば良い 34

Slide 35

Slide 35 text

Mackerel開発合宿での事例 ● URLのhash部分を使って画面の切り替えを実装している画面があった ● どうするかディスカッションをして、JavaScriptで最初にフォーカス可能な要素にフォーカスするのが良いんじゃないかということに 35

Slide 36

Slide 36 text

ランドマークロールを利用する ● スクリーンリーダーのユーザーなどがウェブページの重要な領域などを確認したり、それらに素早く到達するための構造化の方法 ● 暗黙のロールを持つタグやrole属性を用いて表現できる 36

Slide 37

Slide 37 text

ランドマークロールとそれらに対応するHTML要素 main navigation region search (*) 37 基本的にはランドマークロールを持つHTMLタグを使えば良い(右側)が、role属性を付与すること(左側)でも同様の情報を付与できる banner complementary contentinfo form ※ 2023/06/01時点ではをサポートしているブラウザはない

Slide 38

Slide 38 text

ランドマークロールとスキップリンク ● 読み上げソフトのランドマークロールを扱う機能などを使えばスキップリンクは不要？ ● 2022年の支援技術利用状況調査報告書(*)ではスキップリンクを「よく使う」「時々使う」と答えた人はほぼ80% 38 ※ https://jbict.net/survey/at-survey-02

Slide 39

Slide 39 text

動的解析についての補足 ● axeやlighthouseなどのツールを利用することでこれらの検出は自動化出来たりもします ○ まずは自分の手で触ってみて、違和感への感覚を得る 39

Slide 40

Slide 40 text

40 まとめ

Slide 41

Slide 41 text

まずは出来ることから始める ● ブラウザでウェブサイトにアクセスして発見する ○ キーボードを用いてフォーカスを移して操作可能か ○ 色のコントラストは適切か ○ 読み上げは可能か ■ のalt属性や各種labelなどは適切か 41

Slide 42

Slide 42 text

まずは出来ることから始める ● ESLintなどで静的に発見する ○ 動的に発見したものを潰せる設定を入れる ○ 全部有効にしてみてリスト化してみる ■ その後、ルールを1つずつ有効にする ○ 関心のあるルール / (サービスとしての)重要度の高いルールから有効にしてみる 42

Slide 43

Slide 43 text

まずは出来ることから始める ● アクセシビリティ改善は0 or 100ではない ● 改善できることがあるならそれはチャンスでしかない ● 少しずつでも改善して成果を出すことが周りを巻き込むことやウェブサービスを利用できる人を増やすことに必ず繋がる 43

Slide 44

Slide 44 text

手を動かして改善する ● ウェブサービスを提供する上で、手を動かなさいことにはウェブサービスのアクセシビリティが改善されることはない ● サービスの重要なところはUIが複雑だったりして、いきなり取り掛かるのは難しいことも多い ○ 気負いすぎずに、まずは改善できるところから徐々に取り組んでいくで良いのではないかと思います ○ まずは取り組むハードルを下げて関わる人を増やす 44

Slide 45

Slide 45 text

Thanks for your listening ● 是非、まずは出来ることからアクセシビリティ改善を始めてみてください ● 今日紹介したような一歩から始めて、こつこつと少しずつの積み重ねでウェブサービスのアクセシビリティの改善を続けていきます 45