Webアクセシビリティまとめ【中編】

こんにちは。デザイナーのnoguchiです。
さて、前回の前編ではWebアクセシビリティとは何なのかについて書きましたが、今回はデザイナー向けのWebアクセシビリティについてまとめていきたいと思います。

＼ 前編はこちらから ／

どこまでWebアクセシビリティに対応するか決める

前編でご紹介したように、Webアクセシビリティのガイドライン・規格には、国際的にWCAG 2.0（Web Content Accessibility Guidelines 2.0）と、日本国内にJIS X 8341-3の2つの規格があります。

2つも規格があるとどっちも守らなければいけないのか、気になりますよね。

日本国内の規格に準拠しておけば、国際標準でのWebアクセシビリティを確保できますので、関連する標準・法規等にも対応することが可能です。

そして、日本規格には達成基準項目が、「A」「AA」「AAA」の3つ存在し、それぞれ達成基準が違ってきますでの、どこまで対応するのか決めましょう。
例えば、官公庁などのWebサイトの場合、「適合レベルAA」への準拠が求められます。

レベルA…最低限の基準
レベルAA…望ましい基準
レベルAAA…発展的な基準

実際の達成基準の一覧は以下より参照可能です。

JIS X 8341-3:2016 達成基準 早見表（レベルA & AA）
https://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdf

デザインする上でのWebアクセシビリティ対策

コントラスト比

文字の色と背景色とのコントラスト比を4.5:1以上の差が必要です。
コントラスト比が高いと、要素が見やすくなり、ユーザーが区別しやすくなります。
また、色弱（色覚異常）の人にも有効です。
ちなみに、日本人で色弱の人は、男性で20人に1人、女性で500人に1人いるといわれています。

ただし、「WCAG 2.0」の達成基準では以下の文字は対象外となってます。

・大きな文字（サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも3:1 のコントラスト比がある。）
・装飾のために用いられている文字
・写真の中に写っている文字
・アクティブではないユーザインタフェースコンポーネントの一部である場合
・ロゴタイプとして使用されている文字

文字サイズ

高齢者や視覚障害の人でも読みやすくするために、文字のサイズは大きめが良いでしょう。
現在、Googleが推奨している基本フォントサイズは16pxです。
そしてほどんどのWebサイトでは、14px〜16pxの文字サイズを採用しています。

文字サイズの指定方法

ちょっとデザイナーというよりはコーダーよりですが、文字の大きさを絶対的な単位で指定してしまうと、ブラウザによってはユーザー側で文字の大きさを変更することができません。
そうなると、最悪、コンテンツを全く読めない可能性も出てきます。

そのため、文字サイズを指定するときは、「em」、「ex」、「%」、「rem」など相対的な単位を用いるようにした方が良いでしょう。

行間

最低150%以上を目安にすると読みやすい文章となります。

行長

文字サイズによって変わる場合もありますが、1行あたり25文字～40文字程度の長さが読みやすいとされています。

リンクテキスト

例えば、何も装飾のないテキストの中に下線のリンクテキストがあった場合、リンクだとわかりますね。
リンクテキストの装飾だったり、テキストとリンクテキストのコントラスト比が十分に確保されていると分かりやすくなります。
さらに、リンクテキストは、リンク先が分かる文言にした方が適切です。
リンクテキストを「こちら」や「ここをクリック」といった文言にするとどこに遷移するのか判断できません。

パンくず

パンくずリストは、コンテンツがどのような構造なのか知ることができたり、これまで辿ってきたページへ戻ることや、現在位置を特定することができます。

フォーム

入力フォームで「エラーです」とだけメッセージが表示されると、戸惑いますよね。
何をどうすればよいか分からないメッセージの場合、ユーザーは離脱してしまいます。
何をどう修正すればいいのかを分かりやすく伝えられているかどうかを作成するときに注意するようにしましょう。

まとめ

伝えたい情報を確実に届けるためには、デザイナーがあらゆるユーザーのことを考え、デザインする必要があります。
紹介したのはほんの一部ですが、ぜひ意識してデザインしてみてください。
次は、アクセシビリティに役立つツールについてご紹介していこうと思います。

＼ 後編はこちらから ／

＼　Wizは一緒に活躍できる人を募集しています！　／

UIUXデザイナーの募集

WEBデザイナーの募集