プロデュース・ディレクション

Webアクセシビリティ対策のポイントと向上のための便利ツール

Webサイトを作る際、アクセシビリティについてどれくらい意識していますか?

近年、Webサイトを閲覧する人の層が広がり、デバイスも多様化したことで、「誰にどんなデバイスで利用されてもコンテンツを見やすく、わかりやすくする」というのがWebサイトリニューアルの重要なミッションとなりました。「当社のWebサイトは『JIS X 8341-3:2016のAA』を取得しています」と言えることは、企業のイメージアップにもつながります。

ここでは、Webアクセシビリティ向上のための主要なチェックポイントを解説します。

Webアクセシビリティ

目次

主要なWebアクセシビリティ対策のポイント

どこまで対応するか基準を明確にする

「JIS X 8341-3:2016」では、「A(シングルエー)」「AA(ダブルエー)」」と「AAA(トリプルエー)」」の3段階の達成基準レベルがあります。どこまで対応するのかというのは、最初に企業が決めてWeb制作会社に伝える必要があります。

官公庁のようにアクセシビリティの監査が必要なWebサイトでは、レベルAAまでは必ずとってくださいと言われます。

レベルAAAはそもそも達成するのが非常に難しい基準で、Web制作会社である弊社ITRAが制作したなかでも手掛けたのは1例のみです。達成基準レベルが上がるほど、デザイン上の制限も大きくなるため、バランスのよいレベルを決めておくことが大切です。

画像の代替テキスト

最も代表的なアクセシビリティ対策は、画像をコードで貼り付ける際にalt属性を使い、画像の代替テキストを入れておくことでしょう。

視覚障害のある方々は、Webサイトの文字を読み上げるソフト「スクリーンリーダー」を使っており、音声だけでWebサイトの内容を把握していますが、画像は読み飛ばされてしまいます。そこでalt属性を使って画像の説明文を入れておけば、スクリーンリーダーが読み上げてくれるようになります。

特にボタンのような、重要な役割のあるパーツを画像で作ってしまった場合、alt属性で「送信する」とか「承認する」といった適切な名前をつけることは必須です。

これはアクセシビリティとしてだけではなくSEOとしても重要な項目であり、コーダーの常識ともいえるでしょう。

スクリーンリーダー

文字サイズの変更

Webサイトのヘッダーの部分に「大」「中」「小」と表示があって、全体の文字サイズを選べるようになっている機能を見ることがあると思います。


スマートフォンやタブレットで画面のピンチアウトができるようになってからは、やや使われなくなっている面もありますが、PC用のサイトにはアクセシビリティ対策として重要です。特に、アクセシビリティ調査の対象になっていてAAランクの認定を目指している企業にとっては、あったほうが良いでしょう。

モバイル用のviewport(ビューポート)設定

モバイル用サイトでは、指で拡大したり、縮小したりといった「ピンチアウト」動作を可能にするためのコードを忘れずに設定する必要があります。忘れるとズームされません。

背景色と文字色のコントラスト

色の見え方にも個人差があります。背景色も黒っぽくて文字色も黒っぽい場合など、コントラストが小さいと読みづらくなるので、コントラストを強める必要があります。

Webアクセシビリティの基準「JIS X 8341-3:2016」を準拠とすると、コントラスト比は基本的に4.5対1以上の差が必要とされています。ただしこれは情報として読ませる文字に求められる要件で、デザイン上の装飾やロゴタイプは除外されます。

色で要素の区別をしない

たとえば、入力フォームのエラーを告げる場合、エラーとなった欄が赤い枠で囲まれたりするのを見ることがあると思います。

色の差が見えにくい色弱の人にとっては、色だけでは理解できないことがあるため、必ず「※ここに○○を入力してください」などと文言も添えましょう。

Tabキーで要素を選べるようにする

マウスがなくても、キーボードのTabキーだけで、操作や要素の選択ができるようにすることも必要です。


Googleの検索フォームなどがよい例ですが、Tabキーとenterキーだけで全部の要素を選ぶことができ、今選ばれている要素がどれかをフチ付きで示してくれます。手の不自由な人のための配慮であることはもちろんですが、健常者がマウスがない環境で使うような場合にも便利な機能です。

特にアクセシビリティに注意すべきコンテンツとは?

アクセシビリティ対策として、特にコードに注意しなければいけないコンテンツは次の3つです。

フォーム

入力フォームは、ユーザー自身に操作を求めるところなので、特にどんな人でも使えるようにアクセシビリティに配慮することが大切です。Tabキーでの選択や、視覚障害の方のための入力欄の説明、また選択肢がどこからどこまでといったことも、コードで示しておかなくてはなりません。

音声コンテンツと動画コンテンツ

音声や動画には、聴覚障害のある方のために字幕を用意することが必要です。html 5では、trackタグで簡単に動画に字幕をつけられます。WebVTT形式と呼ばれるテキストを作成し、trackタグで呼び出せば、簡単にテキストを字幕として表示させることができます。

また視覚障害があって動画が見られない人のために、スクリーンリーダーに読み上げさせる動画の説明テキストを用意することも必要です。

見た目を重視しすぎると対応が難しいことも

以前、入力フォームをPC用とスマートフォン用に全く別のデザインで表示させたいという要望に応え、コードを2つ書いた結果、スクリーンリーダーが選択肢を二度読み上げてしまうという問題アリなフォームになった事例があります。


デザインの見た目を重視すると、アクセシビリティは対応しきれないこともあるという失敗例はWeb担当者あるあるかもしれませんね。

Webアクセシビリティチェックに便利なツール

miChecker Ver.2.0

miChecker

Webアクセシビリティを推進する総務省が提供しているアクセシビリティ評価ツール。非常に多機能で、最もよく使われているツールです。「JIS X 8341-3:2016」に準拠したサイトになっているかどうか、さまざまな角度からの検証作業に便利です。

Color tester

Color tester

コントラストチェックのツールです。「JIS X 8341-3:2016」に基づいて、2色のコントラスト比を計算し評価します。画像ファイルをウィンドウにドラッグ&ドロップするだけで画像の背景色と前景色を自動的に推測し、評価を行う機能があります。

スクリーンリーダー「NVDA日本語版」

NVDA日本語版

無料で使えるWindows用の音声読み上げソフトです。元はオーストラリアの非営利コミュニティで開発されたソフトで、日本チームによる日本語版もリリースされています。

Colorblind Web Page Filter

toptal

チェックしたいWebサイトのURLを入力するとフィルターがかかり、P型・D型・A型といったタイプ別の色覚の人の見え方を再現してくれます。

担当者の関心と理解

以上、Webアクセシビリティのチェックによく使われるツールを紹介してきましたが、これらはあくまでツールであり、目視で確認しなければならないポイントも多数あります。

最終的にはアクセシビリティの重要性についてよく理解し、自社のWebサイトを訪れる人を想像しながら判断できるような人がチェックをしなければなりません。企業のWeb担当者も制作スタッフも、共にアクセシビリティへの関心を高めていけたらいいですね。



「Webアクセシビリティ対策を始めたいけど、何から手を付ければいいのかわからない。」

「自分のWebサイトのアクセシビリティ対策に改良点があるか知りたい。」

そんなお悩みをお持ちの方は、ぜひ一度ITRA株式会社にご連絡ください!

Webアクセシビリティのプロが喜んでご相談に乗らさせていただきます。

関連記事

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。

初めて使う人にも使いやすく、セキュリティレベルの高いCMSパッケージ「iCMS」

詳しくはこちら
itra