WebflowのAuditパネルでアクセシビリティの問題を見つけて修正しましょう。
Auditパネルは、一般的なアクセシビリティに関連する問題をフラグ付けし、サイトを公開する前にこれらの問題を解決できるようにします。クリティカルエラー（赤い四角でフラグ付けされたAuditパネルのフラグ）は、ユーザーが重要なサイトコンテンツを見逃す可能性がある、または検索パフォーマンスが低下する可能性のある問題を表します。モデレートエラー（黄色い三角形でフラグ付けされたAuditパネルのフラグ）は重要な問題を示しますが、修正がクリティカルではありません。
このレッスンでは、次の内容を含むAuditパネルについて詳しく学びます：
Auditパネルには現在、設計プロセス中に一般的な問題を特定して修正できる、高影響のアクセシビリティチェックが4つ含まれています。それは以下の点に関連しています：
さらに、Auditパネルを使用して、それがフラグ付けした問題から学び、これらの考慮事項が後でのことではなく、設計と開発のワークフローの一部になるようにすることで、実践的で意識的になることができます。
Auditパネルにアクセスするには、デザイナーの左下にあるAuditパネルアイコンをクリックします。
代替テキストは、盲目の方、視力の低い方、または視覚の障害を持つ方々にとって、画像コンテンツの外観や機能を説明するものです。また、画像ファイルが読み込まれなかった場合やユーザーが画像を表示しないように選択した場合には、代わりに表示されます（SEOにも役立ちます）。
不足している代替テキストとは、説明的な代替テキストが含まれていないか、または画像を装飾要素としてマークせずに画像を含めたことを意味します。もし画像がページ上の他の場所では利用できない重要な情報を伝えている場合、画像を見ることができない方はその情報を見逃し、検索エンジンはあなたの画像コンテンツに何が含まれているのか推測するしかありません。
重要事項： Auditパネルは、ライトボックスメディア要素内の画像の代替テキストをチェックしません。さらに、AuditパネルはCMSにバインドされた画像の代替テキストもチェックしません。したがって、ライトボックスメディア要素内の画像とCMSに接続した画像の代替テキストを含めるように注意してください。CMSにバインドされた画像の代替テキストの設定方法について詳しく学ぶ。
リンクテキストはユニークでなければならず、周囲のテキストなしでも意味を持ち、リンクの目的とユーザーをどこに導くのかを読者に伝える必要があります。
空のリンクは、意味のないテキストや画像の代替テキストを持たないリンクであり、スクリーンリーダーを使用する人々を混乱させる可能性があります。
画像上のラスタライズされたテキスト（テキストが文字通り画像の一部であり、独立したテキスト要素ではないことを意味します）は、スクリーン・リーダーや検索エンジンでは解釈できないことに留意してください。ベストプラクティスは、画像とともに使用される説明テキストは、実際のテキスト要素であることを確認することです。
見出しはページの組織と構造を人々に伝える役割を果たします。まるで目次のように、人々にページの構造を素早くナビゲートさせ、視覚的にまたはスクリーンリーダーを使用してコンテンツを簡単にスキャンするのに役立ちます。見出しの構造が欠けているか不適切な場合、訪問者は目的の情報を見つけるために余分な努力を強いられます。
スキップされた見出しレベルは、あなたの見出し要素(H1、H2など)が適切な見出し階層を使用していないことを意味します。H1は最も重要な見出しと見なされ、H2の見出しはH1の下にコンテンツをグループ化し、H3の見出しはH2の見出しの下に配置され、以降も同様です。
見出し階層が破れると、見出しのレベルをスキップした場合（たとえば、H1とH3の見出しがあるが、H2の見出しがない場合）に、認知障害を持つ人やスクリーンリーダーを使用する人にとって混乱の原因となります。
デザイナーや開発者は、ウェブサイトのアクセシビリティを最適化したり、カスタムコードを使用してリンク、スクリプト、またはスタイリング（CSSで）などを追加してサイトの機能を拡張するために、一意な識別子（ID）を使用します。ウェブ開発において、各IDがウェブページ全体で一意であること（つまり、各IDが単一の要素を識別するために使用されること）を確認するのはベストプラクティスとされています。
同じIDを複数の要素で使用することは、カスタムコードやスクリーンリーダーが誤動作する原因となる可能性があります。なぜなら、共有されたIDを持つ最初の要素のみが対象とされるためです。現代のブラウザは通常、重複するIDを受け入れますが、これは公開サイトでバグに遭遇するリスクが増加する可能性を依然として示しています。
Auditパネルを使用することで、ページ上の重複するIDを特定し、問題が発生する前に対処できるようになり、カスタムコードのデバッグに費やす時間を減少させ、公開されたサイトのアクセシビリティを低下させるリスクを排除できます。
多くの場合、アクセシビリティの問題を修正するには、不足している識別情報を追加する必要があります。以下をカバーします：
アセットパネルから画像に代替テキストを割り当てることができます。
または、画像がセマンティックな情報を伝えるものでなく、装飾的な用途でしか使用されていない場合、画像を明示的に装飾用として設定し、スクリーンリーダーがスキップするようにすることができます。
注意: 画像が装飾的か情報提供かを判断するには、ページからその画像を削除します。画像なしでは情報が不足する場合は情報提供用であり、代替テキストが必要です。 リンク、ボタン、ロゴ、または重要な情報を含む画像には常に代替テキストが必要です。
Auditパネルは、代替テキストの不足した画像を2つのグループに分類します：
Auditパネルのアセットグループに画像が表示されている場合、キャンバス画像がそのアセットを参照し、そのアセットには代替テキストが設定されていないことを意味します。
Image要素の代替テキストが不足（missing alt text）している場合の修正方法：
アセットパネルで設定された代替テキストを上書きしたい場合、キャンバス上の個々の画像にカスタム代替テキストを追加できます。
キャンバス上のImage要素にカスタム代替テキストを追加するには：
個々の画像に代替テキストを設定する詳細をご覧ください。
AuditパネルのRich textグループ内に画像が表示されている場合、リッチテキスト要素内のキャンバス画像に代替テキストが設定されていないことを意味します。
リッチテキスト要素内の画像の代替テキストを修正するには：
アセットパネルで設定された代替テキストを上書きしたい場合、リッチテキスト要素内の個々の画像にカスタム代替テキストを追加することができます。
リッチテキスト要素内の画像にカスタム代替テキストを追加するには：
個々の画像に代替テキストを設定する詳細をご覧ください。
画像の代替テキストとスクリーンリーダについて詳しくは、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>レベルがスキップされるため、監査に失敗します。
スキップされた見出しがうっかり抜け落ちたものである場合、正しい見出しタイプに設定できます：
適切な見出しの順序とマークアップ構造について詳しく学ぶには、WebAIMのサイトのドキュメンテーションをご覧ください。
各要素のIDは、ウェブページ全体で一意である必要があります（つまり、各IDは単一の要素を識別するために使用されます）。
同じIDを複数の要素に使用すると、そのIDが追加されたときに設定パネルでエラーメッセージが表示され、その後のサイト監査がすべて失敗する原因となります。監査パネルは、重複するIDを迅速に特定し解決できるよう、すべての要素とコンポーネントインスタンスを識別します。
重複したIDを修正するには：
詳細を学びたい場合は、ID属性に関するMDNのドキュメンテーションを参照してください。
一部の場合、Auditパネルでフラグ付けされた問題を無視したいことがあります。たとえば、コンテンツが見出しの階層をスキップする必要があるかもしれません。または、急いでコンテンツを作成し、順序を無視してコンテンツを作成することを選択するかもしれません。
問題を無視し、Auditパネルでの通知を一時的に（または永久に）非表示にするには：
一部の場合、Auditパネルでフラグが立った問題を無視したいことがあります。例えば、コンテンツに見出しの階層をスキップする必要がある場合もあります。また、急いでコンテンツを作成しており、順序に従ってコンテンツを構築することを選択したかもしれません。
問題を無視し、一時的に（または永続的に）Auditパネルの通知を非表示にするには：
