コンテンツアクセシビリティのガイドライン
| 記事の要素 | ガイドライン | 例 |
|---|---|---|
| 本文 | 誰にでも分かりやすいコンテンツを作成するためのヒント：
|
非アクセシブル
「ウィジェットを組み立てる場合、まず箱を点検してください。もし、箱にへこみや破損などの損傷がある場合は、必ずご連絡ください。次に、以下の作業に取り掛かります。ネジを本体に差し込み、締め付けます。本体に電源を入れます。」 アクセシブル ウィジェットを組み立てるには
|
| 見出し | 見出しを階層化します。<h1>を最も重要な見出しとし、<h2>、<h3>のように小見出しを構成します。
見出しをページ上で構成するときは、一度に1階層ずつ増やしたり減らしたりしてください。例えば、<h3>の後には、<h5>や<h6>ではなく、<h4>を使います。<h1>は1つだけにして、その見出しには最も重要なテキスト（ページのタイトルなど）を置くようにします。 見出しを使ってWebページを整理することで、認知障害のあるユーザーも視覚的に識別しやすくなり、音声読み上げソフトのユーザーにとってもナビゲーションが容易になります。 |
非アクセシブル（小見出しがない） Lorem ipsum dolor sit amet, consectetur adipiscing elit.Pellentesque volutpat turpis ac ultrices pulvinar.Nullam pharetra neque ac eros fermentum, sed tempor lorem tristique.Aenean ut malesuada diam. 非アクセシブル（小見出しレベルをスキップ） Lorem ipsum dolor sit amet, consectetur adipiscing elit. 見出し1 Quisque tempor semper metus eu venenatis. 見出し4 Etiam et vehicula ipsum. 非アクセシブル（<h1>が複数ある） Lorem ipsum dolor sit amet, consectetur adipiscing elit. 見出し1 Quisque tempor semper metus eu venenatis. 見出し1 Etiam et vehicula ipsum. アクセシブル Lorem ipsum dolor sit amet, consectetur adipiscing elit. 見出し1Quisque tempor semper metus eu venenatis.Integer vehicula interdum velit, sit amet rutrum nisi sollicitudin ac. 見出し2 Etiam et vehicula ipsum.Aenean placerat semper leo et bibendum. |
| 画像 |
目的のある画像には、その画像が何であるかをわかりやすく簡潔に説明する代替（ALT）テキストを付けます。ALTテキストは、音声読み上げソフトによって読み上げられます。 ALTテキストを使用する場合：
alt=""）を使用して画像を非表示にします。 |
非アクセシブル アクセシブル
|
| リンクの色とスタイル |
リンクの色は、ページや周囲のテキストからはっきり区別されるものを使用し、色以外の目印（下線やアイコンなど）を追加します。これにより、コントラストの低いテキストを識別することが困難なユーザーや、色覚異常のあるユーザーがリンクを認識できるようになります。 画像をリンクとして使用することは避けてください。必要に応じて、リンクの場所や目的を説明するALTテキストを含む画像を使用します。 |
非アクセシブル
アクセシブル 「アクセシブルなヘルプセンターコンテンツの作成」を参照 |
| リンクテキスト |
リンクテキストは、周囲のコンテンツがなくても意味が通るようにします。たとえば、「ここをクリックしてください」、「さらに詳しく」などのあいまいなリンクテキストは使用しません。音声読み上げソフトは、テキストに説明がない場合、リンク先を解釈することができません。 URLをリンクテキストとしてそのまま使用しないでください。音声読み上げソフトは、URLの長さに関係なく、アドレス全体を読み上げます。 |
非アクセシブル www.website.com/linkedpage.htmlを参照アクセシブル |
| タイトル | トピックまたは目的を説明するページタイトルを使用します。 |
非アクセシブル 「アクセシビリティの詳細」 アクセシブル 「アクセシブルなヘルプセンターコンテンツの作成」 |
| ビデオ | クローズドキャプションに対応しているビデオプロバイダーを選択します。クローズドキャプションは、聴覚障害者のビデオ視聴をサポートしてくれます。
ビデオの字幕および吹き替えを提供します。 |
アクセシブル 
|
を参照コンテンツアクセシビリティ関連のリソース
アクセシブルなヘルプセンターコンテンツを作成する方法については、以下のリソースを参照してください。