NVDAの読み上げ順序でホームページの作りがわかる!?

NVDAは視覚障害当事者がパソコンの画面を読ませる目的で使用するのはもちろん、プログラマーやWebエンジニアの方々の間でアクセシビリティチェックツールとしても普及が進んでいます。
NVDAヘルプデスクでも、アクセシビリティの検証を行う事があり、気付いた事があります。
例えば「リンク 見出し レベル3 何々」のような読まれ方と、「見出し レベル3 リンク 何々」のような読まれ方の違いがあるのです。
<a href=”https://nvda.help”><h3>NVDAヘルプデスク</h3></a>では、「リンク 見出し レベル3 NVDAヘルプデスク」と読まれ、
<h3><a href=”https://nvda.help”>NVDAヘルプデスク</a></h3>では、「見出し レベル3 リンク NVDAヘルプデスク」と読まれます。
実際にHTMLで記述した結果は下記のリンクのようになります。

NVDAヘルプデスク

NVDAヘルプデスク

画面的には全く同じになっているはずですが、NVDAで読ませると読み方が変わります。
これは、htmlタグで、リンクタグの中に見出しタグを入れているのか、見出しタグの中にリンクタグを入れているのかで変わっています。
他のスクリーンリーダーでは、変化がない様子なので、NVDAならではの特徴と言えます。

参考情報

NVDAには、開発者向けの物が公開されており、ウェブアクセシビリティー基盤委員会のホームページの「W3C エディターズドラフト Understanding WCAG 2.1 解説書」や総務省の「みんなの公共サイト運用ガイドライン」の中に、アクセシビリティを確保する為に必要な基準が詳しく載っていますので、ホームページ作り等に携わられている方々でこの記事をご覧になられた際はご活用ください。
開発者の為のNVDA(NVDA日本語チームのページに遷移します※現在はWindows8.1以降が対象環境です)
WCAG 2.1 解説書(ウェブアクセシビリティ基盤委員会のページに遷移します)
みんなの公共サイト運用ガイドライン(総務省の公開しているPDFファイルです)