ホーム > ホームページ担当初心者講座 > ウェブアクセシビリティ

ウェブアクセシビリティ
~注意点を具体例とともに紹介します。~

概要

「ウェブアクセシビリティ」とは、「高齢者や障害者など心身の機能に制約のある人でも、年齢的・身体的条件に関わらず、ウェブで提供されている情報にアクセスし利用できること」を意味します。一言で言うと「誰もが利用しやすいホームページ」です。


誰もが利用しやすいホームページにするには

誰もが利用しやすいホームページにするには健常者はもちろん、視力が悪いかた、弱視者、全く目が見えないかた、手足が不自由なかたなどを配慮したコンテンツを作成する必要があります。また、パソコンのサイズや、文字の大きさ、スマートフォンからのアクセス、回線の速度や、利用しているソフトやバージョンなど、ひとりひとりの環境が違うことを配慮し、誰にとっても利用できるよう配慮する必要があります。


アクセシビリティへの取り組み

近年、自治体では積極的にアクセシビリティを考慮したホームページ制作に取り組んでいます。


「ウェブアクセシビリティ」にはJIS(日本工業規格)が定めた基準があり、当コンテンツではJIS X8341-3:2010に則り「等級AA(ダブルエー)」を準拠する内容として記載しています。この「等級AA(ダブルエー)」は比較的厳しい内容となっています。もう少し易しいもので「等級A(シングルエー)」もあります。


一般の企業のホームページではこれから記載していることを必ずしもすべて達成する必要はありませんが、できるかぎり達成・近づけることで「誰もが利用しやすいホームページ」に近づけることができます。

以降にホームページの記事作成・掲載において、ウェブアクセシビリティ等級AAに準拠する基準や、読み上げソフトを配慮した注意点、その他利用しやすいホームページにするための留意事項を記載します。


コントラスト

コントラストとは色の対比のことです。ここでは文字がよみやすいかどうかということが重要となります。

文字とその背景のコントラスト比は「等級AA」の場合は4.5以上:1、「等級A」の場合は3以上:1にします。
※ただし、ロゴまたはブランド名の一部である文字は対象外です。


コントラストが大きいかどうかは白黒印刷や目を細めてみるとわかります。
コントラスト比を明確に数値化する場合は「カラー・コントラスト・アナライザー」というフリーソフトで調べる事ができます。


文字の色

青文字紫文字はリンクを連想させます。使用は控えましょう。

上記コントラストと関連して、白背景の場所で黄色文字もたいへん読みにくいものです。

コントラスト比を調べるまでもなく読みづらくなる色は控えましょう。


見出し

見出しは主題または目的を説明します。


理解可能なコンテンツ作成

情報及びユーザインターフェースの操作は理解可能でなければなりません。使いやすく、わかりやすくする必要があります。
テキストのコンテンツを読みやすく理解可能にする必要があります。
ウェブページの表示及び動作を予測可能にします。例えばリンクを押したらどうなるのか、どこに遷移されるのか事前にわかるようにします。
※具体例は次項の「リンク」参照


リンク

※以下の青文字はリンクイメージであり実際にはリンクしていません。

リンクの文字

リンクされている部分だけでリンク先の内容がわかるよう、リンク先のタイトルをリンク内に含めます。読み上げソフトによってはリンク部分のみ読み上げる機能があり、それに対応するためです。


例1)「アクセシビリティ」ページへのリンクを作成するとき

悪い例

くわしくはこちらをご覧ください

アクセシビリティはこちら

http://www.kbs-web.com/solution/item/hpinfo/accessibility.html

※リンクされている部分に「アクセシビリティ」というワードが入っていない


良い例

くわしくはアクセシビリティでご確認ください。
アクセシビリティについて
アクセシビリティはこちら

※リンクされている部分に「アクセシビリティ」というワードが入っている


例2)PDFファイルへリンクさせるとき

悪い例

PDFファイル
添付ファイル


良い例

アクセシビリティ(PDF)


隣接するリンク

2つのリンクが連続している場合、上肢が不自由な人は意図した方のリンクをクリックしづらく、健常者でもリンクが2つあることに気付きにくいため、わかりやすく記述します。

悪い例

イベントの概要について(去年のイベントの写真一覧)


良い例

イベントの概要について (去年のイベントの写真一覧)


イベントの概要について
(去年のイベントの写真一覧)


リンクの文字数

リンク対象文字が、1文字や2文字だとクリック対象として小さすぎ、上肢の不自由な人はマウスでクリックしづらいため避けましょう。
2文字のタイトルには「について」をつけることを推奨します。

悪い例

予算



良い例

予算について



機種依存文字(環境依存文字)を使用しない

機種依存文字を使用すると、文字化けが起きたり、文字が表示されなかったり、読み上げで読み上げられない場合があります。


環境依存か確認するには文字の変換で確認できます。
[環境依存]と書かれている文字が該当します。

例) ①

機種依存


代表的な機種依存文字の例


ただし、htmlの文字コードがUTF-8の場合は一般的な機種依存が使えます。あなたのサイトの文字コードがなんなのかはサイト管理者または業者に確認しましょう。

不明な場合や、文字コードが混ざっている場合は機種依存を使わない方がいいでしょう。どうしても使わなければならないときは画像にして表示させましょう。


専門用語について

専門用語はできるだけ使わないようにします。どうしても使用しなければならない場合は、注釈を付けるなどの配慮をしましょう。


固有名詞

