誰もが読めるオウンドメディアを目指す「ウェブアクセシビリティ」とは
貴社のメディアは、目の見えない方や色盲の方、スマホやタブレットでの表示も含め「誰もが読めるメディア」になっていますか？
インターネット上のコンテンツを「誰もが読めるメディア」にするためには、ウェブアクセシビリティに対応する必要があります。
ウェブアクセシビリティと聞いたときに「健常者だけでなく障がいのある人も利用できるサイト」を思い浮かべる人も多いのではないでしょうか。
しかし、近年は「障がい者や高齢者などハンディキャップのある”人”」だけでなく「さまざまな“デバイス”や“どのような状況”でも利用できるサイト」を実現することがウェブアクセシビリティとされています。
ウェブアクセシビリティとは何か
デジタル庁が発行している「ウェブアクセシビリティ導入ガイドブック」では、ウェブアクセシビリティを次のように定義しています。
利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供 されている情報やサービスを利用できること
ここでポイントとなるのは、「障害や年齢」だけでなく、「利用環境」にも触れていることです。
たとえば、自宅でPCを使ってオウンドメディアを読むこともあれば、移動中にスマートフォンを使ってオウンドメディアにアクセスすることもあります。
同じWebサイトを利用しているにも関わらず、PCでアクセスしたときと、スマートフォンでアクセスしたときでWebサイトの表示内容が異なってしまう、または片方のデバイスでは適切に表示されない可能性があります。
このように、ウェブアクセシビリティでは「どんな人でも」「どのような環境（デバイスの種類やユーザーが置かれている状況）でも」分け隔てなく利用できるようにすることが求められています。
ウェブアクセシビリティに対応したオウンドメディアの作り方
ウェブアクセシビリティを担保するためのガイドラインには、国際的な基準と、国内向けの2つがあります。国際的な基準は、ウェブコンテンツ・アクセシビリティガイドライン 2.1というネットの各種規格を策定している団体が定めた規格です。
国内向け基準は「JIS X 8341-3」が作成した「JIS X 8341-3:2016『高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェア及びサービス－ 第3部:ウェブコンテンツ』」という日本工業規格（JIS規格）です。
しかし、これらのガイドラインに記載されているウェブアクセシビリティの基準は膨大なうえ、分かりにくい表現になっています。そこで、本稿ではウェブアクセシビリティのガイドラインの中でも、主たるものを紹介していきます。
文字や文章にかかわる配慮
オウンドメディアにアクセスしても、情報が読めなければ無意味です。どのようなブラウザでも正しく表示されること、どのような環境でも読みやすい見た目、文章であるよう配慮しましょう。
半角カナは使わない
半角カナを使うと、文字化けしてしまう可能性があります。
ひらがなやカタカナ、漢字は全角の文字を使うようにしましょう。
数字やアルファベットは、半角でも文字化けせずに表示されます。
機種依存文は使わない
機種依存文字（使っているデバイスやOSに依存した文字）は、OSやデバイスが異なると、表示される文字が変わってしまいます。
代表的な例として、丸で囲んだ文字や、ローマ数字があります。
フォントサイズは相対単位で指定する
フォントサイズをHTMLやCSSなどで指定する場合は、環境によってフォントサイズが変化するコーディングで指定しましょう。理由は、2つあります。
1）ユーザーの利便性の向上
ブラウザには、フォントサイズを変更する機能があります。
弱視のユーザーや高齢者など小さな文字が読みづらい人は、ブラウザのフォントサイズを変更して利用していることがあります。
Webサイトの作成時にフォントサイズを絶対単位（Webサイト構築時に指定したフォントサイズで必ず表示される）で指定すると、ブラウザでフォントサイズを変更する機能が使えません。
「どのようなユーザーでも読みやすいサイト」にするためには、フォントサイズを相対単位で指定する必要があります。
2）マルチデバイスへの対応
フォントサイズを絶対値で指定すると、デバイスが変わっても文字の大きさが変わらずに、使いにくいサイトになってしまいます。
たとえば、パソコンでサイトを表示したときに読みやすいフォントサイズと、スマートフォンで表示したときに読みやすいフォントサイズは異なります。
画面の大きさが違うのに同じ大きさのフォントが使われていると、文章が読みづらくなることは想像に難くないでしょう。
読みやすい行間で文章を表示する
視覚に問題を抱える人は、行間が狭いと行がくっついて見える場合があります。
文章の可読性を確保するためには、行間を1.5から2倍にするとよいとされています。
色彩にかかわる配慮
オウンドメディアを作るときに、色の使い方は「見た目が素敵なデザイン」にするだけではなく、「誰もが知覚しやすいデザイン」を考えることが大切です。
文字色と背景の組み合わせを考える
文字と背景では色の明暗の差（文字色と背景色のメリハリ）が大きく、コントラストがはっきりしたものを使いましょう。
さらに、イラストや写真などは背景に使わないようにします。
たとえば、弊社のWebサイトでは背景色とかぶらない文字色を使うことで視認性を高めています。
Webページに動画を使用していますが、動画の上に単色のスペースを作って文字を表示することで、文字が動画に埋もれて読みづらくなることを避けています。
色覚の違いに対応する
色覚（色の感じ方）に障がいがある人は、色覚が正常とされている人と色の見え方が異なります。
色覚の障がいには複数のタイプがありますが、色の区別が難しかったり、特定の色が別の色に見えたりします。
たとえば、「青背景の上に緑色の文字」「黄緑色の背景にオレンジ色の文字」などの組み合わせは、色の区別がつきにくい組み合わせです。
色には寒色と暖色という分類があるのですが、わたしたちは暖色同士、寒色同士を混同しやすいのです。
【主な暖色】
赤
オレンジ色
黄色
【主な寒色】
青系の色
青緑
深緑
青紫
そのため、「暖色背景の上には寒色文字」「寒色の背景の上には暖色の文字」で配色することが推奨されています。
画像にかかわる配慮
視覚障がい者など画像が見えない人や、ブラウザの設定で画像を非表示にしている人もいます。
画像を使うときには、「画像だけに情報を載せる」のではなく、画像の補完とする文章を設定しましょう。
画像には代替テキストを設定する
音声読み上げソフトやテキストブラウザを使用している人は、画像で表示された情報を得ることができません。
そのため、画像を掲載するときには代替となるテキストを設定します。
代替テキストの設定の仕方は、HTMLを直接書いているか、または使っているCMSの種類（WordPressなど）によって異なります。
1）HTMLでの書き方
少し専門的な話になりますが、HTMLで画像を表示する（imgタグを使う）ときは、alt属性を使って「画像が何を表現しているか」を書きます。
HTMLの書き方は、次の通りです。
<img src=”画像の保存先のURL” alt=”本を読みながら座っている少女”>
また、情報のない画像の場合は、alt属性を空にしておきます（alt=””）。
なぜならalt属性を設定しないと、音声読み上げソフトは画像のファイル名を読み上げてしまうからです。
2）WordPressを使っている場合
代表的なCMSであるWordPressでは、画像をアップロードした後に「メディアライブラリ」タブにある「代替テキスト」欄に入力します。
「代替テキスト」欄に入力することで、HTMLのimgタグにあるalt属性に設定されます。
Webページの設計にかかわる配慮
適切なタイトルをつける
Webページに表示させるタイトルは、Webページのタブに表示されたり、ブックマーク（お気に入り）や履歴に使われています。
また、音声読み上げソフトの多くはWebページのタイトルを最初に読み上げることで、ユーザーが「このページを読む必要があるか」を判断する材料となります。
タイトルをつけるときのポイントは、3つあります。
1）タイトルへ具体的な内容を簡潔に記載する
Webページのタイトルは「そのページを読む必要があるか」を判断する最初の手がかりになります。
読みたいページであるかどうかを判断するために、内容を具体的に記載したタイトルにしましょう。
また、多くのブラウザでは、タイトルバーやページタブにタイトルを表示しています。そして、あまりに長いタイトルはページタブに表示しきれないことがあります。
「アクセスしたWebページを読むべきか判断できる」「タブなどに表示したときにタイトルを読める」という点をクリアするために、具体的かつ簡潔なタイトルにしましょう。一般的に、タイトルは32文字以下が望ましいとされています。
2）複数のページで同じタイトルを使用しない
1つのサイトで同じタイトルのページが複数あると、どのページに何の情報が掲載されているのか分からなくなってしまいます。
ページタイトルは、1つのサイトで重複しないようにしましょう。
たとえば、ひとつのウェブサイトで、どのページも
「佐藤太郎のページ」と書かれていたら、どこに何があるかがわかりません。「アクセス」「所在地」など、わかりやすいページタイトルを追加しましょう。
3）タイトルには、サイト名を含める
タイトルには、表示しているサイト名も記載します。
たとえば、「お知らせ」というタイトルのページは沢山あります。
タイトルにサイト名を入れることで「どのサイトの”お知らせ”か」が判別できます。
また、タイトルにサイト名を記載するときには、ページタイトル→サイト名の順番にしましょう。
ブラウザのタブなど表示範囲が狭いときには、タイトルの前半が表示されるためです。
たとえば、Yahoo!ニュースでは「ニュースの種類」→「サイト名」の順で記載しています。
キーボードのみで操作できるようにする
上肢にハンディキャップのある人は、マウスで操作できないこともあります。
そのため、キーボードのみで操作できるWebサイトにする必要があります。
たとえば、デジタル庁のサイトをGoogle Chromeで開くと、キーボードのtabキーを押すことで、Webページに表示されているメニューを順番に移動していきます。
ただし、使用するブラウザによって挙動が異なるので注意が必要です。
たとえば、デジタル庁のサイトはGoogle Chromeを使うとtabキーでメニューを順番に辿っていきますが、safariを使用したときにはtabキーでは操作できません。
ウェブアクセシビリティの対応に困ったら
オウンドメディアのウェブアクセシビリティを担保しようとすると、やるべきことが多くて途方に暮れてしまうかもしれません。
そうしたときには、一度にすべての項目を対応するのではなく、少しずつ段階を踏んで対応していきましょう。
そうはいっても何から手をつけていいかわからない、マンパワーが足りない、といったときには、専門家に相談することをおすすめします。
弊社では、ウェブアクセシビリティに対応したオウンドメディアの制作・改修の実績があります。
専門家への相談を検討するときには、弊社も候補に入れていただければ幸いです。
お問い合わせ窓口はこちら
WERITE サービスご案内ページはこちら
この記事が気に入ったらサポートをしてみませんか？