Webデザイナーが最低限気をつけるべき8つのアクセシビリティ

Klaudia

この記事はMarvellousからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why should web designers care about accessibility?

Webデザイナーや開発者は往々にして、自分たちの制作物に誰がアクセスして使うのかという点に関して無関心です。

accessibility-illustration

使いやすさなどよりビジュアルが優先されることも多いですが、現代のクリエイターとして私たちは、より道徳的な観点を持ち、人それぞれの能力に併せたアクセシビリティを提供するべきです。

イギリスのアクセシビリティに関する法律に対する法的義務はさておき、イギリスには1,190万人以上の障害者がおり、その数は人口の19%に該当します。これはつまり、アクセシビリティが十分でないサイトに対して不満を持っている潜在ユーザーが、それくらい存在するということです。

どうして良いWebアクセシビリティが必要なのか

ユーザーはWebサイトを使用するとき、どんなことを困難と感じるのでしょうか。アクセシビリティを語るにあたって、どういったものがあるかを見てみましょう。

聴覚系の障害

これは軽度なものから重度の聴覚障害まで含まれますが、音が聴こえないことでサイトの利用が制限される場合があります。

認識と神経の障害

人々が聞いたり、動いたり、見たり、話したりすることに影響をあたえます。

身体の障害

痙攣、しびれなどの不随意運動といった、筋肉の動作に制限がかかります。

会話の障害

会話の障害では他社が理解できる会話を行うことが難しかったり、音声認識が使用できないという制限があります。

視覚の障害

視覚障害は、軽度の片目の障害から、実質的な両面の失明を含みます。

デザイナーは何ができるのか

多くのデザイナーや開発者はWebのアクセシビリティにまで対応しようとは考えません。実装が難しすぎると考えてしまうからです。ですがそれは全く逆で、Webサイトを利用しようとしている人々を悩ませる根本的な問題について知ってしまえば、むしろ簡単な事なのです。

アクセシビリティを改善する簡単な方法

様々な種類の障害に対応しつつも、私たちが簡単に導入できる基本的なアクセシビリティ改善を見ていきましょう。

画像にはALTテキストを

accessibility-illustration-2

Webで表示する全ての画像は、その詳細を説明する代理のテキスト情報を持つべきです。それによって、もし視覚に障害を持つ人がページにアクセスした時でも、スクリーンリーダーなどの読み上げ機能によってその画像の有無や内容を説明することができます。

リンクテキストを詳細に

accessibility-illustration-3

リンクの文章を書くときは前後の文脈を見ずとも理解できるように、詳細であることを心がけましょう。

スクリーンリーダーを持っているユーザーはサイトを利用する為に、テキスト情報を頼りにしています。

たとえば、
<a href=https://wearemarvellous.com/about-us>こちらをクリック</a>
は適切ではありません。

この最初の例は、リンクについての十分な説明がありません。「こちらをクリック」ではリンクがどこに連れて行くのかについて、何の説明ももたらしません。

<a href=https://wearemarvellous.com/about-us>Marvellousについてもっと知る</a>

これは好ましい例です。テキストは詳細で、リンクがあなたをどこに連れて行くのか予想する事ができます。 

項目にラベリングをする

Webサイトでありがちな間違いは、フォーム項目のラベリングです。select要素やtextarea要素を含むほとんどのinput要素は、項目の目的を宣言するラベル要素と関連付けられるべきです。 

文字のサイズ

全体的なルールとして、小さすぎるフォントは除外しましょう。ボディテキスト(本文)の大きさの業界スタンダードは16pxです。

もしそれより小さいフォントを使う事を計画しているなら、太文字を使い、十分なコントラストをつけて読みやすいようにしましょう。

ホワイトスペースを使う

コンテンツに対して十分な余白を取り、サイト内の各セクションをきちんと分けてあげることでコンテンツの見分けや認識がしやすくなります。

シンプルでセマンティックにする

もしあなたが既にhtmlの作法に則ってセマンティックな構造を守っているのであれば、それはアクセシビリティの高いサイト作りには非常に役立ちます。複雑なコードなどを使用しないサイトのほうがアクセシビリティが高い傾向にあります。

色のコントラスト

accessibility-illustration-4

色のコントラストが低いと、色覚障害や視覚障害の方々にとって深刻な問題になることがあります。テキストと画像のコントラストは、すべてのユーザーが容易に識別できるように明確である必要があります。

内容をシンプルに保つ

サイトに記載するコンテンツは、Flesch reading-ease test(1975年に米国海軍で生み出された文章の可読性に関するテスト)で高くスコアされるのが理想です。可読性が上がることで、読解力が平均より低いユーザーにとって、よりアクセシブルになるからです。

・・・

これらのシンプルで手軽なルールを守り、あなたのサイトに取り入れる事で、インターネットをより多くの人が参加できる場所にすることができます。全てを気にすることは難しくても、できることから少しずつ取り組んでいきましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて