Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

aria-labelledby should not be output in every section #190

Open
MurakamiShinyu opened this issue Mar 10, 2024 · 1 comment
Open

aria-labelledby should not be output in every section #190

MurakamiShinyu opened this issue Mar 10, 2024 · 1 comment
Assignees
Labels
bug Something isn't working spec Spec related thing

Comments

@MurakamiShinyu
Copy link
Member

VFMのセクション分け(sectionization)の仕様で

  • 見出しの id 属性値をセクションの aria-labelledby 属性へ値をコピーします

としましたが、これはアクセシビリティ的にあまりよくなかったかもしれません。次の記事を参照:

ウェブアクセシビリティの基本:ランドマークロールを理解する
https://www.to-r.net/media/landmark/

region

role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。
regionロールにするにはsection要素を使ってマークアップします。
section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。
section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです。

ところがアクセシブルネームを与えることで、section要素は暗黙のロールをregionに変更し、ランドマークになることができます。アクセシブルネームをつける方法としては、aria-labelledby属性、aria-label属性、title属性の3種類の方法がありますが、可視の見出し要素に関連付けるaria-labelledbyで実装するのがベストです。

<section aria-labelledby="name">
  <h1 id="name">Region Heading</h1>
</section>

aria-labelledby属性を使ってアクセシブルネームをつけた例

しかし、ウェブページ内すべてのsection要素にアクセシブルネームをつけるのは誤ったアプローチです。ランドマークが多すぎると、目的の位置に到達することが難しくなるためです。

また、MDNのARIA: region ロールにもアクセシビリティに関する懸念が次のように書かれています:

控えめに使用してください! ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。

@MurakamiShinyu MurakamiShinyu added the bug Something isn't working label Mar 10, 2024
@MurakamiShinyu MurakamiShinyu added the spec Spec related thing label Mar 10, 2024
@MurakamiShinyu
Copy link
Member Author

要調査:アクセシビリティ的に本当に悪影響があるのか?

aria-labelledby属性の出力をやめるとなると、すでにこれをCSSのセレクタに利用していたらそれが使えなくなる。([aria-labelledby="ID"] ではなくて :has(> #ID) を使うこと)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working spec Spec related thing
Projects
None yet
Development

No branches or pull requests

2 participants