Zenn
👨‍👦

WAI-ARIA 1.2のRequired Owned Elementsについて理解したい

に公開
HTML
アクセシビリティ
tech

背景

HTML Living Standardのコンテンツモデルのように、WAI-ARIAの仕様にも親要素によって含めることができるroleが決まってるか確認したかった。

Required Owned Elements

早速だけどあるらしい。
5.2.6 Required Owned Elements / WAI-ARIA 1.2

Any element that will be owned by the element with this role. For example, an element with the role list will own at least one element with the role listitem.

例えば、listであれば、少なくともlistitemを1つ含んでいなければいけない、とのこと。

WAI-ARIAのlistの仕様も確認してみると、確かにlist roleのRequired Owned Elementsにはlistitemと定義されている。

少なくとも1つ、ということは以下のようなコードは仕様上は問題ないということだろうか。

<div role="list">
  <div>Group 1</div>
  <div role="listitem">item 1</div>
  <div role="listitem">item 2</div>  
</div>

違和感が非常にあるため調査を進める。

ACT Rules

ACT(Accessibility Conformance Testing) RulesはWCAGやWAI-ARIA、またその他のアクセシビリティのプラクティスへの適合性をテストするためのルールセットのようです。

こちらにはARIA required owned elementsのルールがあります。

達成基準 1.3.1 (情報及び関係性)に関連するルールですが、テストの期待として以下のように記載があります。

Each test target only owns elements with a semantic role from the required owned element list for the test target’s semantic role.

required owned elementのリストから、セマンティックロールを持つ要素のみを所有すること、とあります。

セマンティックロールを持つ要素のみを所有するという記述が、前述した少なくとも1つは含んでいなければいけないという部分と合わないように感じます。

同ページにテストケースがあるのでlistの部分に着目して確認してみます。

Passed Example 1

<div role="list">
  <span role="listitem">Item 1</span>
  <span role="listitem">Item 2</span>
</div>

listの中にはlistitemのみなので、もちろんOK。

Failed Example 1

<div role="list">
  <span>Item 1</span>
</div>

listの中にlistitemが1つもないのでNG。

Failed Example 3

<div role="list">
  <li>Item 1</li>
  <span role="link">Item 2</span>
</div>

listitemを1つ以上含んでいるのにNGになります。説明を確認すると、

This element with the list role owns an element with the listitem role, and one with the link role. The link role is not one of the required owned elements for list.

link roleはrequired owned elementsに含まれていないからということです。このことからlistitemしか含んではいけないということが推測されます。

結論…はまだ早かった…

まとめると、ulはli（とスクリプトサポート要素）しか含められないように、list roleはlistitem roleしか含めることはできなそうです。

Divider

ここでいくつかのライブラリのDividerを見てみましょう。

確認してみると、ul(list)の中にseparator roleを含めています。

  • separatorはlistのrequired owned elementsに含まれていないのに...
  • どこかに見落としがある…？

ここで一人で結論が出そうにないため、助けを求めることにしました。

コミュニティで聞く

ウェブアクセシビリティは、先ほど確認したところざっと700名もの方が参加している、誰でも参加可能なDiscordサーバーです。

こちらで質問したところ回答を頂きました。

WAI-ARIA 1.3を確認する

5.2.6 Allowed Accessibility Child Roles / WAI-ARIA 1.3

WAI-ARIA 1.3は現在草案ですが、Required Owned Elementsは、Allowed Accessibility Child Rolesという見出しに変更されています。

また、そこには以下のような記載があります。

Authors MUST only add child element with allowed roles. For example, an element with the role list can own child elements with the role listitem, but cannot own elements with the role option.

許可されたroleを持つ子要素のみを追加しなければならない、と明記されており、仕様からするとlistの子要素にはlistitemのみ。つまり、separatorを含めることはできません。

まとめ

確かにWAI-ARIA 1.2では少なくとも1つの要素を所有する。という表現でRequired Owned Elementsに定義されていないroleも含めることができたかもしれません。
しかしWAI-ARIA 1.3ではAllowed Accessibility Child Rolesに定義されていないroleは含めることができなくなる可能性がありますので、今から注意しておいたほうが良いかもしれません。

感謝

Discordサーバーの運営の皆様、回答頂いた、山崎さん(x/@chuff_chuff09)、もんどさん(x/@momdo_)ありがとうございました。

Discussion