はじめに
アクセシビリティとは、年齢や障害の有無、見え方の特性に関わらず、できるだけ多くの人がwebサイトを利用しやすいように設計することです。IRサイトにおいても、アクセシビリティの考え方を取り入れることが、企業価値向上に重要な意味を持つようになっています。
本記事では、色彩検定UC級（色のユニバーサルデザイン）を持つスタッフが多数在籍するインクデザインが考える、IRサイトにアクセシビリティを取り入れる際の3つのポイントと、具体的な実装方法を解説します。
※弊社の実績ではありません。
※本記事における各社IR資料の引用は、優れたIR資料を紹介し、デザイン業界の活性化に貢献することを目的としております。
ポイント① 投資家層の多様化に対応する
高齢層の個人投資家に対応
日本の個人投資家の平均年齢は上昇を続けており、60代以上の投資家が大きな割合を占めています。高齢になると、以下のような身体的な変化が起こります。
- 視力の低下：小さな文字が読みにくくなる、コントラストの低い表示が見づらくなる
- 色覚の変化：色の識別が難しくなる
- 運動機能の低下：マウスやタッチ操作の精度が下がる、細かいボタンが押しにくくなる
- 認知機能の変化：複雑な情報構造の理解に時間がかかる
多様な認知特性を持つ投資家
投資家の中には、視覚優位で図やグラフから情報を読み取る方もいれば、言語優位でテキストによる説明を好む方もいます。
また、発達障害や学習障害のある方にとっては、情報の提示方法が理解のしやすさに大きく影響します。
- 文字サイズの調整可能性
ユーザーがブラウザのテキストサイズ設定を変更しても、レイアウトが崩れないようにします。固定サイズ(px)ではなく、相対サイズ(rem, em)を使用することで実現できます。 - 十分なコントラスト比の確保
背景色とテキストの色のコントラスト比を、WCAG(Web Content Accessibility Guidelines)の基準である4.5:1以上に設定します。特に重要な情報は7:1以上が推奨されます。 - 情報の複数の表現方法を検討する
- 数値情報：グラフ化すると同時に、HTMLの表でもデータを提供する
- 事業説明：インフォグラフィックと並行して、テキストによる説明も記載する
- 動画コンテンツ：字幕とテキスト版の議事録を提供する
📍 参考にしたい他社事例
グラフと表の両方で財務情報を提供しており、多様な認知特性に対応しています。こうした変化に配慮したサイト設計が、個人投資家との接点を維持するために不可欠です。
ポイント② 法的要請とESG評価への対応
障害者差別解消法の改正
2024年4月から、障害者差別解消法の改正により、民間事業者にも「合理的配慮の提供」が義務化されました。Webサイトのアクセシビリティ対応も、この合理的配慮の一環として位置づけられます。
具体的には、以下のような対応が求められます。
- スクリーンリーダーで情報を読み上げられるようにする
- キーボードだけで操作できるようにする
- 色だけに依存しない情報伝達を行う
- 動画に字幕を付ける
ESG投資における評価
アクセシビリティ対応は、ESG投資の「S(Social:社会)」の観点から評価される要素の一つです。障害者雇用や多様性への配慮と同様に、Webアクセシビリティへの取り組みは、企業の社会的責任を示す指標となっています。
特に、IRサイトは企業の情報開示の窓口であり、そこでのアクセシビリティ対応は、企業姿勢を示す重要なメッセージになります。「すべてのステークホルダーに開かれた情報開示を行う」という姿勢は、ESG投資家にとって評価のポイントです。
- キーボード操作への完全対応
マウスを使わずに、すべての機能にアクセスできるようにします。- スキップリンクの設置：ページ上部に「メインコンテンツへスキップ」リンクを配置
- フォーカスインジケーターの明確化：現在フォーカスされている要素を視覚的にわかりやすく表示
- 論理的なタブ順序：Tabキーで移動する順序が、視覚的な順序と一致している
- 色だけに依存しない情報伝達
色覚特性のある方にも情報が伝わるようにします。- 決算情報で黒字・赤字を色だけで区別せず、「+」「-」の記号や括弧()を併用する
- グラフで複数のデータを表現する際、色だけでなく線のスタイル(実線、破線、点線)やマーカーの形も変える
- リンクは色だけでなく下線で示す
- 適切な見出し構造
スクリーンリーダーのユーザーは、見出し(h1, h2, h3…)を手がかりにページ内を移動します。見出しを論理的な階層で設定することで、情報構造を正確に伝えられます。
📍 参考にしたい他社事例
キーボード操作への対応や見出し構造が整備されており、非常にユーザビリティに優れています。ぜひアクセスして体感してみてください。
ポイント③ すべてのユーザーにとっての使いやすさ向上
ユニバーサルデザインの「カーブカット効果」
ユニバーサルデザインには「カーブカット効果」と呼ばれる特性があります。
これは、歩道と車道の段差をなくすために設置された縁石の切り下げ（カーブカット）が、車椅子ユーザーだけでなく、ベビーカーを押す人、キャリーバッグを引く人、高齢者など、多くの人にとって便利になったことに由来します。
IRサイトでも同様に、特定の障害のある方のための配慮が、結果的にすべてのユーザーにとっての使いやすさ向上につながります。
具体的な効果
- 明確な情報構造は、誰にとっても理解しやすい
- 大きなタップターゲットは、高齢者だけでなく、電車の中でスマホを操作する人にとっても便利
- 動画の字幕は、音を出せない環境(電車内、オフィスなど)でも視聴できる
- PDFの代替としてHTMLで情報提供することは、スマホユーザー全般にとって快適
SEO効果の向上
検索エンジンは、人間と同じように視覚的な情報を理解できません。そのため、アクセシビリティ対応で重視される以下の要素は、SEO対策としても有効です。
- 適切な見出し構造（h1, h2, h3…）
- 画像の代替テキスト（alt属性）
- セマンティックHTML（header, nav, main, article, asideなどの適切な使用）
- 論理的な情報構造
つまり、ユニバーサルデザインに配慮することで、検索エンジンからの評価も高まり、より多くの投資家に情報を届けられるようになります。構造化はAIブラウザでの遺尿もしやすくなるので一石二鳥だと考えられます。
PDFとHTMLの併用
決算短信や統合報告書をPDFで提供するのは一般的ですが、重要な情報はHTMLでも提供することで、以下のメリットがあります。
- スマホでの閲覧が容易になる(PDFは別アプリ起動が必要)
- スクリーンリーダーでの読み上げがスムーズになる
- 検索エンジンが内容を正確に把握できる
- ページ内検索(Ctrl+F)がしやすくなる
画像・グラフへの代替テキスト
視覚情報を言語情報としても提供します。
悪い例
<img src="sales-graph.png" alt="グラフ">良い例
<img src="sales-graph.png" alt="売上高推移グラフ。2020年1,000億円から2024年1,500億円まで、年平均10%で成長。">複雑なグラフの場合は、alt属性に加えて、グラフの直前または直後にテキストで説明を記載したり、データをHTML表形式でも提供したりします。
モバイルファーストの設計
スマートフォンでの閲覧を前提とした設計は、すべてのユーザーに恩恵があります。
- タップターゲットを十分な大きさに(最低44×44ピクセル)
- ピンチ操作による拡大を妨げない(viewportの設定でuser-scalable=noを使わない)
- 読み込み速度の最適化(画像の遅延読み込み、不要なスクリプトの削減)
📍 参考にしたい他社事例
2社のサイトではPDFとHTMLの併用、モバイル対応が適切に行われており、すべてのユーザーにとっての使いやすさを実現しています。またグラフィカルな表現もhtmlで実装されており、マークアップ・データ構造が明確です。
まとめ
ユニバーサルデザインへの対応は、特定の障害のある方だけでなく、すべての投資家にとってメリットがあります。
インクデザインでは、ユニバーサルデザイン対応に長けたデザイナーによるご支援を行っています。既存サイトのアクセシビリティ診断、改善提案、PDFのアクセシブル化など、IR情報発信におけるユニバーサルデザイン全般をサポートしています。
すべての投資家に情報を届け、企業価値を正しく伝えるための第一歩として、自社IRサイトのユニバーサルデザイン対応を検討してみてはいかがでしょうか。
