重要： Auditパネルはコンポーネント内のアクセシビリティの問題をチェックしません。コンポーネント内のアクセシビリティの問題を手動で特定して修正するように注意してください。コンポーネントについて詳しく学ぶ。

アクセシビリティの問題を特定する

Auditパネルには現在、設計プロセス中に一般的な問題を特定して修正できる、高影響のアクセシビリティチェックが4つ含まれています。それは以下の点に関連しています：

1. Altテキストの不足（Missing alt text）
2. 記述的でないリンクの内容（Non-descriptive link content）
3. スキップされた見出しレベル（Skipped heading level）
4. 重複した要素ID（Duplicate element IDs）

さらに、Auditパネルを使用して、それがフラグ付けした問題から学び、これらの考慮事項が後でのことではなく、設計と開発のワークフローの一部になるようにすることで、実践的で意識的になることができます。

Auditパネルにアクセスするには、デザイナーの左下にあるAuditパネルアイコンをクリックします。

プロのヒント： キーボードでAlt/Option + Uを押すと、Auditパネルのすべてのアイテムを素早く展開または折りたたむことができます。

クイックヒント：Auditパネルにはテキストの色の対比比率をチェックする機能は含まれていませんが、Webflowにはテキスト要素の色ピッカー内に組み込まれた色の対比チェッカーがあり、デザイン中にテキストのアクセシビリティをチェックするのに役立ちます。

代替テキストの不足（Missing alt text）

代替テキストは、盲目の方、視力の低い方、または視覚の障害を持つ方々にとって、画像コンテンツの外観や機能を説明するものです。また、画像ファイルが読み込まれなかった場合やユーザーが画像を表示しないように選択した場合には、代わりに表示されます（SEOにも役立ちます）。

‍注意事項： スクリーンリーダーは、テキストと画像コンテンツを音声として描画する支援技術で、盲目の方、視力の低い方、または視覚に障害のある方々に利用されています。認知症や学習障害のある方にも役立ちます。

Auditパネルが不足している代替テキストを指摘する理由

不足している代替テキストとは、説明的な代替テキストが含まれていないか、または画像を装飾要素としてマークせずに画像を含めたことを意味します。もし画像がページ上の他の場所では利用できない重要な情報を伝えている場合、画像を見ることができない方はその情報を見逃し、検索エンジンはあなたの画像コンテンツに何が含まれているのか推測するしかありません。

重要事項： Auditパネルは、ライトボックスメディア要素内の画像の代替テキストをチェックしません。さらに、AuditパネルはCMSにバインドされた画像の代替テキストもチェックしません。したがって、ライトボックスメディア要素内の画像とCMSに接続した画像の代替テキストを含めるように注意してください。CMSにバインドされた画像の代替テキストの設定方法について詳しく学ぶ。

非記述的なリンクコンテンツ（Non-descriptive link content）

リンクテキストはユニークでなければならず、周囲のテキストなしでも意味を持ち、リンクの目的とユーザーをどこに導くのかを読者に伝える必要があります。

Auditパネルが記述的なコンテンツのないリンクを指摘する理由

空のリンクは、意味のないテキストや画像の代替テキストを持たないリンクであり、スクリーンリーダーを使用する人々を混乱させる可能性があります。

画像上のラスタライズされたテキスト（テキストが文字通り画像の一部であり、独立したテキスト要素ではないことを意味します）は、スクリーン・リーダーや検索エンジンでは解釈できないことに留意してください。ベストプラクティスは、画像とともに使用される説明テキストは、実際のテキスト要素であることを確認することです。

スキップされた見出しレベル（Skipped heading level）

見出しはページの組織と構造を人々に伝える役割を果たします。まるで目次のように、人々にページの構造を素早くナビゲートさせ、視覚的にまたはスクリーンリーダーを使用してコンテンツを簡単にスキャンするのに役立ちます。見出しの構造が欠けているか不適切な場合、訪問者は目的の情報を見つけるために余分な努力を強いられます。

Auditパネルがスキップされた見出しレベルを指摘する理由

スキップされた見出しレベルは、あなたの見出し要素(H1、H2など)が適切な見出し階層を使用していないことを意味します。H1は最も重要な見出しと見なされ、H2の見出しはH1の下にコンテンツをグループ化し、H3の見出しはH2の見出しの下に配置され、以降も同様です。

見出し階層が破れると、見出しのレベルをスキップした場合（たとえば、H1とH3の見出しがあるが、H2の見出しがない場合）に、認知障害を持つ人やスクリーンリーダーを使用する人にとって混乱の原因となります。

重複する要素ID

デザイナーや開発者は、ウェブサイトのアクセシビリティを最適化したり、カスタムコードを使用してリンク、スクリプト、またはスタイリング（CSSで）などを追加してサイトの機能を拡張するために、一意な識別子（ID）を使用します。ウェブ開発において、各IDがウェブページ全体で一意であること（つまり、各IDが単一の要素を識別するために使用されること）を確認するのはベストプラクティスとされています。

なぜAuditパネルは重複する要素IDをフラグ立てるのか

同じIDを複数の要素で使用することは、カスタムコードやスクリーンリーダーが誤動作する原因となる可能性があります。なぜなら、共有されたIDを持つ最初の要素のみが対象とされるためです。現代のブラウザは通常、重複するIDを受け入れますが、これは公開サイトでバグに遭遇するリスクが増加する可能性を依然として示しています。

Auditパネルを使用することで、ページ上の重複するIDを特定し、問題が発生する前に対処できるようになり、カスタムコードのデバッグに費やす時間を減少させ、公開されたサイトのアクセシビリティを低下させるリスクを排除できます。

アクセシビリティの問題を修正する

多くの場合、アクセシビリティの問題を修正するには、不足している識別情報を追加する必要があります。以下をカバーします：

1. 不足している代替テキストを修正する方法
2. 非記述的なリンクコンテンツを修正する方法
3. スキップされた見出しレベルを修正する方法
4. 重複する要素IDを修正する方法

不足している代替テキストを修正する方法

アセットパネルから画像に代替テキストを割り当てることができます。

または、画像がセマンティックな情報を伝えるものでなく、装飾的な用途でしか使用されていない場合、画像を明示的に装飾用として設定し、スクリーンリーダーがスキップするようにすることができます。

注意: 画像が装飾的か情報提供かを判断するには、ページからその画像を削除します。画像なしでは情報が不足する場合は情報提供用であり、代替テキストが必要です。 リンク、ボタン、ロゴ、または重要な情報を含む画像には常に代替テキストが必要です。

重要: Auditパネルは、ライトボックスメディア要素内の画像の代替テキストをチェックしません。さらに、AuditパネルはCMSにバインドされた画像の代替テキストをチェックしません。ライトボックスメディア要素内の画像とCMSに接続した画像の代替テキストが含まれていることを確認するために注意してください。 CMSにバインドされた画像に代替テキストを設定する詳細情報。

Auditパネルは、代替テキストの不足した画像を2つのグループに分類します：

• アセット
• リッチテキスト

アセットのグループ化の下にある代替テキストの不足した画像

Auditパネルのアセットグループに画像が表示されている場合、キャンバス画像がそのアセットを参照し、そのアセットには代替テキストが設定されていないことを意味します。

Image要素の代替テキストが不足（missing alt text）している場合の修正方法：

1. target action arrowをクリックします（これにより、Asset panel内のアセットの設定に移動します）。
2. Missing alt textモーダル内の「Find it for me」をクリックして、画像の代替テキスト設定をAsset panelで自動的に見つけます。
3. 説明的な代替テキストを追加するか、画像をdecorativeとしてマークします。

お知らせ: 情報モーダルをクリックしてドラッグすることで、キャンバス内で移動させることができます。

アセットパネルで設定された代替テキストを上書きしたい場合、キャンバス上の個々の画像にカスタム代替テキストを追加できます。

キャンバス上のImage要素にカスタム代替テキストを追加するには：

1. キャンバス上でImage要素を選択します
2. "歯車"アイコンをクリックしてImage settingsにアクセスします
3. Alt textのドロップダウンメニューから "Custom description" を選択し、その画像にカスタム代替テキストを入力します

個々の画像に代替テキストを設定する詳細をご覧ください。

Rich textグループ内で代替テキストが不足している画像

AuditパネルのRich textグループ内に画像が表示されている場合、リッチテキスト要素内のキャンバス画像に代替テキストが設定されていないことを意味します。

リッチテキスト要素内の画像の代替テキストを修正するには：

1. キャンバス上でリッチテキスト要素を見つけ、Missing alt textモーダルを開くために target action arrowをクリックします
2. Missing alt textモーダル内で "Find it for me" をクリックして、アセットパネル内で画像の代替テキスト設定を自動的に見つけます
3. 説明的な代替テキストを追加するか、画像をdecorativeとしてマークします。

アセットパネルで設定された代替テキストを上書きしたい場合、リッチテキスト要素内の個々の画像にカスタム代替テキストを追加することができます。

リッチテキスト要素内の画像にカスタム代替テキストを追加するには：

1. デザイナーキャンバス上でリッチテキスト要素内の画像をダブルクリックします
2. "レンチ"アイコンをクリックします
3. Alt textドロップダウンメニューから "Custom" を選択し、その画像にカスタム代替テキストを入力します

個々の画像に代替テキストを設定する詳細をご覧ください。

重要: Auditパネルはライトボックスメディア要素内の画像の代替テキストをチェックしません。また、AuditパネルはCMSにバインドされた画像の代替テキストもチェックしません。ライトボックスメディア要素内の画像とCMSに接続した画像に代替テキストを含めるように注意してください。CMSバウンド画像の代替テキスト設定の詳細をご覧ください。

効果的な代替テキストを書くためのヒント

