[社内勉強会資料]はじめてのアクセシビリティ改善

## この記事の概要

私はQiita株式会社に所属していて、グループ会社であるエイチームライフデザインと合同で実施した勉強会の内容です。
社内だけに閉じる必要も無い内容だったため、Qiitaに投稿しました。

## 対象読者

- 最近アクセシビリティについて興味を持った人、あまり詳しくない人
- まずは簡単なことから初めてみたいと思っている人

## 勉強会の内容

### はじめに

みなさん、アクセシビリティって言葉を聞いたことはありますか？
全然知らない・なんとなく大事だとは思ってる・普段から意識してる……色々な人がいると思います。

今日はあまり難しい話はしません。
すぐに取り組める内容や、大枠の概念をお伝えします。

### アクセシビリティとは？

こちらの記事の内容を紹介します。

https://qiita.com/xrxoxcxox/items/3548c7497698109a0e48

要約としては

- アクセシブル
    - 「駅からのアクセスが良い」とかの意味というより
    - 「情報が入手できる」とか「ある機能が使える」とかの意味
- Webの存在意義
    - アクセシブルであることが、割と根源的な価値
- アクセシビリティは「障害のある方向けのもの」ではなく「万人が使いやすくするためのもの」

### アクセシビリティが低いから、何？

完全に「私が思うには」であり、過激寄りの思想かもしれませんが、アクセシビリティの低いサイトは「点字ブロックの無い駅」みたいな存在だと思っています。

- 駅は色々な人が利用する
- 電車に乗れるか乗れないかで、遠くに行ける距離が随分違う
- にも関わらず、点字ブロックの無い駅は目の見えない人が使えない

例えとしての上手さは微妙かもしれませんが、要は`公共的な存在なのに誰かが使えない作りになっている`のは問題だと思っているのです。

### 自分達が作っているサイトを見てみる

概念はなんとなく分かったと思うので、実際に体験してみましょう。
自分達で作っているサイトが、果たして上手く使えるのかどうかにトライします。

https://hikkoshizamurai.jp/moving

今日はキーボードだけで操作をしていきます。

マウス操作が上手くできない人だけでなく、出先でマウスを忘れて仕方なくキーボードだけで操作せざるを得ない……など、遭遇する可能性も高めです。

キーボードで操作する際は

- `Tab`で次に進む
- `Shift + Tab`で前に戻る
- `Space`や`Enter`で決定

まずはサイトに訪れて`単身かつ対応エリアの方`を選んでみようと思います。

| トップページのモーダルウィンドウ |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/85d7c9da-e424-48bb-ea45-06ebc935bea1.png) |

`Tab`を押して、フォーカスリングがあるのを確認して、`Enter`。

本当はこのフォーカスリングも、offsetをつけるとかして見やすくなると良いですね。

---

更に`Tab`で移動して`見積もりスタート`から次のページへ進みましょう。

| モーダルウィンドウを閉じた状態 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0790b266-f4e2-76cc-929f-41013039a305.png) |

---

また`Tab`を押すわけですが……おや、今どこにカーソルが当たっているのでしょう。
よく見るとアイビームポインタが点滅しているので、郵便番号の欄だと分かりました。

| フォームへランディングしたビュー |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/888a16eb-6721-9fb4-72b3-3853f0adfa54.png) |

同様に番地も入れて、更に次へ……あれ？カーソルが見えなくなってしまいました。
`Enter`を押しても反応しません。

実は今select要素にフォーカスが当たっています。
selectの中身を展開するときは`Space`です。

今どこにフォーカスが当たっているか分かれば問題なく操作できると思うのですが、分からないのですからどうしようもありません。

これ、問題①として後で扱います。

---

そして、あなたがマンションに住んでいるとしましょう。
`さらに詳しく入力する`を開けば部屋番号を入力できそうな気配がありますが……。

| 更に詳しく入力するためのインターフェース |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/c6bb54c5-51cb-6eef-309e-c95288b29d17.png) |

開けません、というかフォーカスが当たっていません。
さっきまでは不可視ながらもフォーカスが当たっていたんですが、今はそもそもTabによる移動の対象として見られていません。

これ、後で問題②として扱います。

---

日付選択へ来ましたが、`時期で選ぶ`と`日付で選ぶ`のタブ、変更できますか？

| 引越し予定日 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/39891753-8b61-0265-5b5d-95e6eb6de47c.png) |

できませんよね？これも問題②と同じです。

また、キーボード操作において〜という文脈とは少し外れるのですが引越し人数のラジオボタン、ここもあまりよろしくなくて、後で補足①として解説します。

---

そして次のページ、ここも`Tab`で移動しましょう。

| 荷物情報 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/60ef85fd-164a-5384-ad5c-ab338996efb1.png) |

あれ？数字にフォーカスがあたりますね。
ただ、だからといって`Space`や`Enter`を押しても反応はありません。

直接キーボードで数字を叩いても同様です。

これは問題③として解説します。

---

さて、次はメールアドレスとパスワード登録フォームです。

| メールアドレス登録 |
| --- |
| ![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/036d3f50-a5b9-0927-7b8b-19d7d35f9d2d.png) |

パスワードは、今打っている文字が何かが分からないと間違えて入力してしまう可能性もありますからね。
show/hideの機能があるのは良いことです。
これも、キーボードで操作だけの文脈ではないのですが、ちょっと良くないことがあるので補足②としてとりあげます。
フォーカスが当たってるかどうか分からないから、問題①との複合でもありますね。

実際のサイトを見るのはここで終わりにしましょう。解説していきます。

### それぞれの問題

#### 問題① どこにフォーカスが当たっているか分からない

根源にして頂点、みたいな問題です。

これが発生してしまう理由はお分かりでしょうか？

正解は`outline: none;`などの指定があるからです。

私もデザイナーなので気持ちは分かります。
フォーカスリングが当たって、なんか微妙にイケてない見た目になりがちですよね。
しっかりoutlineのスタイルも書けば良いんですが、スクラッチするにも背景色との兼ね合いとかが意外と面倒というか……。

けど、単にnoneを指定してはキーボードで操作している人をバッサリ切ってしまいます。
それは優しくないですよね？

とは言え理想論だけ言っていても仕方ないので、割と現実的だと思われる手段をこちらの記事にまとめています。

https://qiita.com/xrxoxcxox/items/82e083b3f47309873262

#### 問題② そもそもフォーカスが当たらない

フォーカスが当たればフォーカスリングが出るようにしたとして、フォーカスが当たらなければどうしようもありません。

これが発生してしまう理由はお分かりでしょうか？

正解はdivやspanなど、適切でない要素でマークアップをしているからです。

inputやbuttonなど、適切な要素を使っていればフォーカスがあたるように上手く動きます。
HTMLって難しいですね。

なお、こちらも過去に近い記事を投稿しているので紹介します。

https://qiita.com/xrxoxcxox/items/7d06d4f2d861b022767a

#### 問題③ 変な場所にフォーカスが当たる

これは問題②の亜種です。

家財の数は`+`と`-`のボタンで操作するつもりで提供していますが、数の表示がinput属性になっているのでフォーカス自体はあたります。

readonlyであってもフォーカスされるのですが、解決策、分かりますか？

こちらはtabindexに-1を指定すると解決します。

#### 補足① display: none; または visibility: hidden;　によるアクセシビリティツリーからの削除

これは結構応用的なので、今回は「へ〜」くらいで聞いてください。

display: none; または visibility: hidden;を要素に指定すると、アクセシビリティツリーから削除されてしまいます。

今回はラジオボタンやチェックボックスをdisplay: none;にして、before要素で見た目上のラジオボタンやチェックボックスを作成しています。
そのためinput要素があるにも関わらずフォーカスもされないし読み上げもされません。

こちらは通称visually-hiddenというテクニックを用いるのが良いです。
私の記事ではありませんが、こちらの記事や、その中についているコメントを見ると分かりやすいのではないでしょうか。

https://qiita.com/randy39/items/fca820d500dfe9ec1a52

#### 補足② テキストノードが無く、スクリーンリーダーやキーボード操作では存在がないように振る舞ってしまうボタン

これもちょっと応用的です。
ただ、修正自体は比較的容易なのでもし可能であれば徐々に対応できると良いなと思っています。

以下の記事が詳しく、そして分かりやすいのですが……

https://note.swn.jp/n/n792ff17f211a

ざっくりとまとめると以下のどちらの選択肢をとるのが良いです。

- アイコンだけでボタンにしない
    - アイコン + テキストの形式にする
- 代替ラベルをつける
    - aria-labelをつける

## Q&A

### アクセシビリティ大事！っていう合意形成、どうやってした？

Qiita社ではそこまで時間や手間をかけたわけではないです。

私から「やってみない？」と声をかけたら、デザイナーはみんな「丁度やりたいと思っていた」と言ってくれました。
他の職種の人に相談したときも「たしかにQiitaは色々な人が使ってくれて、公共性が高いから、アクセシビリティって大事だよね」とスムーズに納得してもらえました。

### ここ最近になってアクセシビリティの話をよく聞く気がする、どうしてだろう？

私が観測している範囲だと、アクセシビリティ向上のための動きはだいぶ前から実施されているとは思います。
ただ、徐々に勉強会の規模が大きくなってきているなど、認知がしやすくなったのがここ最近ってことなのかもしれません。

でも明らかに最近は重要性が増しているはずで、今は取り組むのに良い時期だと思います。

### 自分達のサイトにどれくらいの割合でキーボードユーザーや色弱者が来ているとか、把握できる？

正直分かりません。多分みんな分からないはず……。

ただ、公共性の高いサイト（政府のサイトやオリンピックのサイトなど）は高い水準でアクセシビリティが求められます。

自分達の作っているサービスがニッチ寄りなのか公共性が高いのかで、どれくらい重視するかを決めるしか無いのかな？と思っています。

### これだけは守っておいて！っていうもの、ある？

基本的な内容ほど大事が気がします。

- outlineを消さない
- 正しいタグでマークアップする
- 画像に適切な代替テキストを入れる
- テキストの色のコントラストを確保する
- クリックできる範囲を44px以上確保する
- テキストが無いとか、CSSだけで頑張りすぎるとか、やらない

WAI-ARIAを使ってどうとか、ブロックスキップを用意するかとか、そういうのは後からでも良いと思います。（若干暴論ですが）