サイト診断で指摘が表示されたときに、問題の内容と対処方法を確認するための記事です。HTML構造、リンク先設定、代替テキストの3つのカテゴリに分けて説明します。
サイト診断の開き方や操作方法は、サイト診断でサイト内の問題を確認するを参照してください。
HTML構造
HTMLタグの設定や、要素の入れ子に関する問題です。ブラウザやスクリーンリーダーが、ページの構造を正しく解釈できなくなる原因になります。
Point： ボックスやテキストボックスに設定したタグは、HTMLとして公開サイトに出力されます。タグは、右パネルの[設定]タブにある[タグ]から変更できます。詳しくはHTMLタグの種類と設定手順を参照してください。
見出し構造の崩れ
見出しのレベルが途中で飛んでいる状態です。
検知される状態：
<h1>の次に<h3>がくるなど、見出しレベルが飛んでいる。リッチテキスト内の見出しも含め、ページ内の並び順で判定します。影響： 見出しは
<h1>から順に、レベルを飛ばさずに設定する必要があります。レベルが飛んでいると、スクリーンリーダーがページの構成を正しく読み取れません。対処方法： 指摘された見出しのタグを正しいレベルに変更します。または、間に不足している見出しを追加するか、直前の見出しのレベルを見直します。
指摘はページごとに1件にまとめて表示されます。指摘内で、ページ全体の見出しの構成を確認できます。
リンク・ボタンの入れ子
リンクやボタンの中に、操作できる別の要素が入っている状態です。
検知される状態： リンクやボタンの中に、別のリンク・ボタン・入力欄・セレクトがある。リンクを設定したボックスも対象です。
影響： クリックしたときの動作がブラウザによって変わる原因になります。
対処方法： 入れ子をやめて、要素を並べて配置します。内側の要素がリンクである必要がない場合は、リンク設定を削除します。
段落・見出しの中のブロック要素
段落や見出しの中に、ブロック要素が入っている状態です。
検知される状態：
<p>や<h1>〜<h6>の中に、<div>・<section>・<ul>・<li>などがある。影響： ブラウザが構造を自動で組み替えるため、公開サイトでレイアウトが崩れたり、読み上げの内容が変わったりします。
対処方法： 指摘された要素を、段落や見出しの外へ移動します。
<ul>の直下に<li>以外の要素がある
リストの直下に、リスト項目以外の要素がある状態です。
検知される状態：
<ul>または<ol>の直下に、<li>以外の要素がある。影響： スクリーンリーダーが、リストとして正しく読み上げられません。
対処方法： 直下のボックスのタグを
<li>に変更します。リスト項目でない要素は、<ul>の外へ移動します。リストとして扱う必要がない場合は、親のタグを<div>などに変更します。
<li>が<ul>または<ol>の外にある
リスト項目が、リストの外に置かれている状態です。
検知される状態：
<li>の親要素が、<ul>または<ol>ではない。影響： スクリーンリーダーが、リストとして正しく読み上げられません。
対処方法： 親のタグを
<ul>または<ol>に変更します。リストとして扱う必要がない場合は、<li>のタグを<div>などに変更します。
<main>がページ内に複数ある
ページの主要コンテンツを示す<main>が、1ページに2つ以上ある状態です。
検知される状態： 1ページ内に
<main>が2つ以上ある。2つ目以降が指摘されます。影響：
<main>は、1ページに1つだけ配置できる要素です。対処方法： 指摘されたボックスのタグを
<div>などに変更します。
ランドマーク要素の入れ子
<header>・<footer>・<main>などのランドマーク要素が、入れ子になっている状態です。
検知される状態：
<main>の中に<main>がある。または、<header>・<footer>の中に<header>・<footer>がある。影響： ランドマーク要素は、入れ子にできません。
対処方法： 内側のボックスのタグを
<div>などに変更します。
参照先のコンポーネントが見つからない
削除済みのコンポーネントへの参照が残っている状態です。
検知される状態： 削除されたコンポーネントを参照している要素がある。
影響： 公開サイトに、その要素が表示されません。
対処方法： 参照先のコンポーネントを復元します。不要な場合は、指摘された要素を削除します。
リンク先設定
リンクを設定した要素で、リンク先が正しく機能しない問題です。
Point： リンクの種類ごとの設定方法は、各種リンクの設定方法を参照してください。
リンク先が正しく設定されていない
リンク設定はあるものの、クリックしても目的の場所へ移動しない状態です。次のいずれかの場合に検知されます。
検知される状態 | 内容と影響 |
リンク先が未設定 | リンク設定はあるが、リンク先が空のまま。どこにも移動しない |
リンク先のIDがページ内にない |
|
リンク先の形式が正しくない | ページパス・外部URL・モーダルのどれにも当てはまらない値（例： |
リンク先のページが見つからない | 指定したページやモーダルがサイト内にない。ページの削除、パスの変更、入力ミスが原因でリンク切れになる |
対処方法は次のとおりです。
有効なリンク先を設定します。外部URLは、
https://から入力します。リンクが不要な場合は、リンク設定を削除します。
IDの設定方法は、アンカーリンク用のIDをボックスに設定するを参照してください。
リンク先のページが非公開
リンク先のページやモーダルが、非公開に設定されている状態です。
検知される状態： リンク先のページまたはモーダルが、非公開に設定されている。
影響： 公開サイトからはリンク先を開けず、リンク切れになります。
対処方法： リンク先のページまたはモーダルを公開します。または、公開中のページ・モーダルにリンク先を変更します。リンクが不要な場合は、リンク設定を削除します。
代替テキスト
画像の内容を伝える、代替テキストに関する問題です。
画像の代替テキストが未設定
画像に代替テキストが設定されていない状態です。
検知される状態： 画像の代替テキストが空、または空白のみ。
影響： スクリーンリーダーの利用者や検索エンジンに、画像の内容が伝わりません。
リンクを設定したボックス内に、テキストのない画像だけが配置されている場合は「機能画像」として扱います。機能画像に代替テキストがないと、リンク自体に名前がない状態になります。
対処方法は、画像の役割によって異なります。
画像の役割 | 対処方法 |
内容を伝える画像 | 右パネルの[画像]タブで、[代替テキスト]に画像の内容を入力する |
装飾目的の画像 | [設定]タブで、[aria-hidden]を設定する |
機能画像 | リンクを設定した親のボックスに、[aria-label]でリンク先の内容を設定する |
設定方法は、画像ボックス：代替テキストを設定する（alt）と、「aria-label」と「aria-hidden」とはを参照してください。
サイト診断で検知されない項目
次の項目は、現在サイト診断で検知されません。必要に応じて、ライブプレビューや公開サイトで確認してください。
リッチテキスト内のHTML構造（見出しの構造のみ検知します）
リッチテキスト内のリンク先と、画像の代替テキスト
見出しレベルが下がる方向の並び（例：
<h3>の次に<h2>）プロパティを紐付けたリンク先や見出し
外部URLのリンク先に、実際にアクセスできるかどうか
[aria-hidden]を設定した要素内の見出し・画像・ランドマーク要素
Studioが自動で生成する構造（フォームのラベル内のリンクなど）