【IR担当者もデザイナーも必見!】アクセシビリティから考える「誰でも使いやすい」伝わるウェブサイト

更新日:2025年5月29日

「IR担当だけど、Webサイトってどう活用すればいいの?」「デザインの力で、もっと会社の価値を伝えたい!」当社のWeb記事をご覧になる方の中には、このような疑問をお持ちの方や、当社のデザインに関心を持ってくださる方がありがたい事に多くいらっしゃいます。
企業の顔であるWebサイトは、投資家の方々への情報発信だけでなく、あらゆるステークホルダーとのコミュニケーションにおいて重要な役割を果たします。

そして、そのウェブサイトに欠かせないのが、「ウェブアクセシビリティ」です。

スライドのタイトルはウェブアクセシビリティとは? 誰でも使いやすいWebのために今すぐにできることWhat is Web Accessibility?

※パワーポイントでスライドを作成しています。                               ※本資料はデジタル庁が発表した「ウェブアクセシビリティ導入ガイドブック」をわかりやすく抜粋・編集したものです。 
内容に関しては意図を改変しないように配慮していますが、わかりやすいように一部、出所資料と異なる表現もあります。 できれば、出所資料とあわせてご覧頂くことをお勧めします。 
<出所> デジタル庁 「ウェブアクセシビリティ導入ガイドブック

アクセシビリティとは?

アクセシビリティとは、年齢や障がいの有無、そして利用するデバイスや環境に関わらず、「すべての人が、提供される情報に問題なくアクセスし、利用できること」を目指す考え方です。

これは、「Access(近づく、アクセスする)」と「Ability(能力、~できること)」を組み合わせた言葉で単に情報があるだけでなく、それが「使える」状態であるかが重要になります。

スライドタイトルはアクセシビリティとは。AccessibilityはAccess(近づく・アクセスする)とAbility(能力・~できること)を組み合わせた言葉であり、「(製品やサービスを)利用できる状態のこと」

また、アクセシビリティは、特定の利用者層にとっての使いやすさを追求する「ユーザビリティ」に対し、「すべてのユーザー」を対象としている点が大きな違いです。

スライドタイトルは、アクセシビリティとユーザビリティの違い。横軸に「ターゲット層」「健常者」「高齢者」「障がい者」「初心者」「外国人」の6つのユーザータイプ、縦軸に「使えない」「使える」「使いやすい」の3段階の使いやすさを示した棒グラフ。ユーザビリティは「ターゲット層にとっての使いやすさ」と定義され、ターゲット層の棒が最も高い「使いやすい」レベルにある。アクセシビリティは「全ユーザーが情報にアクセス可能か」と定義され、グラフ中央の「使える」のラインで示されており、全てのユーザータイプがこのライン以上に位置することを目指すものとして描かれている。

そしてウェブアクセシビリティとは、すべての人が、Webサイトに問題なくアクセスし、利用できることです。ウェブアクセシビリティが確保されていることで、以下のようなことが可能になります。

  • 目が見えにくい方でも、音声読み上げ機能などを使って情報を理解できる。
  • マウスの操作が難しい方でも、キーボードだけでサイト内を自由に移動できる。
  • 聴覚に障がいがある方でも、動画の字幕で内容を把握できる。
  • ITの操作に不慣れな高齢者の方でも、迷わずに必要な情報にたどり着ける。
スライドタイトルは、ウェブアクセシビリティとは 。4つの例をアイコンと共に表示。1. 目が見えなくても情報が伝わり、操作できることを示すアイコン。2. キーボードだけでも操作できることを示すアイコン。3. 音声が聞こえなくても内容がわかることを示すアイコン。4. 高齢者でも利用することができることを示すアイコン。

なぜ今、IRとウェブアクセシビリティが結びつくのか?

近年、IR活動においても「誰にでも開かれた情報開示」が求められるようになっています。投資家の多様化が進み、高齢者や視覚障害者、非ネイティブの閲覧者など、情報を受け取る側の環境は一様ではありません。だからこそ、ウェブアクセシビリティは、単なる“技術的な対応”ではなく、IRの本質である「公平な情報提供」を実現するための重要な視点になりつつあります。

スライドタイトルは、IRとウェブアクセシビリティ。アクセシビリティ対応は「信頼をつくる、見えない配慮」であり、高齢者、視覚障がい者、外国人など多様な投資家への配慮を示す。結論として「IRの本質 = 公平な情報開示」と強調している。

ウェブアクセシビリティにはレベルがある?

ウェブアクセシビリティの国際的なガイドラインであるWCAG (Web Content Accessibility Guidelines) には、達成度を示す3つのレベルが定められています。これらのレベルはウェブサイトのアクセシビリティの度合いを示す指標となります。

  • レベルA(最低限の基準): この基準を達成していない場合、ウェブサイトを閲覧できない利用者が存在する可能性があります。25項目があります。まずはクリアすべき最低限のラインと言えます。
  • レベルAA(望ましい基準): この基準を達成していない場合でもウェブサイトの閲覧は可能ですが、困難を感じる場合があります。レベルAの項目に加え、13項目が追加されます。多くの企業や公共機関が目標とするレベルです。
  • レベルAAA(発展的な基準): この基準を満たすことで、より多くの人がウェブサイトを快適に利用できるようになります。レベルAAの項目に加え、23項目が追加されます。達成が難しい項目も含まれますが、最高のアクセシビリティレベルを目指す場合の目標となります。

これらのレベルを理解し、段階的にアクセシビリティの向上に取り組むことが重要です。

スライドタイトルは、「アクセシビリティのレベルについて」。3つのレベル(A、AA、AAA)を説明。
・レベルA:最低限の基準(25項目)。未達成の場合、閲覧できない人が存在し得る。
・レベルAA:望ましい基準(+13項目)。未達成の場合、閲覧が困難な場合がある。
・レベルAAA:発展的な基準(+23項目)。満たすと、より閲覧しやすくなる。

サクッと始める!ウェブアクセシビリティ実践のポイント

ウェブアクセシビリティは、最初から完璧を目指す必要はありません。まずは、比較的簡単に取り組めることから始めるのがおすすめです。

<まずはここから”レベルA”の事例>

自動で動くコンテンツに一時停止機能を設ける: スライドショーなど、一定時間でコンテンツが切り替わるものは、ユーザーが自分で止められるように操作ボタンを追加します。

スライドタイトルは、「まずはここから“レベルA”の事例」。テーマは「自動でコンテンツを切り替えない」。
NG例:操作ボタンのない、靴の画像などが自動で横にスライドする表示。「他箇所の操作や閲覧が妨げられる」と説明。
OK例:一時停止ボタンとページ送りボタンが追加された、同様の表示。「一時停止ボタンなどを設ける」と説明。

画像には必ず「代替テキスト(alt属性)」を設定する: 画像の内容を説明するテキスト情報を含めることで、画像が表示されない環境や、スクリーンリーダーを利用する方にも情報が伝わります。

スライドタイトルは「まずはここから“レベルA”の事例」。テーマは「画像に「代替テキスト(alt)」をつける」。
例に示された画像のHTMLのNG例とOK例を対比。OK例ではalt属性に図の内容『質の高い教育を』を中心に、5つの支援要素(教師、教材、アクセス、家庭、ICT)を円状に配置した図が記述されていることを示す。

キーボードだけで主要な操作を可能にする: マウスを使わずに、TabキーやEnterキー、EscキーなどでWebサイトの閲覧や操作ができるように設計します。

スライドタイトルは、「まずはここから“レベルA”の事例」。テーマは「キーボードだけで全てにアクセスできる」。
事例1:「削除の確認」ダイアログが表示され、「Escキーで画面が閉じられる。」ことを示す。
事例2:入力フォームが表示され、「Tabキーでフォーカスを移動できる。」ことを示す。

