vivliostyle/vfm

aria-labelledby should not be output in every section

MurakamiShinyu opened this issue · 1 comments

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 ロールにもアクセシビリティに関する懸念が次のように書かれています:

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

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

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