アクセシビリティ重視のウェブ制作

チャコウェブ

株式会社CyberCats

受付時間:9:00~17:00(月曜日~金曜日)

中小企業のホームページ制作で事業の価値を引き出します。良いホームページの作り方や運営の方法、集客に役立つヒントをお届けします。

その資料、本当に見やすいですか?アクセシビリティを意識した、すべての人に伝わる資料作成7つのポイント

その資料、本当に見やすいですか?アクセシビリティを意識した、すべての人に伝わる資料作成7つのポイント

資料は、ビジネスシーンや教育現場など、あらゆる場面で活用されています。
それほどよく作られ、使われている資料、あなたは本当に伝わりやすく見やすく作成できていますか?

実は、アクセシビリティに対応していない資料は「あらゆる人」が見やすいとは言えません。
アクセシビリティとは、状況や環境によらず、すべての人が等しく情報にアクセスできるようにするための取り組みです。

アクセシビリティに対応していないと、「読んでもらえない」「伝えたいことが伝わらない」という、以下のようなことが起こりえます。

● 強調したい箇所を色で表現したのに、見分けにくい色遣いのために大事なところで反応が鈍かった
● テキストが小さすぎて読み手が疲れてしまい、頑張って作った資料がしっかりと読んでもらえなかった
● キレイにしたくて色のコントラストを薄くしたら、文字が読めないと言われてしまった

アクセシビリティ対応と聞くと「少数者のための特別対応」と思われるかもしれません。
しかし、そうではないのです。

例えば超高齢社会の今は、3617万人が高齢者。
4人に1人の割合です。
もはやマイノリティとは言えない状況ですよね。
引用元:高齢者の人口 – 総務省統計局

また、「日本人男性の20人に1人は色覚特性がある」とされています。
引用元:第1回 色覚の原理と色盲のメカニズム – 国立遺伝学研究所

クラスに1人は色覚特性の人がいると考えると、けっこう多いと思いませんか?

多様化が進み、さまざまな背景を持つ人が資料を目にする機会が増えています。
アクセシビリティに対応した「しっかり伝わる」資料作りをしませんか?

そこで、ウェブアクセシビリティを重視したホームページ制作が得意なチャコウェブが、みんなに伝わる、わかりやすい資料作成のポイントをお伝えします。

今回の記事はアドビの「みんなの資料作成」企画に参加しています。
Adobe Acrobat オンラインツールをご紹介しながら、より効率的にアクセシビリティに配慮した資料を作成するアイデアを解説します。

 

アクセシビリティとは?障がいの有無に関係なく、すべての人が同じ情報に触れるための配慮

アクセシビリティとは「コンテンツを誰にとっても使いやすくする配慮」のこと。

「アクセシビリティ=障がい者への配慮」と誤解されやすいのですが、適切ではありません。

障がいの有無だけでなく、年齢、性別、居住地域、デバイスの違いなど、さまざまなことに配慮した上で、「すべての人が同じ情報に触れられるようにすること」が求められます。

あなたにもこんな時はありませんか?

  • たまたまメガネを忘れた時
  • 急いで調べものをしている時
  • 電車内で揺られながら不安定な状態でスマホを操作する時
  • 一時的な怪我で手が不自由な時

アクセシビリティに対応していれば、こういう時も見やすくて使いやすいコンテンツとして喜ばれます。
アクセシビリティは「一部の人のため」ではなく「すべての人のため」の対応なのです。

 

アクセシビリティに対応する4つのメリット

「わざわざアクセシビリティ対応にしなくても……」
「なんだか面倒そう……」
と思われるかもしれません。

アクセシビリティに対応すると、どんな良いことがあるのでしょうか?

 

1. 情報を届ける対象ユーザーが増える

アクセシビリティに対応すると、そのコンテンツを使う対象ユーザーの幅がぐっと広がります。
なぜなら、今までアクセス対象とされていなかったユーザーが「見える」「使える」「聞こえる」ようになるからです。

資料コンテンツを、これまでより多くの人に届けられるようになることで、認知拡大の機会が増えます。
新しいユーザーを獲得するチャンスとも考えられますよね。
特定の人だけが見て使える資料は、その分対象ユーザーを狭めてしまいます。