1. 画像の意図、目的、および意味を説明します
2. 周囲のテキストを繰り返さないでください（例：キャプションが画像を十分に説明している場合、代替テキストは不要です。代替テキストは冗長であり、バイオグラフィのための代替テキストで人々の名前を繰り返す場合も同様です。これは繰り返しのテキストであり、画像や外見を説明しません。）
3. 句読点を使用します（画像をスクリーンリーダがより人間らしいアプローチで説明するのに役立ちます）
4. Blind、low vision、および視覚障害のある訪問者が代替テキストから画像に関する有意義な情報を受け取るように書き、キー情報の1〜2文の説明に留めます（過度な説明は避けてください）
5. “chart”、“image”、“diagram”などの非具体的な単語を避けます（それらが意味的な文脈を追加する場合を除いて）。 かわりに、グラフ、図、または画像に表示される意味やトレンドを説明します。

リソース

画像の代替テキストとスクリーンリーダについて詳しくは、Alt text lessonを参照してください。また、How to Design Great Alt Text: An IntroductionおよびImages must have alternate text（Deque Universityから）もチェックしてください。

記述的でないリンクコンテンツの修正方法

これを修正するには、ページ上のすべてのリンク要素に意味のある、記述的なテキストを含めてください。

「read more」、「link」、「click here」といった一般的な用語を避けてください。ただし、Auditパネルは一般的な用語に関するガイダンスを提供しませんが、リンクが実行するアクションに関する明確で具体的な言語を使用して、リンクを使用しやすくするようにしてください（例：「Download assets」）。

画像と一緒にテキストがラスタライズされていないアセットも使用できます。代わりに、画像アセットの上にテキスト要素を配置します。

画像リンク（アイコンボタンなど）がある場合は、必ずaltテキストも含めてください。

ターゲットアクションの矢印（リンクの横にある監査パネルの矢印）をクリックし、画像/アイコンのaltテキストを追加してリンクを更新します（リンクに画像が含まれている場合）。

altテキストがより説明的になるように、要素設定（画像要素の設定）でaltテキストを変更することができます。

リソース

リンクの設定方法や利用可能なオプションについて詳しく学ぶには、links articleおよびWCAGリンク目的基準をご覧ください。

スキップされた見出しレベルの修正方法

見出しは、コンテンツの構造を反映し、セクションの内容を明確に説明するための論理的な数値順序に従う必要があります。

たとえば、このレッスンのタイトル（Auditパネルの紹介）は、このページ上で唯一のレベル1の見出し（H1）です。このレッスンの小見出しはレベル2の見出し（H2）で、それらの小見出し内の見出しはさらに下位のレベルです（H3、H4など）。この段落の見出しはレベル3の見出しで、このセクションの内容を明確に説明しています。

たとえば、セクションのタイトルに<H2>要素を使用し、そのセクションの小見出しに<H4>要素を使用すると、<H3>レベルがスキップされるため、監査に失敗します。

スキップされた見出しがうっかり抜け落ちたものである場合、正しい見出しタイプに設定できます：

1. 変更したい見出しを選択します。
2. Settingsパネル（D）を開きます。
3. スキップされたHeading type（たとえば "H3"）を選択します。

リソース

適切な見出しの順序とマークアップ構造について詳しく学ぶには、WebAIMのサイトのドキュメンテーションをご覧ください。

重複した要素のIDを修正する方法

各要素のIDは、ウェブページ全体で一意である必要があります（つまり、各IDは単一の要素を識別するために使用されます）。

同じIDを複数の要素に使用すると、そのIDが追加されたときに設定パネルでエラーメッセージが表示され、その後のサイト監査がすべて失敗する原因となります。監査パネルは、重複するIDを迅速に特定し解決できるよう、すべての要素とコンポーネントインスタンスを識別します。

重複したIDを修正するには：

1. 監査パネルのフラグされたIDの横にあるtarget action arrowをクリックして、重複するIDを持つすべての要素とコンポーネントインスタンスを表示します。
2. フラグの付いた要素の横にあるShow me矢印をクリックします（これにより、IDが設定されている設定パネル内の要素設定に移動します）。
3. 重複するIDを編集または削除します。
4. 各重複するIDを持つ要素に対して上記の手順を繰り返します。

リソース

詳細を学びたい場合は、ID属性に関するMDNのドキュメンテーションを参照してください。

アクセシビリティの問題を無視する

一部の場合、Auditパネルでフラグ付けされた問題を無視したいことがあります。たとえば、コンテンツが見出しの階層をスキップする必要があるかもしれません。または、急いでコンテンツを作成し、順序を無視してコンテンツを作成することを選択するかもしれません。

問題を無視し、Auditパネルでの通知を一時的に（または永久に）非表示にするには：

1. Auditパネルを開きます。
2. 無視したい問題の上にカーソルを合わせ、"消音されたベル"アイコンをクリックします。

アクセシビリティの問題を無視する

一部の場合、Auditパネルでフラグが立った問題を無視したいことがあります。例えば、コンテンツに見出しの階層をスキップする必要がある場合もあります。また、急いでコンテンツを作成しており、順序に従ってコンテンツを構築することを選択したかもしれません。

問題を無視し、一時的に（または永続的に）Auditパネルの通知を非表示にするには：

1. Auditパネルを開きます。
2. 無視した問題の左側にある開示矢印をクリックします。
3. 無視した問題の上にカーソルを合わせ、"ベル"アイコンをクリックします。