webアクセシビリティ勉強会

今回はWCANの勉強会に参加させていただきました。ユニバーサルデザインや先日のTHE GUILD勉強会でも話に出てきたインクルーシブデザインにも重なるような話の内容でアクセシビリティの重要さについて学ぶことができました。

webアクセシビリティとは

世界で最も高齢化が進んでいる国は日本であり、今まで以上にアクセシビリティを意識する必要がある。

主に意識する点
・見づらい
・色の違いが分からない
・聞き取りづらい
・文章を読んでも理解しづらい
・マウスを操作しづらい

アクセシビリティの対象となるユーザーは障碍者、高齢者のみでは留まらず、誰にでも、より快適な利用体験を提供することを目標としている。
例えば「マニキュアを塗ったすぐのせいでキーボード触れない時」など・・・

UXデザインへの繋がり

UXを考える上ではアクセシビリティは必須であり、ユーザーの価値を作り出すためには、まずユーザーが使えなければ話にならない。

アクセスできる→使いやすい→役に立つ→価値がある

アクセシビリティにより、多くのユーザーとの接点が増えればユーザー価値が積み重なっていく。

じゃあ何したらいいの？

webコンテンツをマシンリーダブルにすることが重要

マシンリーダブルとは
ユーザーがコンテンツに触れる以前に、まずはマシン が取り扱える形式になっている必要があります。そしてマシン は人間と違って融通の利く解釈をすることができないので、マシンが解釈できる形に、あらかじめ情報を成型してあげる必要がある。

しかし、マシンが取り扱いやすい形式にしすぎると人間が扱いづらい形式へと変わってしまうのでマシンリーダブルとヒューマンリーダブルの重なりが必要である。

ヒューマンリーダブルとは
人が機械やコンピューターなどの助けを借りることなく、直接読んだり解釈したりできること。
（例）スーパーにある商品のバーコードの下に書いてある数字の列

実践編

下記の10項目を実行したら8割はアクセシビリティを網羅できる

目次
1.  ページタイトル
2.  見出し、リスト
3.  リンクテキスト
4.  代替テキスト
5.  色
6.  ズーム
7.  キーボードのみ
8.  テーブル
9.  ラベル
10. エラーメッセージ

ページタイトル

ページタイトル＋webサイト名
サイト名を記述する際は後ろ側につけるのが基本

<title>ページの内容が分かるページタイトルを記述する</title>

ユーザーテストを行うとわかる

ユーザーは検索バーがあるとほとんどの人が検索したがる。しかし、タイトルを分かりやすくしていないと見たい記事をスルーしてしまうことがある

「平成28年～」というタイトルだと大体スルーされる

見出し、リスト

画面読み上げソフトウェアで音声が流れる際に優先して流してくれる

1つ前の見出しの小見出しの場合は<h〇>の値を１つ下げる。関係ない、または全体の小見出しは同じ見出しの値で良い

・リストを用いるとユーザビリティが47％も向上する。
・スクリーリーダーでは何項目あるか読み上げてくれる。

リンクテキスト

ユーザーが行い事をスムーズにできるようにする。

悪い例：「このセミナーに参加したい方はこちら」
良い例：「このセミナーの申し込み」

「こちら」を多用すると、「こちら」がこのwebサイトでは重要なんだなと勘違いされ検索エンジンにも影響してくる。

代替テキスト

・画像にある文字情報をalt属性に記述する。画像にある文字情報をすべて記述する。
・写真であると誰が写ってるか分かるように記述する

飾りの画像はalt属性を付けなくてもよい。

画像とテキストを1つのリンクにまとめる。代替テキストが同一リンク内にテキストと共にあると、読み上げる際に2回読まれる

色

4.5：1が基本

赤字の色指定は#ee0000がコントラスト的に見やすい。
文字を使う色が限られるのは仕方がない
色の認識ができなくてもグラフのデータを読み取ることが出来るようにするためにコントラストを変えたりする

ズーム

200%まで拡大してもコンテンツの閲覧や操作に支障がないようにする。
老眼人口が数多くいるのでニーズに合うようにする。

キーボード操作

・キーボードだけでも操作できるようにする。
・フォーカスインジケーターを常に表示する
・webページの最初から最後まで移動できるようにする
・フォーカスの順序をまもる

cssでoutline:noneの指定があると非表示になるので注意

✖「モータㇽウィンドウを開いたけどインジケータは元の画面にあるまま」

テーブル

見出しの部分を<th>にするだけで良い。
できればセルを結合しない形であることが望ましい

フォーム・コントロール

ラベルのテキストがある場合は<label>要素

<label for="name">名前<>

ラジオボタン、チェックボックスに何を入力すべきかが画面読み上げソフトウェアによって読まれるようになる。

aria-describedby属性を用いることによってチェックボックスに入れる文字の条件（カタカナのみ）が音声で読まれるようになる。

エラーメッセージ

・どこがエラーか示す
・エラー内容の説明
・エラーの修正方法

この3項目が示されるとユーザーの離脱率が大きく減少する。

まとめ

世界中でアクセシビリティに対する意識が大きくなっている

今、私たちができることは逃げないで上記の10項目だけでもいいので実行してみよう！