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

達成方法C9: content プロパティは背景画像扱いされないのではないか #1418

Open
bakera opened this issue Oct 13, 2022 · 4 comments
Assignees
Labels
達成方法集-201910 達成方法集(2019年10月版)

Comments

@bakera
Copy link
Contributor

bakera commented Oct 13, 2022

WG2 で出た話ですが、達成方法C9の以下の記述

https://waic.jp/docs/WCAG21/Techniques/css/C9

背景画像は、以下の CSS プロパティで表示させることができる:
background,
background-image,
content (:before 及び :after 疑似要素と組み合わせて使用),
list-style-image.

content プロパティが挙げられているが、content プロパティは背景画像ではなくコンテンツとしての画像を指定するものではないかという話が出ました。CSS Generated Content Module Level 3 では代替テキストを指定する方法もあり ( https://www.w3.org/TR/css-content-3/#alt )、最新の Chrome は対応しています。

Chrome + NVDA や PC-Talker + NetReader はこれに対応しているようで代替テキストを読むようです。また、代替テキストがない場合も「イメージ」などと読んで画像の存在を伝えるようです。

なお対応する原文は以下。

Background images can be included with the following CSS properties:
background,
background-image,
content, combined with the ::before and ::after pseudo-elements,
list-style-image.

原文からして書いてあるので、翻訳の誤りではありません (原文にない括弧が補われているのは翻訳の問題かもしれない)。
訳注でフォローするべきでしょうか。

@momdo momdo added the 達成方法集-201910 達成方法集(2019年10月版) label Oct 13, 2022
@momdo
Copy link
Member

momdo commented Oct 14, 2022

おそらくWG2からの指摘通りかとは思いますが、それはそれとして世間的にはそう認知されていないように感じる(MDNを見る限り)ので、そのあたりをどうにかしないといけないのかなと…。

https://developer.mozilla.org/ja/docs/Web/CSS/content#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%AE%E8%80%83%E6%85%AE

アクセシビリティの考慮
CSS で生成されるコンテンツは、 DOM には含まれません。そのため、これはアクセシビリティツリーでは表現されず、支援技術とブラウザーの組み合わせによってはアナウンスされないことがあります。そのコンテンツがページの目的を理解する上で重要な情報を含んでいるのであれば、メイン文書に含めたほうが適切です。

@bakera
Copy link
Contributor Author

bakera commented Oct 27, 2022

とりあえず訳注でケアする方向で……。

@momdo
Copy link
Member

momdo commented Nov 17, 2022

関連?になるかはわかりませんが、Remove F87というPRが出てますね(issueにメンションが飛ぶのがいやなのでリンクさせないようにしてます)
https://github.com/w3c/wcag/pull/2800

関連:
F87: 達成基準 1.3.1 の失敗例 - CSS の :before 及び :after 疑似要素並びに 'content' プロパティを用いて、非装飾のコンテンツを挿入している
https://waic.jp/docs/WCAG21/Techniques/failures/F87

@momdo
Copy link
Member

momdo commented Dec 23, 2022

@bakera
これ、文案出せますか…?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
達成方法集-201910 達成方法集(2019年10月版)
Projects
None yet
Development

No branches or pull requests

2 participants