固有名詞については変更してはいけませんので、ウェブアクセシビリティや警告を無視してかまいません。


読み上げについて

弱視者の中には読み上げソフトを利用してホームページを利用している方もいます。ただし、読み上げソフトでも一部正しく読み上げられない語句があります。できるだけ正しく伝えられるように、以下の点を注意して記事を作成することを推奨します。


読み上げの基本

漢字にできる箇所は、記号を使わず漢字を使う

悪い例 2015/01/01(木)

良い例 2015年1月1日木曜日


大部分の記号は読まれないものと考えましょう。


英数は半角を使い、全角は使わない

悪い例 APPLE 1,000

良い例 APPLE 1,000


全角にすると単語ではなく、アルファベットひとつひとつ読まれる場合があります。


慣れていないと全角半角の見分けは難しいものです。パソコン画面の右下に「A」または「あ」という文字がありますでしょうか。これが全角半角の見分けになります。「A」または「あ」の部分で→クリックすることで変更したり、キーボード左上の「半角/全角」キーで変更します。


数字に付随する単位はカタカナにする


5キロメートル
5立方メートル
5キログラム
5リットル

単位を英語の略称にするとアルファベットとして読まれる場合があります。


漢字

複数の読み方がある漢字は特に注意が必要です。
「方」に関してはひらがなで「ほう」、「かた」と表記することを推奨します。


同音異義語

「みにくい」は「見にくい」と「醜い」の2つの読み方があります。
この場合「見にくい」は「見づらい」「見えにくい」、「醜い」は「美しくない」といった表記にし、誤解を招かないように配慮する必要があります。


文中の改行

読み上げブラウザでは改行箇所、スペースで休止します。(自動折り返しは含みません)

利用者によっては文字のサイズを変更していることがありますので、コンテンツ作成者とは想定していない個所で改行される場合があります。
基本的には「。」のあとのみ改行することを推奨します。


スペース

スペースを入れると一単語としてとらえられなくなります。

特に、表のタイトルにある熟語に対して、バランスをとるために熟語の間にスペースを入れるケースをよく見かけます。


悪い例 戸 籍 (「と せき」と読まれます)

良い例 戸籍  (「こせき」を読まれます)


注釈・説明

()「かっこ」「かっことじ」は読まれません。()内の文章は読まれます。

そのため「かっこ」が読まれなくても意味の通じる文章にするか、注釈を別途記載しましょう。


画像化された文字

基本的に画像化された文字ではなくテキストを用いて情報を伝えなければなりません。
※ロゴまたはブランド名の一部である文字は対象外です。
※写真の中に文字が写りこんでいる場合はこれに含まれません。
※テキスト化が困難な場合はこれに含まれません。例:チラシ、パンフレットなど


代替テキスト(alt)

基本的に「代替テキスト(alt)」には対象の画像の説明を記載します。

代替テキストは普段は表示されませんが、画像がアップロードされていないとき、画像を非表示に設定しているときに表示され、読み上げでは設定した文字が読み上げられます。


文字列を画像で表示している場合

文字列と同じ内容を入力します。


例)

株式会社ビジネスサービス

代替テキスト:株式会社ビジネスサービス


画像にある文字全てを必ずしも入力する必要はありません。読み上げられたとき内容が伝わるものにしましょう。


不要な場合

読み上げブラウザで読まれる必要がない場合はaltに説明はいりません。


写真の説明・タイトルがテキストで記載されているとき

例)


りんご


代替テキストに「りんご」と入力すると、読み上げの際「りんご りんご」と2回読まれます。

はじめに代替テキストの「りんご」が読まれ、次に写真の下の「りんご」が読まれるためです。


写真の説明やタイトルがテキストとして記載されている際は、二重で読まれることを避けるために代替テキストの入力は不要となります。


画像がアイコンや線など視覚的な補助であるとき

例)

代替テキストについて


代替テキストに「星」と入力すると、「星 代替テキストについて」と読まれます。

「星」は文脈に関係ないため、混乱を招いてしまいます。


視覚的な補助画像に対しては代替テキストは不要となります。


映像コンテンツ

音声ガイドと字幕が必要です。


表の読み上げ順

表は左上からその行を読み、最後の列まで読むと次の行を読んでいきます。

1 2 3
4 5 6
7 8 9


セルの結合

セルを結合しているときは注意が必要です。
特に縦に結合しているときは読み上げ順が作成者の意図的でない場合があります。セルを結合する際は読み上げでも意味が伝わるように配慮してください。

1 2 3 4 5
6 7
8 9 10 11
12 13 14 15
16 17 18
19 20 21


上記は読み上げ順の例としてわざと複雑にセルを結合していますが、セルの結合によって健常者にとっても、わかりにくい表になってしまう場合があります。セルを結合する際は気を付けましょう。


スマートフォンでの表

パソコン版のサイトがそのままスマートフォン版になる際は表の横幅に注意してください。文字がすべて縦になったり、画面の右側にはみ出たりして非常に読みづらくなる場合があります。

可能であれば表を使わない表現にするか、列数を4列程度に抑えましょう。


最後に

アクセシビリティとはだれもが利用しやすいことです。そうはいっても実際にホームページを作る人は自分自身でありどうしても自分目線になってしまいます。


アクセシビリティを意識するにはこのコンテンツに記載していることを知識として覚え、意識し実践したり、他の人の意見を聞いてわかりやすいか確認することが大切になります。


上部へ