近年、Web活用やデジタル活用が主流になり、「アクセシビリティ」と言う言葉を耳にする機会も増えてきました。特にコロナ禍では、生活の中でWebやデジタル化された情報に触れる時間が長くなり、より一層アクセシビリティの向上が求められているといえます。
本記事では、広報としてアクセシビリティに取り組むことの重要性や、確認しておきたい7つの項目についてご紹介します。ぜひ取り組みの参考にしてみてください。
アクセシビリティとは?
アクセシビリティとは、生活者が製品やサービスを誰でも等しく利用できることを指します。老若男女、障害の有無、身体能力によらないさまざまな人や、国や地域をはじめとした、OS、ブラウザ、回線速度などのさまざまな環境から等しく利用が可能な状態を目指すものです。
日本では、Webサイトやアプリで提供される情報や機能に関するWebアクセシビリティに関して特に取り組みが進んでいます。2016年に施行された「障害者差別解消法」ではWebアクセシビリティについて、自治体サイトには対応義務が、一般企業サイトには努力義務が制定されています。コーポレートサイトやオウンドメディアなどの制作、運営ではアクセシビリティを意識することが求められます。
具体的に取り組むべき項目は、配色、画像の代替テキスト、文字サイズなどさまざまです。またこれらは、JIS規格によって指針が定められています。
参考:日本産業標準調査会(検索ボックスにて「X8341」を入力)
広報がアクセシビリティに配慮する重要性
広報としてアクセシビリティに配慮することは、さまざまな生活者との関係構築のため重要です。
さまざまな環境による制限の中でも、誰もが同じ情報にアクセスできることで、生活者に自社を知ってもらう機会を増やすことができます。また、ユーザー体験を向上させる効果も見込めます。アクセシビリティはさまざまな生活者へ平等に情報発信を行うことが目的ですが、離脱者を減らして関係構築のチャンスを最大化することができるのです。
広報として情報発信する際には、アクセスする生活者、環境や状況に対して想像力を膨らませることが重要なポイントになります。どんな人がどのような環境から情報にアクセスできるのか、現状でアクセスできないのはどんな人なのか、どのような環境を整えたらアクセスしやすいのか、といった視点を持てるようにしたいですね。
広報がアクセシビリティの観点から確認しておきたい7つの項目
広報としてアクセシビリティに取り組むときに、特に確認しておきたい項目があります。全く新しく導入するものだけではなく、既存のものに手を加えることで対応できるものも多いので、ぜひ参考にしてみてください。
1.ページの内容を表す適切なタイトルがついている
Webサイトのそれぞれのページには、そのページの内容がわかる適切なタイトルをつけましょう。生活者がWebサイトにアクセスするときに、求めている情報が掲載されているかどうかを判断する重要な要素です。タイトルは、ブラウザのタブやお気に入りでも表示されるため、的確なものを設定してください。
音声ブラウザを利用する場合も、まずはページのタイトルを読み上げます。タイトルの設定がないと、生活者はそのページに何が掲載されているのかを判断することができません。ブランクにせずに、必ず内容が把握できるタイトルを設定をするようにしましょう。
2.画像に代替テキストがついている
画像で表現されているコンテンツは、画像の代わりになるテキスト情報を用意しましょう。代替テキストを設定することで、音声ブラウザやテキストブラウザを利用している生活者にもどのような画像が利用されているのか、情報を伝えることができます。
代替テキストを設定するときには3つの注意点があります。
2-1.画像の場合と代替テキストの場合で情報ギャップがない
代替テキストは、その名の通り画像を「代替」する役割を果たします。そのため、画像が表示されている場合と、代替テキストが表示されている場合、どちらの場合でも提供される情報は同一になるようにしましょう。代替テキストを設定するときには、画像から得られる情報を的確に示すようにしてください。
2-2.説明不要の画像には代替テキストは空欄にする
サイトの装飾のために利用している画像であり、掲載されている情報とは無関係の画像の場合、代替テキストは設定する必要はありません。音声ブラウザやテキストブラウザでは、代替テキストを全て読み上げてしまったり、全てテキストとして表示されてしまったりするため、サイトに掲載されている情報と関係のない画像に代替テキストを設定していると、不要な情報が紛れ込んでしまうのです。
説明不要の画像は、代替テキストを空欄で設定するようにしてください。
2-3.情報が複雑な補足情報を追加する
地図やグラフなど複雑な情報が含まれる画像は、代替テキストだけで詳細な情報を取得することは難しいです。代替テキスト以外に補足情報を掲載したり、詳しく解説する別ページを設けたり、テキスト情報の量を増やすようにしましょう。
例えば都庁への交通案内(※1)の場合、「認定NPO法人ことばの道案内」により文字による案内ページ(※2)が作成されています。
参考1:都庁への交通案内|東京都
参考2:東京都庁 第一庁舎の道案内一覧ページ
3.色のコントラスト比がついている
Webサイトの色味やコントラストも見やすさに影響を与えます。WCAG(Web Content Accessibility Guidelines)では、具体的なコントラスト比について定義されています。
背景色と文字色のコントラスト比は最低、4.5:1以上。14ポイント、18ポイントの太文字での大きな文字の場合は3:1のコントラスト比が求められています。コントラスト比を上げるためにはアンダーラインの活用を検討することも一案です。
コントラスト比は「色のコントラストチェッカー」を始めとするツールからも確認できます。
4.文字サイズの変更機能がついている
文字の読みやすさは生活者によって違います。サイトの文字サイズは任意で変更ができるようにしましょう。それぞれにとって快適な文字サイズに変更できれば、ユーザー体験を向上することにも繋がります。
変更機能をつけた場合は、複数のブラウザで見やすさを確認するようにします。ブラウザによって文字の拡大率や縮小率は異なるので、必ず目視で確認をして調整を行いましょう。
5.テキストリンクだけでリンク先の内容がわかる
テキストリンクを使用する場合は、リンクのテキスト部分だけで遷移先に掲載されている情報がどんな内容かを判断できるようにしましょう。
「こちら」や「リンク」などのテキストリンクを利用されているシーンも多いですが、これらは避ける方がよいでしょう。特に音声ブラウザを利用する場合は、テキストリンク部分だけを読み上げた際、どんなページへのリンクなのかがわからなくなってしまうからです。
テキストリンクは、遷移先のページタイトルと同じテキストにすることが推奨されます。音声ブラウザでは、まずページのタイトルが読み上げられます。そのため、リンクテキストとタイトルが同じであれば、リンク先に無事に遷移できたことが容易に判断できるようになります。
6.見出しなどを用いて文章を構造化している
ページ内のテキスト情報はHTMLを用いて構造化します。通常ブラウザであればページのレイアウトや文字サイズから構造を読み取ることができますが、視覚情報を得られず音声ブラウザなどを利用する場合は困難です。
音声ブラウザでは、見出し部分の読み上げ速度をゆっくりにしたり、見出しだけを読み上げたりなど、HTMLによって構造化された情報を効果的に伝える機能があります。
7.半角カタカナや機種依存文字を使用していない
生活者がどのようなOSやブラウザページを利用していても、内容が正しく表示される状態にするために、半角カタカナや機種既存文字の使用は避けましょう。半角カタカナや機種依存文字はブラウザ上で文字化けする可能性があるためです。
機種依存文字でないものでも、音声ブラウザでは読み上げられないもの(※3)もあります。また、数字も小数点や位取りの点を含む場合は、半角表記をしないと意図の通りに読み上げられません。
意図している数字に読み上げられるように、数字はできるだけ半角を利用するのが好ましいといえるでしょう。
参考3:総務省|東海総合通信局|その4 音声読み上げに配慮したテキスト表記
アクセシビリティに配慮された取り組みの例
アクセシビリティに配慮された取り組みは、製品や企業のホームページなどさまざまなところで行われています。具体例を確認していきましょう。
例1.iPhone音声コントロール
Apple社でタッチ操作を行うiPhone、iPad、iPod touchには、「音声コントロール」という機能が搭載されています。
タッチして行う操作を音声で指定することで、同様の操作が可能です。例えば、「タップ カレンダー」と言うとカレンダーアプリをひらくことができます。
参考:iPhone、iPad、iPod touch で音声コントロールを使う
例2.PlayStation®5・PlayStation®4
PlayStation®5・PlayStation®4は細かなアクセシビリティの設定が可能です。
特にPlayStation®4用ソフトウェア『The Last of Us Part II』では、視覚、聴覚、運動機能をサポートする60種類以上のアクセシビリティ設定が搭載されています。文字の色やサイズ、背景色をつけることでコントラストをつけるなど可読性をあげる設定や、本来なら音のみ、映像のみで伝えられる情報を、コントローラーなどの振動など五感の別の機能でも感じることができる設定が可能です。さらに、本来であればコントローラーボタンの連打といった素早い対応が必要になる場面でも、ボタンの長押しで対応できるなどの機能もあり、より多くの人が楽しめるようになっているといえるでしょう。
参考:ソニーグループポータル | アクセシビリティ | Accessible Products and Services
例3.freeeアクセシビリティー・ガイドライン
freeeでは、サービス全体を通じてアクセシビリティ改善に取り組んでいます。国際的なアクセシビリティガイドラインであるWCAG(Web Content Accessibility Guidelines)を基準に、「freeeアクセシビリティー・ガイドライン」を独自に策定しています。freeeだけではなくWeb開発全般において活用できるように一般公開されているので、参考にしてみるのをおすすめします。
参考:freeeアクセシビリティー・ガイドラインについて — freeeアクセシビリティー・ガイドライン Ver. 202107.0 ドキュメント
アクセシビリティはできることから始めることが大切
本記事では、広報としてアクセシビリティの観点で確認したい項目や事例について紹介してきました。大掛かりな変更を伴うものもありますが、今すぐにでも対応できるものもたくさんあったのではないでしょうか。
アクセシビリティの本質は、障害のある方だけではなく、誰にとっても使いやすいものを目指すことです。アクセシビリティへの対応は、結果として、自社の可能性を広げることにも繋がります。まずは、アクセシビリティへの理解を深め、できることから始めてみることが大切です。
本記事を参考に、自社のアクセシビリティ向上のためにできることはないか、検討してみてはいかがでしょうか。
アクセシビリティに関するQ&A
PR TIMESのご利用を希望される方は、以下より企業登録申請をお願いいたします。登録申請方法と料金プランをあわせてご確認ください。
PR TIMESの企業登録申請をするPR TIMESをご利用希望の方はこちら企業登録申請をする