ウェブアクセシビリティ対応すると思ったようなデザインにならない?


この記事の所要時間: 333

ウェブアクセシビリティの達成とデザイン性の高いホームぺージを作ることは難しい?
必ずしもそうとは言えませんが、デザインにおいて制約を受けることは確かです。

コントラスト比を意識したデザインにする

文字色と背景色のコントラストを4.5:1のコントラストにする必要があります。
※日本語で22pt(29.34px)もしくは太字で18pt(24px)以上の大きな文字は3:1
色覚障害のある方には赤と緑などの色の差がわかりづらいためです。
4.5:1と言われてもどのくらいコントラスト比があればいいの?となりますよね。
チェックツールを使用して作業しましょう。

カラーコントラストアナライザーを使用する

ハマ企画で使用しているツールはカラーコントラストアナライザーです。
使い方は簡単で、チェックしたい背景色と文字色を画面からスポイトで拾うだけです。

画像文字も同様です

ロゴ以外の画像化された文字は対象になりますので
デザインのために小さい文字で薄い文字色にすることは避ける必要があります。

リンクは他のテキストとはっきり区別させる

よく見かけるデザインだとリンクに下線がない、もしくはマウスをのせた時に下線が出る形がありますが
本文内のテキストリンクに関してはとくにリンクとリンク以外の文字がはっきりと区別される必要があります。

この失敗例の目的は、色の違いを認識できない人々がリンクを識別できない状況 (色覚を持つ人々がリンクを識別できる場合) を避けることである。リンクのアンダーラインや他の色に依存しない視覚的な区別が必要である (リンクが色覚を持つ人に識別可能な場合)。
ナビゲーションリンクなど、いくつかのリンクは、ページデザインや文脈から視覚的に明らかであるが、テキスト内のリンクは、しばしばそれら自身の表示属性からのみ視覚的に理解される。下線を削除し、そのようなリンクの色差のみを残すことは、それがリンクであるという他の視覚的な表示 (色以外に) がないため、失敗である。

参考:F73: 達成基準 1.4.1 の失敗例 - 色覚なしで視覚的にはっきりと分からないリンクを作成する | WCAG 2.0 達成方法集より
https://waic.jp/docs/WCAG-TECHS/F73.html

色の違いを認識できない方にとってはリンクに下線が付いていることによって区別ができるので、なるべくリンクには下線を入れるようにしましょう。

動画には字幕を入れる

聴覚障害の方は動画コンテンツの音が聞けないため、動画には必ず字幕をつける、
動画の内容を別途テキストにおこすなど音だけでなくテキストで情報が受け取れるようにするなどの配慮が必要です。

JIS X 8341-3:2016 のレベル A を満たすためには、以下全ての対応が求められます。
a) 動画にキャプション(字幕)をつける。 動画の内容のうち音声で表現されている情報をキャプション(字幕)として付与 します。
b) 同じ内容のページを作成(HTML で提供)する。又は、動画に音声解説をつける。
例:記者会見の動画提供と合わせて、発言内容を書き起こしたページを用意する。

参考:「みんなの公共サイト 運用ガイドライン(2016 年版)」の「6.3.1 ページ作成時の対応」より
http://www.soumu.go.jp/main_content/000439213.pdf

このような事に気を付けてデザインすれば、ウェブアクセシビリティ対応しながらデザイン性の高いホームぺージを作ることができます。

ウェブアクセシビリティについてのご相談承ります

初回に限り1社1回30分の無料相談をハマ企画にて行っております。
貴社のホームぺージのお話を伺い、ホームぺージのアクセシビリティ対応についてのアドバイスを行います。
ホームぺージのアクセシビリティ対応してみたいけどどうすれば、と悩んでいる方もぜひお気軽にご相談ください。

ホームページ無料相談

ホームぺージの改善で集客する方法 無料ダウンロード