Conversation
dadayama
requested review from
daiHash,
gamochan-smhr,
kesteer,
maiha2,
neet,
schktjm,
semijoonas and
yoriyamago
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| - 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。 | ||
|
|
||
| 3. **アクセシブルネームの紐づけの確認**: | ||
| - フォームパーツにアクセシブルネームが適切に紐づけられているかを確認します。 |
There was a problem hiding this comment.
「アクセシブルネームが適切に紐づけられている」ってどういう意味ですかね？具体的に書いたほうがいいと思います。
あと「紐づけ」という言葉が適切なのか疑問に思いました！SmartHRの文書の中でも、あまり使わないかも？
There was a problem hiding this comment.
今回は、aria-labelledbyで参照されたidが可視ラベルではなく説明テキストに設定されていたことが原因でした。
具体的に書き換えてみます！
|
|
||
| ### 画像（装飾目的の画像を除く）の例 | ||
| コントラスト比の確認対象となる画像には、以下も含まれます。 | ||
| - [Icon](https://smarthr.design/products/components/icon/) |
There was a problem hiding this comment.
Iconの場合は、全部対象なのではなく単体で意味を持つものだけなので
| - [Icon](https://smarthr.design/products/components/icon/) | |
| - [Icon](https://smarthr.design/products/components/icon/)（単体で意味を持つ場合） |
みたいな、状況を限定する言葉を入れてもいいかも知れないと思いましたが
そういった説明はあえて入れないことにしたのでしたっけ？？
There was a problem hiding this comment.
完全に記憶から抜け落ちていました！追加します。
| 3. **アクセシブルネームの参照元の確認**: | ||
| - `aria-labelledby` 属性で参照しているidが、適切な要素に設定されているかを確認します。 | ||
|
|
||
|
|
There was a problem hiding this comment.
[imo]
既にある２つのテスト方法と比べて、詳細度が違うためこのステップで何を確認すべきなのかがわかりにくいと思いました！
今あるステップは、
- アクセシブルネームが設定されているか確認する
- 設定されているアクセシブルネームが可視ラベルと一致しているか確認する
で、今回追加したいのは「 aria-labelledby によって正しくアクセシブルネームが設定できているか」なので、 1 のステップの詳細になるのではないでしょうか！
| ## テスト方法 | ||
| 1. **アクセシブルネームの確認**: | ||
| - 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane) | ||
| - `aria-labelledby` 属性で参照しているidが、適切な要素に設定されているかを確認します。 |
There was a problem hiding this comment.
記憶がほぼない状態で読んだのですが、どうしてこの属性だけ独立して言及されているのかわかりませんでした。aria-labelledby属性はアクセシブルネームの計算に使われる方法のうちの一つでしかないので、ひとつめの「開発者ツールやアクセシビリティチェックツールを使用して（…）確認」という説明だけで事足りているのではないかと思います。
関連URLのNotionに言及のある「冗長なアクセシブルネームはNGにする」については、特段 aria-labelledby だから起こった問題というわけではないように思います。例えば <label> 要素で囲う位置を広めにしていたり、単に aria-label に長いテキストを入れていた場合でも、「冗長なアクセシブルネーム」になるんじゃないかと思いました。
もし「aria-labelledby を特に気をつけたい」という意味だったとしても「適切な要素」という説明では、この項目で本来禁止したい使い方（祖先の広すぎる要素のIDが振られているせいでアクセシブルネームが長くなる）は、限定できないのではないかとおもいました。
There was a problem hiding this comment.
aria-labelledby属性の参照先が誤っていたNGチケットを参考にテスト方法を追加したのですが、確かに冗長なアクセシブルネームは他の方法でも起こり得ることですね...！
限定的に追加するのではなく、テスト方法の記載はこのままにして、テスター間で認識を揃える方向で進めようと思います！
| - [Icon](https://smarthr.design/products/components/icon/)（単体で意味を持つ場合） | ||
| - グラフ | ||
| - 文字画像 | ||
|
|
There was a problem hiding this comment.
アクセシビリティ関係なく、日本語的な気になりです。
19行目に「以下も含まれます」と書いてあるが、「〜も」という助詞は
◯◯（主に対象となる物事）があって、△△（追加で対象としたい物事）もある
という、あとに来るものを追加する役割を持つ助詞だと思います。
例： コーヒーを売っています。お菓子もあります。
（主に対象となる物事＝コーヒー、追加の対象＝お菓子）
今回の19行目は
◯◯が対象です。以下も含まれます。
↑省略せずに書くとこういう意味を持つ文章ということでしょうか？主な対象になる要素が省略されているということでしょうか？
あるいは、特に「も」に、追加の助詞としての意味はなく「以下が対象です」と書き換えられる文でしょうか？
There was a problem hiding this comment.
例として挙げているIconやグラフや文字画像以外にも、意味のある画像であった場合にはコントラスト比の対象になると考えたので、あえて「も」を使用しました。
この項目では「主に対象となる物事」がIcon・グラフ・文字画像になるので、修正します。
| 1. **アクセシブルネームの有無の確認**: | ||
| - 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane) | ||
|
|
||
| 2. **アクセシブルネームと可視ラベルの一致**: | ||
| 2. **アクセシブルネームと可視ラベルの一致の確認**: | ||
| - 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。 | ||
|
|
||
| 2. **アクセシブルネームに不要な情報がないかの確認**: |
There was a problem hiding this comment.
「の確認」続くので省略しても良さそう
| 1. **アクセシブルネームの有無の確認**: | |
| - 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane) | |
| 2. **アクセシブルネームと可視ラベルの一致**: | |
| 2. **アクセシブルネームと可視ラベルの一致の確認**: | |
| - 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。 | |
| 2. **アクセシブルネームに不要な情報がないかの確認**: | |
| 1. **アクセシブルネームの有無**: | |
| - 開発者ツールやアクセシビリティチェックツールを使用して、フォームの各要素にアクセシブルネームが設定されているかを確認します。[ユーザー補助機能のリファレンス | Chrome DevTools | Chrome for Developers](https://developer.chrome.com/docs/devtools/accessibility/reference?hl=ja#pane) | |
| 2. **アクセシブルネームと可視ラベルの一致**: | |
| - 可視のラベルがある場合、アクセシブルネームの中に可視のラベルのテキストが含まれているかを確認します。 | |
| 2. **アクセシブルネームに不要な情報がないか**: |
4 participants
課題・背景
レビュー会で議論した以下2点の対応を行ないました。
背景色と文字色のコントラスト比が4.5:1（大きな文字: 29px以上は3:1）以上あるのテスト対象である「画像」が何を指しているのか明記されておらず、テスト結果にばらつきがあった
フォームパーツにアクセシブルネームがあるのテストで、アクセシブルネームは設定されていたものの実装時の紐づけが誤っているものがあり、NGかどうかの判断ができない状態
やったこと
やらなかったこと
動作確認
関連url