実装 マークアップ

チェック項目

「画像の代替テキスト」とは

レベル1：必ず達成

画像やアイコンなどの非テキストコンテンツには、適した手段で代替テキストを指定してください。

<img src="homes-logo.svg" alt="LIFULL HOME'S" width="300" height="100" />

<button type="button">
  <svg viewBox="0 0 64 64" role="img" aria-label="メニュー">…</svg>
</button>

<button type="button">
  <span class="fa-solid fa-info" role="img" aria-label="情報"></span>
</button>

<img src="homes-kun.png" alt="" width="75" height="50" />

<button type="button">
  <span class="fa-brands fa-twitter" aria-hidden="true"></span>
  ツイートする
</button>

<img src="nihon-chizu.png" alt="日本地図" width="500" height="500" usemap="#map" />
<map id="map">
  <area
    shape="poly"
    coords="476,31,492,25,540,85,587,84,590,122,523,161,431,190,427,145,484,91,485,62"
    href="#hokkaido"
    alt="北海道"
  />
  …
</map>

前工程で代替テキストが指定されなかった場合の対応

代替テキストはコンテンツの一部であるため、コンテンツ設計やデザインの段階で決められることが理想です。実装段階で代替テキストが決定していない場合、代替テキスト案を書き、コンテンツオーナーと相談してください。

• An alt Decision Treeに沿って画像のタイプを判別する
• 画像が装飾的な画像ではない場合、代替テキストの考え方を参考に代替テキスト案を書き、コンテンツオーナーと相談する
• 画像が複雑な情報を含みかつ本文やキャプションに同等の情報が含まれていなかったら、本文やキャプションに説明テキストを表示できないかどうかコンテンツオーナーと相談する

チェック項目

「背景画像」とは

レベル1：必ず達成

情報を伝えている画像を CSS で背景画像として設定すると、テキストから情報を得ているユーザーに情報が伝わらなくなってしまいます。背景画像には代替テキストが設定できません。また背景画像は印刷に表示されません。

チェック項目

「ページタイトル」とは

レベル1：必ず達成

ページタイトルはブラウザーのタブや検索結果に表示されたり、スクリーンリーダーによって読み上げられます。ページの内容を把握するための重要な手がかりとしてページタイトルは重要です。

チェック項目

「見出し」とは

レベル1：必ず達成

ページの情報構造を見出しを使って整理すると、ユーザーが情報を素早く把握できるようになります。特に、スクリーンリーダーの利用者は見出しを拾い読み^※することでページの全体構造を把握しています。

参考情報

• ^※スクリーンリーダーによる見出しの拾い読みのデモ

チェック項目

「ページの言語」とは

レベル1：必ず達成

lang 属性を使うとページの全体や一部分に対して書かれている言語を明示することができます。機械がこれを読み取ることでテキストを適切に処理できるようになります。

チェック項目

「グループ化された画像」とは

レベル2：可能な限り達成

複数の画像の並びがひとまとまりの情報を表現する場合、個別の画像に代替テキストを設定すると理解が難しくなる場合があります。

カスタマーレビュー
<span>
  <img src="star-full.png" alt="星1">
  <img src="star-full.png" alt="星1">
  <img src="star-full.png" alt="星1">
  <img src="star-half.png" alt="星0.5">
  <img src="star-blank.png" alt="">
</span>

カスタマーレビュー
<span>
  <img src="star-full.png" alt="5つ星のうち3.5">
  <img src="star-full.png" alt="">
  <img src="star-full.png" alt="">
  <img src="star-half.png" alt="">
  <img src="star-blank.png" alt="">
</span>

カスタマーレビュー
<span role="img" aria-label="5つ星のうち3.5">
  <img src="star-full.png" alt="">
  <img src="star-full.png" alt="">
  <img src="star-full.png" alt="">
  <img src="star-half.png" alt="">
  <img src="star-blank.png" alt="">
</span>

チェック項目

「意味のある順序」とは

レベル2：可能な限り達成

スクリーンリーダー等の支援技術は、DOM上の要素順に従ってコンテンツを読み上げます。スタイルシートやスクリプトを使ってレイアウトを調整していると、視覚的な順序と意味順序、読み上げの順序がバラバラになってしまうことがあり、混乱を招くかもしれません。

原則として、スタイルシートを無効化しても意味の通る順序でマークアップし、スタイルシートでレイアウトを実現するようにしてください。これによって視覚的な順序と読み上げの順序が一致しなくなり、支援技術による利用が著しく阻害されると思われる場合、デザイナーと話し合ってみてください。

チェック項目

「ランドマーク領域」とは

レベル2：可能な限り達成

ページの主たる領域をランドマークとしてマークアップすると、スクリーンリーダー利用者の使い勝手を向上させることができます。

チェック項目

「改行と空白文字」とは

レベル2：可能な限り達成

ゆったりとした文字間隔を実現するためにスペース文字を文字間に挿入すると、スクリーンリーダーは語句を適切に検出できなくなり、うまく読み上げられなくなってしまいます。

チェック項目

「調整可能な文字サイズ」とは

レベル2：可能な限り達成

ユーザーの視力や認知特性に合わせるために、ブラウザーのデフォルトの文字サイズを大きく設定しているユーザーがいます。ウェブサイトが文字サイズをpx単位で指定していると、ブラウザーの文字サイズの設定が無視されてしまいます。

参考情報

• 拡大表示時のアクセシビリティー — freeeアクセシビリティー・ガイドライン
• Pixels vs. Ems: Users DO Change Font Size | by Evan Minto | Medium

チェック項目

「正しい構文と文法」とは

レベル3：できれば考慮

仕様に定められた構文と文法に準拠して HTML や CSS を記述することで、将来のウェブ技術の拡張や新しいユーザーエージェントに対して堅牢になります。