高齢化が加速し、多様性ある社会の中では、あらゆる人がアクセスできるコンテンツのほうがメリットが大きくなるのは間違いありません。

 

2. ユーザーエクスペリエンスが向上する

ユーザーエクスペリエンス(user experience)とは、製品やサービスの利用を通じて得られる「体験」のことです。

アクセシビリティに対応したコンテンツは、ハンディキャップの有無に関係なく、すべての人のユーザーエクスペリエンスの向上につながります。
アクセシビリティ自体が、すべての人が使いやすく見やすいものにするための配慮だからです。

ユーザーエクスペリエンスが向上することで、製品やサービスへの理解や満足度を高められます。
優良顧客の獲得につながる可能性もあるはずです。

わかりやすい資料作りの基本になるため、資料作成の能力もアップできます!

 

3. 「合理的配慮の提供」義務化への対応ができる

『障害者差別解消法』の法改正により、2024年4月1日から民間企業にも「合理的配慮の提供」が義務化されます。
引用元:障害者差別解消法に基づく基本方針の改定

合理的配慮の提供とは、障がいのある人が、障がいのない人と同じようにサービスを受けたり行動したりできるように、障がいの特性に応じて対応することをいいます。
民間事業者では「努力義務」から「義務」に変更され、障がいのある人から支援を求められた時には、環境を整えて利用しやすくすることが求められます。

アメリカやEUをはじめとして、各国でアクセシビリティ対応がされていない企業への訴訟が増えています。
「アメリカでは、2022年のアクセシビリティに関する訴訟が3000件を超えた」とされています。
日本でも今後このような訴訟が起こる可能性は十分にあります。
法的リスクの回避としても対応は求められるでしょう。
引用元:Website accessibility lawsuit filings in 2022 set a new record

 

4. 企業の社会貢献につながる

すべての人に等しく情報を提供する取り組みは、企業の社会貢献となります。
アクセシビリティ対応は、企業のイメージアップや信頼性の向上につながる取り組みです。

良いサービスや商品を届ける中の取り組みの一環として、アクセシビリティを意識してみてはいかがでしょうか。

 

アクセシビリティ対応によってどんな人に見やすく伝わる資料になるの?

 

視覚障がい

視覚障がいとは、見ることが不自由、もしくは不可能な状態のことです。

盲:まったく見えない、またはほとんど見えない状態
弱視:メガネやコンタクトレンズを使っても十分でない状態

日本眼科医会による推定値では、視覚障がい者は約164万人いるとされています。
引用元:日本における 視覚障害の社会的コスト – 公益社団法人 日本眼科医会

「盲」の人は、読み上げソフトや点字ディスプレイで情報にアクセスします。
「弱視」の人は、文字を大きく拡大して読みます。

そのため、視覚障がいがある方のアクセシビリティに配慮するには、以下のような対応が必要です。

  • スクリーンリーダーで情報が読み込めるようにする
  • 読みやすいフォントを選ぶ
  • 200%まで拡大できるようにする

 

色覚特性(色覚多様性)

色覚特性とは、色の見え方が違う特性がある状態です。
色盲、色弱、色覚異常などといった言葉を聞いたことがあるかもしれません。
最近では、「色覚特性」や「色覚多様性」という言葉が使われることが一般的になっています。

P型:赤周辺の色が見分けにくい
D型:緑周辺の色が見分けにくい
T型:青周辺の色が見分けにくい

日本では約300万人いるとされ、男性では20人に1人、女性では500人に1人の割合と言われています。
加齢によっても起こります。
引用元:第1回 色覚の原理と色盲のメカニズム – 国立遺伝学研究所

赤と緑の区別がしにくい、水色とピンクの区別がしにくいなどの特徴があります。

そのため、情報伝達を色分けに頼らない、コントラスト比の高い資料を作る必要があります。

色覚特性を持つ人が見分けにくい色の組み合わせ(元の色)

色覚特性を持つ人が見分けにくい色の組み合わせ紹介(元の色)

P型色覚の見え方シミュレーション

色覚特性を持つ人が見分けにくい色の組み合わせ、P型色覚の見え方シミュレーション

D型色覚の見え方シミュレーション

色覚特性を持つ人が見分けにくい色の組み合わせ、D型色覚の見え方シミュレーション

T型色覚の見え方シミュレーション

色覚特性を持つ人が見分けにくい色の組み合わせ、T型色覚の見え方シミュレーション

 

注意障がいや学習障がい

注意障がいとは「高次脳機能障害」の一つで、脳に損傷が起きて高度な脳の動きに障がいが起きている状態です。
症状を発見しにくいため「見えない障がい」とも言われます。

  • 注意力が続かなくなる
  • 見つけたいものを発見しづらくなる
  • 考えや注意を切り替えるのが難しくなる
  • 同時に何かをすることが難しくなる

など。

厚生労働省による平成28年の調査で、医師から「高次脳機能障害」と診断された数は32万人とされています。
引用元:全国の高次脳機能障害者数はどれくらいでしょうか? – 国立障害者リハビリテーションセンター

また、学習障がいとは、全般的な知的発達に遅れはないものの、「聞く」「話す」「読む」「書く」「計算・推論する」能力に困難が生じる状態です。
こちらも症状を判別しにくい障がいと言われています。

読字障がい(ディスレクシア):読むことにおける障がい
書字表出障がい(ディスグラフィア):書くことにおける障がい
算数障がい(ディスカリキュリア):計算や推論することにおける障がい

学習障がいを持つ日本人の数は正確にまだわかっていません。
ですが、通常の学級に在籍しながら、一部の授業にて特別な指導を受ける「通級」を利用する子どもの割合は、年々増加傾向にあるとされています。
参考:【最新統計】通級に通う発達障害児(自閉症・ADHD・学習障害)の人数 – 発達障害支援チャンネル
小中学生の8.8%に発達障害の可能性 文科省調査 – 日本経済新聞

学習障がいのある方に配慮するためには、複雑な構成を避け、できるだけシンプルで簡潔な資料にし、読みやすいフォントを選ぶことが大切です。

 

高齢者

年齢を重ねると、少なからず認知能力や視力の低下などが起こります。
冒頭でも述べたように、超高齢社会の日本では4人に1人は高齢者と、存在感は大きいといえます。
引用元:高齢者の人口 – 総務省統計局

高齢者にわかりやすい資料やコンテンツ作りは、今後ますます需要が出てくるでしょう。

情報を詰め込み過ぎないようにしたり、大きめの文字にしたりと、認知しやすい資料作りをします。

 

物理的に制限がある人(一時的な制限のある人)

身体障がいや運動障がい、環境、物理的に制限がある状態です。
身体的な障がいは、怪我や病気などでも生じます。
つまり「すべての人」が一時的にであっても障がいが起きる可能性を持っています。

  • 眼科手術をしていて一時的に視覚が不自由な状態
  • 怪我をして手を使えない状態
  • 普段使っているデバイスとは違う環境でコンテンツにアクセスしている状態

このような方に配慮するためには、スクリーンリーダーで読み込みやすいテキストにしたり、リンクボタンの周りはスペースを十分にとったり、簡単に操作できるような資料にします。

 

アクセシビリティを意識した資料作成のポイント7選

アクセシビリティに対応した資料は「シンプルにする」を意識して作成します。
目視なら「ぱっと見てわかる」、読み上げ機能を使うなら「順序良く理解しやすく」がポイントです。

パワーポイントで資料を作成することはよくあります。
しかし、環境に左右されず閲覧できる電子文書としてはPDFがもっとも一般的です。
パワーポイントで作った資料をPDFに変換するには、Adobe Acrobat オンラインツールを利用するのが便利です。
● PowerPointファイルをPDFに変換

また、作成した資料が予想以上に重たいファイルになっていることがあります。
そんな時は、AcrobatオンラインツールでPDFの圧縮をして軽量化しましょう。
● PDFのファイルサイズを圧縮

 

1. わかりやすい構造にしよう

構造がわかりやすい資料にするために「ナビゲーション」や「見出しの段階の深さ」を調整します。

 

ナビゲーション(目次、ページ、見出しなど)

ナビゲーションは、以下の点を意識してください。

  • 「目次」を付けて資料の全体像がわかるようにする
  • 「ページ番号」を振って、現在位置を把握しやすく、共有しやすくする
  • 「見出し」をつけて、情報をぱっと見て理解できるようにする

 

見出しは2段階の深さまで

見出しの入れ子構造を深くしていくと理解が追い付かないため、2段階までと決めてしまいましょう。

  • 大見出し
  • 小見出し

 

2. 読み上げ機能に対応しよう

視覚に障がいがある人は、資料を聴いたり、手で触れて読みます。
目で見る代わりに、音声で読み上げる、点字プリンタで打ち出すのです。

そのため、スクリーンリーダーなどの支援ソフトウェアを使い、音声で読み上げられるように対応します。

WordのほうがPDFよりもスクリーンリーダーの読み上げで理解しやすいと言われています。
この場合には、PDFからWordに変換して渡すのがおすすめです。
PDFをWordに変換するオンラインツールならすぐに対応できるので、PDFとWordを両方渡してもよいでしょう。
● PDFをWordに変換

また、スマホやタブレットの読み上げ機能を使い、電子書籍をオーディオブックのように「聞く」人がいます。

料理中や運転中など、「ながら聞き」に適しています。
資料も読み上げに対応すると喜ばれるかもしれません。

 

画像やグラフには代替テキストを設定する

画像やグラフには、その内容を説明する代替テキスト(Alt)を書きます。
代替テキスト(Alt)を書くことで、音声ソフトが画像やグラフの内容を読み上げてくれるからです。

文字情報はすべて画像にするのではなく、テキストで作成するように心がけます。
画像にする場合は、代替テキスト(Alt)に内容をそのまま書き込みましょう。

Wordで資料を作っている場合は、画像を選び右クリック、「代替テキストを表示」を選択します。

Wordで代替テキストを設定したい画像を選び右クリック。代替テキストを選択する

代替テキストの入力欄が右側に出てくるので、画像の説明テキストを入力して完了です。

「代替テキストを生成する」で自動でテキスト生成もできますが、精度はまだ低めです。

画像の説明テキストを入力

イメージ画像や装飾の画像には代替テキスト(Alt)は必要ありません。

 

3. 1ページあたりの情報量は少なくシンプルに

資料の1ページで伝える内容は、できるだけ1つに絞り、見出しに一番伝えたいことを書きます。

注意障がいのある方や高齢者、集中力が続かない環境にある人にとって、ごちゃごちゃ情報が詰め込まれた資料は理解が難しくなります。

見出しで一番伝えたい内容を書こう。言いたいことを一つに絞ると、伝わりやすくなります。「1ページ、1メッセージ」を試してみよう

 

4. だれもが見やすい配色にする

色分けは「わかりやすくする」イメージがあります。
しかし、色では情報を受け取りにくい人がいることを忘れてはいけません。
棒グラフを例に見てみましょう。

色分けの良くない例:水色と淡いピンク色で作られた棒グラフ

上の棒グラフは、P型色覚の人には以下の画像のように見えます。
「チームA」と「チームB」の識別がしにくいグラフになってしまいました。

P型色覚のシミュレーション。水色と淡いピンク色の棒グラフはどちらもグレーでほぼ見分けがつかない。

識別しやすくするために、区別がつきにくい色の組み合わせを避けましょう。
以下の良い例のように、色の濃淡で区別できるようにすると効果的です。

色分けの良い例:濃い青色とグレーで、色覚特性のある人でも見分けやすい

表が多い資料の場合にはExelのほうがアクセシブルな資料として適していることもあります。
Acrobat オンラインツールを利用してPDFからExcelに変換してから渡すことも検討してみましょう。
● PDFをExcelに変換

アクセシブルな対応をする際に、PDFを分割したり結合させたりして編集することがあるかもしれません。
Acrobat オンラインツールでは、PDFの分割結合もできます。

 

5. くっきりコントラストでメリハリをつける

文字と背景のコントラストをはっきりさせます。
日本産業規格「JIS X 8341-3:2010」では、テキストと背景色のコントラスト比を「4.5対1」以上とするように推奨しています。
引用元:高齢者・障害者配慮設計指針-視覚表示物-日本語文字の最小可読文字サイズ推定方法
色覚特性のある人は、コントラストが薄いと判別できません。

コントラスト比が低い例と高い例

 

6. 癖のないシンプルなフォントを選ぶ

フォントは「可読性」「視認性」「判読性」に影響します。
アクセシビリティを重視したフォント選びのポイントは「癖のない」「シンプル」なものです。

可読性:読みやすさ。読み切りやすいかどうか
視認性:ぱっと見たときの認識しやすさ。文字をすぐに認識できるかどうか
判読性:誤読しにくさ。似た文字を読み分け、読み間違いをせずに読めるかどうか

文字の太さが一定でない、装飾が多い、塗りが多く潰れて見えるフォントは、ぱっと見で読みにくくなります。
視覚過敏の人には、はらいやハネの部分が刺激となり読むのが困難なこともあります。
また、白内障や弱視では、線の細い部分が光に埋もれてしまい、文字の形を認識しにくくなります。

フォント選びの良くない例。文字の線の太さが異なる、つぶれて見える文字などは読みにくい

アクセシブルな資料では、明朝よりもゴシックフォントのほうが適しているといわれます。
文字の太さが一定、装飾がない、クリアでなめらかなフォントがおすすめです。

フォント選びの良い例:文字の太さが一定で癖がなく、クリアに読める

 

7. 文字サイズは大きめにして改行し、行間を広く取る

文字のサイズは大きめが鉄則です。

小さい文字は、障がいのない人にとっても読みにくいもの。
個人差がありますが、50代では12ptが最小可読文字サイズとされています。
また、行間を広く取ることで可読性が向上します。

 

オススメの文字サイズ

見出し:16pt以上(21px)
文字サイズ:12pt以上(16px)
行間:160~180%

引用元:幼児・高齢者も読みやすい!年齢別の最小可読文字サイズを知ろう!
70~80代の人が読みやすい文字の大きさは?

また、改行がない文章は読みにくく、読み疲れが起こったり読み飛ばしてしまったりします。

文字サイズ、改行、行間の良くない例

大きめの文字サイズで行間を広く取りましょう。
改行を入れ、意味のまとまりで段落を作ると読みやすく理解が進みます。

文字サイズ、改行、行間の良い例

 

【PR】Adobe Acrobat オンラインツールの便利な機能ご紹介

アクセシビリティ対応は、「これをやれば絶対大丈夫!」といった1つの正解があるわけではありません。
さまざまな環境にある人に対応するため、時にはPDFを編集することがあると思います。

Acrobat オンラインツールは、回数制限はありますが基本無料で使うことができます。Adobe Creative Cloudを契約している方なら、追加料金なしで無制限で使えます。

● PDFをオンラインで編集

● PDFを複数のPDFに分割

● 複数のPDFを1つに結合

● PDFのページをトリミング

● PDF内の不要なページを削除

● PDFを回転して保存

● PDF内のページを入れ替え

● PDFのページを抽出

● PDFにページを挿入

 

まとめ

アクセシビリティに対応する資料作成は、どんな人でもわかりやすく見やすい資料を作成する作業です。

伝わりやすい資料作りのテクニックがギュッと詰まっていると言って良いのではないでしょうか。
明日からできるアクセシビリティに配慮した資料作り、ぜひ実践してみてください。


          この記事を書いた人        
横山ゆみこ
株式会社Cyber Cats ブログ編集長。ウェブディレクター、コンテンツ発信サポーター
ブログを9年間運用してきた経験から実践的なアドバイスを得意とし、コンテンツ発信を活用して企業の価値を高めるサポートをしています。
400件を超える中小企業のホームページ制作に関わり、SEO、コンテンツマーケティング、ライティングの知識を使ったコンテンツ制作で利益につなげる制作ディレクションと利益獲得のアドバイスをしてきました。
ウェブの情報発信力を存分に活用する考え方を基礎からお伝えし、運用能力を身につけていただくお手伝いをしています。
詳しいプロフィールはこちらから
ニュースレターを購読してみる
横山ゆみこのXはこちら
noteはこちら
SNSでフォローする