aria-level

aria-level 属性は、構造内の要素の階層レベルを定義します。

解説

階層レベルは見出し、ツリー、入れ子グリッド、入れ子タブリストなどに現れます。 DOM の祖先が正確なレベルを表していない場合、 aria-level 属性を使用して、階層構造内の階層レベル要素を定義してください。レベルは深さと共に増加します。 aria-level の値は 1 以上の整数です。

文書構造内の見出しに関しては、最初のレベルの見出し、 2 つ目のレベルの見出し、 3 つ目のレベルの見出しなどがあります。ツリーでは、ルート要素、その子要素、子要素の子要素(または孫要素)などがあります。

aria-level 属性は支援技術に階層を公開するので、ユーザーに伝えることができます。すべての ARIA 属性と同様に、ユーザーエージェントに影響を与えず、従ってユーザーエージェントによる文書構造の決定にも影響を与えません。

DOM の祖先がレベルを正確に表している場合、ユーザーエージェントは文書構造からアイテムのレベルを計算することができますので、 aria-level は冗長であるだけでなく、誤った情報を作成する危険性があります。 aria-level は、本当に文書構造から計算することが可能でない場合に、レベルの明示的な表示を提供するためにのみ使用しましょう。この属性が必要かどうかをテストしてください。ユーザーエージェントがレベルを計算できる場合は、 aria-level 属性を省略することが最善です。

heading ロール内の場合

aria-level 属性は heading ロールの要求される属性で、要素が見出しとして扱われるべきことを支援技術に示します。 <div role="heading" aria-level="1"><div> をページの主見出しとして定義します。 aria-level="2" を定義するレベル 2 の見出しは最初のサブセクション、レベル 3 はそのサブセクション、といった具合になります。

html
<div role="heading" aria-level="3">このサブセクションの見出し</div>

代わりに h1 から h6 要素を使用してください。

treegrid ロール内の場合

treegrid (en-US) の場合、 aria-level はロール row を持つ要素に対応しており、ロール gridcell を持つ要素には対応していません。行はグリッドの垂直方向の葉ノードとして動作します。グリッドセルは各行の水平方向の葉ノードです。 aria-level は行内のセルには対応していません。したがって、ツリーグリッドでは、 aria-level 属性は row ロールを持つ要素に適用されます。

利用できるノードの完全なセットが、ユーザーがツリー内でフォーカスを移動したり、ツリーをスクロールしたりする動的な読み込みのために DOM に存在しない場合、各ノードには aria-level, aria-setsize (en-US), aria-posinset (en-US) が含まれています。

<integer>

1 以上の値です。

関連するインターフェイス

Element.ariaLevel

ariaLevel プロパティは Element インターフェイスの一部で、 aria-level 属性の値を反映します。

ElementInternals.ariaLevel

ariaLevel プロパティは ElementInternals インターフェイスの一部で、 aria-level 属性の値を反映します。

関連するロール

以下のロール内で使用されます。

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# aria-level

関連情報