We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
VFMのセクション分け(sectionization)の仕様で
見出しの id 属性値をセクションの aria-labelledby 属性へ値をコピーします
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要素にアクセシブルネームをつけるのは誤ったアプローチです。ランドマークが多すぎると、目的の位置に到達することが難しくなるためです。
role="region"は、他に適切なランドマークが存在しない場合に使用される一般的なランドマークです。 regionロールにするにはsection要素を使ってマークアップします。 section要素はheader, footer要素の例のように、特定の条件下でロールが変わります。 section要素のデフォルトのロールは「対応するロールなし」であり、ランドマーク要素ではありません。ChromeのアクセシビリティツリーではSectionと表示されますが、これは独自の仕様のようです。
role="region"
ところがアクセシブルネームを与えることで、section要素は暗黙のロールをregionに変更し、ランドマークになることができます。アクセシブルネームをつける方法としては、aria-labelledby属性、aria-label属性、title属性の3種類の方法がありますが、可視の見出し要素に関連付けるaria-labelledbyで実装するのがベストです。
<section aria-labelledby="name"> <h1 id="name">Region Heading</h1> </section>
aria-labelledby属性を使ってアクセシブルネームをつけた例
しかし、ウェブページ内すべてのsection要素にアクセシブルネームをつけるのは誤ったアプローチです。ランドマークが多すぎると、目的の位置に到達することが難しくなるためです。
section
また、MDNのARIA: region ロールにもアクセシビリティに関する懸念が次のように書かれています:
控えめに使用してください! ランドマークロールは、文書のより大きな全体的なセクションを識別するために、控えめに使用することを意図しています。 あまりにも多くのランドマークロールを使用すると、スクリーンリーダーで「ノイズ」が発生し、ページ全体のレイアウトを理解することが難しくなります。
The text was updated successfully, but these errors were encountered:
要調査:アクセシビリティ的に本当に悪影響があるのか?
aria-labelledby属性の出力をやめるとなると、すでにこれをCSSのセレクタに利用していたらそれが使えなくなる。([aria-labelledby="ID"] ではなくて :has(> #ID) を使うこと)
[aria-labelledby="ID"]
:has(> #ID)
Sorry, something went wrong.
docs: deprecate aria-labelledby
e077b65
see #190
docs: deprecate aria-labelledby output
0a8b61c
- see #190
docs: deprecate aria-labelledby output (#191)
a72dc8d
akabekobeko
No branches or pull requests
VFMのセクション分け(sectionization)の仕様で
としましたが、これはアクセシビリティ的にあまりよくなかったかもしれません。次の記事を参照:
ウェブアクセシビリティの基本:ランドマークロールを理解する
https://www.to-r.net/media/landmark/
また、MDNのARIA: region ロールにもアクセシビリティに関する懸念が次のように書かれています:
The text was updated successfully, but these errors were encountered: