aria-level 属性の動作検証

WAI-ARIA で定義されている aria-level 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。

aria-level 属性の適用

aria-level 属性は要素にページ構造の階層レベルを付与します。
通常<h1>～<h6>タグを使用してページを階層構造にしますが、見出しタグを利用出来ない場合、見出しレベルを置き換える場合等に利用出来ます。

<div>要素を見出しタグとして使用するには、Role 属性の role="heading" と併用して

<div role="heading" aria-level="3">見出しレベル3</div>

とすると、<div>要素を<h3>タグの様に疑似的に使う事が出来ます。

aria-level を付加せずに

<div role="heading">

とすると、Microsoft edge や Firefox ではデフォルトでレベル2の階層になります。

aria-level 属性の対応状況

NVDA 2020.2jp では Microsoft Edge 85、Firefox 80 共に問題無く動作します。
PC-Talker 10 1.39 は見出しとして認識はしている様ですが、見出しジャンプのナビゲーションキーは動作しません。
ナレーターはそもそも Chromium 版 Microsoft Edge に対応が追い付いていない様子。Firefox の方がむしろちゃんと動作します。
iOS 14 VoiceOver と Safari は見出しジャンプも動作する様です。

※ 実際の動作はスクリーンリーダーとブラウザーの種類やバージョン、組み合わせで異なります

aria-level の動作確認

スクリーンリーダーと任意のブラウザーでこのページを開き、以下の「見出しテスト」にキーボードフォーカスを当てると、Role 属性、aria-level 属性が適用される場合、見出しレベル情報の読み上げ、又はナビゲーションキーのジャンプ操作が行えます。

見出しのコード

<div role="heading">見出しテスト</div>

見出しのコード

<div role="heading" aria-level="3">見出しテスト</div>