アクセシブルなヘルプセンターコンテンツの作成

現在のプランを確認

Suite Growth以上のプランで利用可能すべてのGuideプランで利用可能

支援技術に頼る人を含め、誰にでもアクセシブルで使いやすいヘルプセンターのコンテンツを作成することで、Zendeskにアクセスするすべての人に優れた成功経験を提供することができます。

メモ：ヘルプセンターで最適なアクセシビリティを実現するには、コンテンツだけでなく、ヘルプセンターのテーマもアクセシブルなものにする必要があります。詳しくは「ヘルプセンターをアクセシブルにする方法」を参照してください。

この記事では、次のトピックについて説明します。

コンテンツアクセシビリティのガイドライン
コンテンツアクセシビリティ関連のリソース

コンテンツアクセシビリティのガイドライン

以下の表は、ヘルプセンターの記事をアクセシブルに設計し、誰にでも使いやすくするためのガイドラインです。

メモ：Webコンテンツのアクセシビリティガイドラインの詳細については、Web Content Accessibility Guidelines（WCAG）2.1標準を参照してください。

記事の要素	ガイドライン	例
本文	誰にでも分かりやすいコンテンツを作成するためのヒント：明確で簡易な言葉を使う段落は短くする見出しを使い、構成を整える箇条書きや番号付きリストを使う	非アクセシブル「ウィジェットを組み立てる場合、まず箱を点検してください。もし、箱にへこみや破損などの損傷がある場合は、必ずご連絡ください。次に、以下の作業に取り掛かります。ネジを本体に差し込み、締め付けます。本体に電源を入れます。」アクセシブルウィジェットを組み立てるには箱に損傷がないか点検します。もし損傷がある場合は、カスタマーサービスまでご連絡ください。ネジをウィジェットに挿入し、締め付けます。「ON」ボタンを押します。
見出し	見出しを階層化します。<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. 見出し1 Quisque 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テキストを入力します。記事内では、ソースコードエディタを使用して<img> alt属性を画像に追加します。装飾画像が音声読み上げソフトなどの支援技術で無視されるようにするには、null altテキスト（`alt=""`）を使用して画像を非表示にします。	非アクセシブルアクセシブル
リンクの色とスタイル	リンクの色は、ページや周囲のテキストからはっきり区別されるものを使用し、色以外の目印（下線やアイコンなど）を追加します。これにより、コントラストの低いテキストを識別することが困難なユーザーや、色覚異常のあるユーザーがリンクを認識できるようになります。画像をリンクとして使用することは避けてください。必要に応じて、リンクの場所や目的を説明するALTテキストを含む画像を使用します。	非アクセシブル「アクセシブルなヘルプセンターコンテンツの作成」を参照を参照アクセシブル「アクセシブルなヘルプセンターコンテンツの作成」を参照
リンクテキスト	リンクテキストは、周囲のコンテンツがなくても意味が通るようにします。たとえば、「ここをクリックしてください」、「さらに詳しく」などのあいまいなリンクテキストは使用しません。音声読み上げソフトは、テキストに説明がない場合、リンク先を解釈することができません。 URLをリンクテキストとしてそのまま使用しないでください。音声読み上げソフトは、URLの長さに関係なく、アドレス全体を読み上げます。	非アクセシブルここをクリック www.website.com/linkedpage.htmlを参照アクセシブルアクセシビリティ関連のリソース一覧を見る
タイトル	トピックまたは目的を説明するページタイトルを使用します。	非アクセシブル「アクセシビリティの詳細」アクセシブル「アクセシブルなヘルプセンターコンテンツの作成」
ビデオ	クローズドキャプションに対応しているビデオプロバイダーを選択します。クローズドキャプションは、聴覚障害者のビデオ視聴をサポートしてくれます。ビデオの字幕および吹き替えを提供します。	アクセシブル

コンテンツアクセシビリティ関連のリソース

アクセシブルなヘルプセンターコンテンツを作成する方法については、以下のリソースを参照してください。