HTML

The aria-level attribute tells assistive technologies, with a number from 1 to 6, which heading level (h1–h6) a role="heading" element represents.

aria-level 属性

aria-level は、見出しロール（role="heading"）を付けた要素に対して「この見出しが h1〜h6 のどのレベルに相当するか」 を数値で示す ARIA 属性です。

スクリーンリーダーなどの支援技術が、文書構造を正しく把握できるようにするために使います。

使いどころ

本来の <h1>〜<h6> タグ以外の要素（例：<div> や <span>）を見出しとして使いたいとき。

その要素に role="heading" と一緒に付ける。

値の範囲

1〜6 の整数。

1 が最上位見出し（h1）、6 が最下位見出し（h6）に対応。

例

HTML

<div role="heading" aria-level="2">製品一覧</div>

上記は「<h2> 相当の見出し」だと支援技術に伝えます。

なぜ大切？

正しい見出し階層は、キーボードやスクリーンリーダーでの「見出しジャンプ」を快適にし、目次の自動生成や SEO の面でも役立ちます。

見た目だけ CSS で大きくするより、aria-level で論理構造を示す方がアクセシビリティ向上に繋がります。

まとめ

aria-level は「見出しロールの階層」を数字で教えて、支援技術に文書構造を伝える属性です。