<さらに優しい“レベルAA ”の事例>

表示の向きを固定しない: スマートフォンなどで閲覧する際に、縦向き・横向きどちらでもレイアウトが崩れず、情報が見られるようにします。

スライドタイトルは、「さらに優しい“レベルAA”の事例」。テーマは「表示の向きを固定しない」。
NG例:スマートフォンの向きを変更した際、変更前のレイアウトのページがそのまま表示され、読みにくい。
OK例:向きを変更すると、ページレイアウトも追従し、コンテンツが画面幅に合わせて適切に再配置され読みやすい。

十分な文字と背景色のコントラストを確保する: 文字が背景に埋もれて読みにくくならないよう、十分なコントラスト比(資料では最低限4.5:1、さらに望ましくはこれ以上を推奨)を設定します。

スライドタイトルは「さらに優しい“レベルAA”の事例」。テーマは「最低限のコントラスト(4.5:1)を確保する」。
NG例:「お問い合わせ」ボタン(薄い青背景に白文字)のコントラスト比が2.55:1で基準未達。
OK例:同ボタン(濃い青背景に白文字)のコントラスト比が6.32:1で基準達成。
コントラスト比はツールで確認できる旨の注釈付き。

最後に

ウェブサイトのアクセシビリティ向上は、IR情報をはじめとする企業情報を「誰にでも、正確に、そしてスマートに提供する」ために、現代のビジネスにおいて不可欠な視点です。デザインの力でこのアクセシビリティを実現することは、企業の信頼性やブランドイメージを高め、より多くのステークホルダーとの良好な関係構築に繋がります。ぜひ一緒にすべての人に情報が届く「伝わるデザイン」を、IR戦略の一環として考えてみませんか。


なお、IRにおけるアクセシビリティは、Webサイトだけでなく、PDF形式のIR資料など、ウェブ以外の媒体においても同様に重要です。IR資料全体のアクセシビリティ向上については、以下の記事でも詳しくご紹介しておりますので、ぜひご覧ください。
【関連記事】IR資料におけるアクセシビリティ向上のための10箇条(ユニバーサルデザインへ向けて)

それでは今回も最後まで読んでくださりありがとうございました!

incdesign ALL HANDS 2025incdesign ALL HANDS 2025 を開催!

はじめての統合報告書作成にもおススメ!パワーポイントでつくる統合報告書特設ページ開設!

関連記事

  1. 一手間でキメる!デザイナーが見るPowerPoint Before→Afterフォント編

    一手間でキメる!デザイナーが見るPowerPoi…

    デザインの参考にと日頃の多くの企業様のIR資料を見させていただいております…

  2. [縦型スライド公開]わかりやすいパーパス発見プロ…

    スライドは4:3や16:9だって誰がきめた?そう、今、パワーポイン…

  3. パワーポイントでロゴを作る

    パワポでロゴを作ったらそこそこ苦行だったという話です。ふと…

  4. 【制作実績】事業計画及び成長可能性に関する事項資…

    全国TVCM放映中なのでご存じの方も多いかもしれませんが「マネードクター」…

  5. IR資料におけるアクセシビリティ向上のための10…

    2025-01-26更新IR資料は、幅広い投資家や利害関係…

  6. 一手間でキメる!デザイナーが見るPowerPoint Before→After 色づかい編

    一手間でキメる!デザイナーが見るPowerPoi…

    デザインの参考にと日頃の多くの企業様のIR資料を見させていただいております…

  7. 【実績紹介】トビラシステムズ株式会社様決算説明資…

    迷惑電話や詐欺電話を防ぐための情報フィルタシステムを開発・提供しているトビ…

  8. 【制作実績】株式会社ABEJA様決算説明資料

    企業のDX推進を総合的に支援するデジタルプラットフォーム事業を行う、株式会…

PAGE TOP