Skip to content

add 2.4.13#61

Merged
NakajimaTakuya merged 5 commits intofeature/wcag2_2from
feature/wcag2_2--2_4_13
Jan 20, 2025
Merged

add 2.4.13#61
NakajimaTakuya merged 5 commits intofeature/wcag2_2from
feature/wcag2_2--2_4_13

Conversation

@NakajimaTakuya
Copy link
Copy Markdown

@NakajimaTakuya NakajimaTakuya commented Oct 23, 2024

#57

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html の落とし込み

内容が見た目寄りになるので統合位置はそめヲの提案通りデザイン-ビジュアル-level1-フォーカスインジケータとした。

  • 太さに関する言及
  • 背景色を使ったフォーカス表現に関する言及
  • 背景色を使ったフォーカス表現に関する言及のCase画像作成・当て込み

WG内検討箇所

  • 一応このガイドラインでは面積に対する言及をしていて太さを直接求めてるわけではない。 が、しかし実際のところ2pxにしちゃえばいいよ〜って言って仕舞えば楽なのでそれで良いんじゃないかと思いそうした
  • 実線であることを求めるか
    • 具体的な達成条件として書かれてないが推奨してる立場であることは明示されているので追加してもいいかもしれない
  • このガイドラインは上述の通り面積について言及してるのでコントラスト不足を回避するためにoutline-offsetをマイナス方向に3pxくらいめり込ますというテクはインジケータの太さをもとより太くしないと面積不足でNGとなる。
    • 本件がAAA要件なのと、overflow: hidden; なコンテンツへの対応を考えると困難になるので言及せず、可能な時は基本外側につけようねのスタンスでいようと思う。

あいさんにお願いしたい件

Case画像の作成
背景色を使ったフォーカス表現はアクティブになってる要素とそうでない要素を見比べて初めて理解できるものとなるので比較要素との距離を空けすぎてはいけないことがわかるようにしたい。
また、盛り込むかはアイデアしだいだけど、拡大鏡を使ってるとそもそも見比べ困難なのでベスプラではないんだよな〜ってところも触れられたら嬉しい

図7における画像を作ってほしいです
https://waic.jp/translations/WCAG22/Understanding/focus-appearance.html
他のはこんな感じではいってる
https://lifull.github.io/accessibility-guidelines/design-visual.html#focus-indicator

@NakajimaTakuya NakajimaTakuya marked this pull request as draft October 23, 2024 11:19
Copy link
Copy Markdown
Contributor

@shimaokk shimaokk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コメントしました!


- [達成基準 2.4.7: フォーカスの可視化を理解する](https://waic.jp/translations/WCAG21/Understanding/focus-visible.html)
- [達成基準 1.4.11: 非テキストのコントラストを理解する](https://waic.jp/translations/WCAG21/Understanding/non-text-contrast.html)
- [達成基準 2.4.13: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://waic.jp/translations/WCAG22/#focus-appearance
公式リンクしとけば間違いないんだけど、他が翻訳サイトになってるから、こっちじゃなくてもいいん?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shimaokk
修正しましたん
e40f1f4

@LIFULL-ai
Copy link
Copy Markdown

@NakajimaTakuya
Copy link
Copy Markdown
Author

@LIFULL-ai @shimaokk @chiba-hnm

例追加しました

スクリーンショット 2025-01-17 12 31 34

@NakajimaTakuya NakajimaTakuya marked this pull request as ready for review January 17, 2025 03:32
Copy link
Copy Markdown
Contributor

@chiba-hnm chiba-hnm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

コメントしました。


- [達成基準 2.4.7: フォーカスの可視化を理解する](https://waic.jp/translations/WCAG21/Understanding/focus-visible.html)
- [達成基準 1.4.11: 非テキストのコントラストを理解する](https://waic.jp/translations/WCAG21/Understanding/non-text-contrast.html)
- [達成基準 2.4.13: Focus Appearance](https://waic.jp/translations/WCAG22/Understanding/focus-appearance.html)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

翻訳サイトを参考情報としている他の箇所はすべて日本語にしているため、フォーカスの外観とするのがよいかと思いました。

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@chiba-hnm
対応しましたん
53c1f5f

Copy link
Copy Markdown
Contributor

@chiba-hnm chiba-hnm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

よいと思います!

@LIFULL-ai
Copy link
Copy Markdown

良いと思います〜OKです

@NakajimaTakuya NakajimaTakuya merged commit 00e566e into feature/wcag2_2 Jan 20, 2025
@NakajimaTakuya NakajimaTakuya deleted the feature/wcag2_2--2_4_13 branch January 20, 2025 02:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants