調査概要
スクリーンリーダーがどのようにしてランドマークを認識しユーザーに伝えるか、またそれぞれのスクリーンリーダーによってどのような違いがあるのかを調査しました。
下記のサンプルページを利用して調査をしました。
以下の3つのスクリーンリーダーについて調査をしました。
結論
各スクリーンリーダーによって、多少の違いはあるものの意味が大きくことなる項目はありませんでした。
ランドマークの記述の基本を押さえてマークアップすれば問題ないと考えられます。
調査詳細
NVDA（Windows/Chrome）
| 項目 |
スクリーンリーダーの内容 |
<header> |
バナー ランドマーク（読み上げられない時もある） |
<nav aria-label="メインナビゲーション"> |
メインナビゲーション ナビゲーション ランドマーク |
<search> |
検索 ランドマーク |
<main> |
メイン ランドマーク |
<section class="section" aria-labelledby="section1-heading"> <h2 id="section1-heading">セクション1</h2> |
セクション1 領域 |
<section class="section" aria-label="セクション2"> |
セクション2 領域 |
<div class="section" role="region" aria-label="セクション4"> |
セクション4 領域 |
<form aria-labelledby="form-name"> <p id="form-name">フォーム1</p> |
フォーム フォーム1 |
<form aria-label="フォーム2"> |
フォーム2 フォーム |
<div role="form" aria-label="フォーム4"> |
フォーム4 フォーム |
<aside> |
補足情報 ランドマーク |
<footer> |
コンテンツ情報 ランドマーク |
NVDA（Windows/Edge）
| 項目 |
スクリーンリーダーの内容 |
<header> |
バナー ランドマーク（読み上げられない時もある） |
<nav aria-label="メインナビゲーション"> |
メインナビゲーション ナビゲーション ランドマーク |
<search> |
検索 ランドマーク |
<main> |
メイン ランドマーク |
<section class="section" aria-labelledby="section1-heading"> <h2 id="section1-heading">セクション1</h2> |
セクション1 領域 |
<section class="section" aria-label="セクション2"> |
セクション2 領域 |
<div class="section" role="region" aria-label="セクション4"> |
セクション4 領域 |
<form aria-labelledby="form-name"> <p id="form-name">フォーム1</p> |
フォーム フォーム1 |
<form aria-label="フォーム2"> |
フォーム2 フォーム |
<div role="form" aria-label="フォーム4"> |
フォーム4 フォーム |
<aside> |
補足情報 ランドマーク |
<footer> |
コンテンツ情報 ランドマーク |
ナレーター（Windows/Chrome）
| 項目 |
スクリーンリーダーの内容 |
<header> |
バナーのランドマーク |
<nav aria-label="メインナビゲーション"> |
メインナビゲーション ナビゲーションのランドマーク |
<search> |
検索のランドマーク |
<main> |
メインのランドマーク |
<section class="section" aria-labelledby="section1-heading"> <h2 id="section1-heading">セクション1</h2> |
セクション1 領域のランドマーク |
<section class="section" aria-label="セクション2"> |
セクション2 領域のランドマーク |
<div class="section" role="region" aria-label="セクション4"> |
セクション4 領域のランドマーク |
<form aria-labelledby="form-name"> <p id="form-name">フォーム1</p> |
-（ランドマークとして判定されない） |
<form aria-label="フォーム2"> |
-（ランドマークとして判定されない） |
<div role="form" aria-label="フォーム4"> |
-（ランドマークとして判定されない） |
<aside> |
補助のランドマーク |
<footer> |
コンテンツ情報のランドマーク |
ナレーター（Windows/Edge）
| 項目 |
スクリーンリーダーの内容 |
<header> |
ヘッダー バナーのランドマーク |
<nav aria-label="メインナビゲーション"> |
メインナビゲーション ナビゲーションのランドマーク |
<search> |
検索のランドマーク |
<main> |
メインのランドマーク |
<section class="section" aria-labelledby="section1-heading"> <h2 id="section1-heading">セクション1</h2> |
セクション1 セクションのランドマーク |
<section class="section" aria-label="セクション2"> |
セクション2 セクションのランドマーク |
<div class="section" role="region" aria-label="セクション4"> |
セクション4 セクションのランドマーク |
<form aria-labelledby="form-name"> <p id="form-name">フォーム1</p> |
フォーム1 フォームのランドマーク |
<form aria-label="フォーム2"> |
フォーム2 フォームのランドマーク |
<div role="form" aria-label="フォーム4"> |
フォーム4 フォームのランドマーク |
<aside> |
補助・補足のランドマーク |
<footer> |
フッター コンテンツの情報のランドマーク |
VoiceOver（Mac/Chrome）
| 項目 |
スクリーンリーダーの内容 |
<header> |
バナー |
<nav aria-label="メインナビゲーション"> |
メインナビゲーション ナビゲーション |
<search> |
検索 |
<main> |
本文 |
<section class="section" aria-labelledby="section1-heading"> <h2 id="section1-heading">セクション1</h2> |
セクション1 セクション |
<section class="section" aria-label="セクション2"> |
セクション2 セクション |
<div class="section" role="region" aria-label="セクション4"> |
セクション4 セクション |
<form aria-labelledby="form-name"> <p id="form-name">フォーム1</p> |
フォーム1 フォーム |
<form aria-label="フォーム2"> |
フォーム2 フォーム |
<div role="form" aria-label="フォーム4"> |
フォーム4 フォーム |
<aside> |
捕捉（※ツールに表示された内容。記載ミス？） |
<footer> |
フッター |
VoiceOver（Mac/Safari）
| 項目 |
スクリーンリーダーの内容 |
<header> |
バナー |
<nav aria-label="メインナビゲーション"> |
メインナビゲーション ナビゲーション |
<search> |
検索 |
<main> |
メイン |
<section class="section" aria-labelledby="section1-heading"> <h2 id="section1-heading">セクション1</h2> |
セクション1 領域 |
<section class="section" aria-label="セクション2"> |
セクション2 領域 |
<div class="section" role="region" aria-label="セクション4"> |
セクション4 領域 |
<form aria-labelledby="form-name"> <p id="form-name">フォーム1</p> |
-（ランドマークとして判定されない） |
<form aria-label="フォーム2"> |
-（ランドマークとして判定されない） |
<div role="form" aria-label="フォーム4"> |
-（ランドマークとして判定されない） |
<aside> |
捕捉（※ツールに表示された内容。記載ミス？） |
<footer> |
コンテンツ情報 |
参考にさせていただいた記事
