- このトピックには11件の返信、2人の参加者があり、最後に
により3ヶ月、 1週前に更新されました。
-
投稿
-
MW WP Form からの乗り換えで、Snow Monkey 以外のテーマでも Snow Monkey Forms のお世話になっています！
フォームのアクセシビリティを向上したく、要望を出させてください。
Snow Monkey Forms にはフォームのIDと紐づけてlabel 要素を追加できる機能があります。
同様の紐付けをラジオボタンとチェックボックスでも行いたいです。
fieldset 要素でラジオボタンやチェックボックスなど複数の要素を囲んでグループ化して、それに対して legend 要素でラベルをつけられると嬉しいです。
現状、上のようなフォームをスクリーンリーダーで読んだとき、「はい」「いいえ」だけが読み上げられて、ラベルにしたい部分との関連付けができません。
ブロックのHTML編集を試してみましたが、うまくいきませんでした。
別の方法で実現可能でしたらすみません！
ご検討いただけますと助かります。
いいねをした人:なるほどです。ご提案ありがとうございます！この辺詳しくないので良かったら少し教えてください！
例えば今 Snow Monkey Forms でフォームをつくると下記のような見た目になりますが、
お名前 [ ] Snow Monkey が好きですか [ ] はい
[ ] いいえfieldsetとlegendを使うとこういう感じになりますよね？お名前 [ ] Snow Monkey が好きですか 「Snow Monkey が好きですか」が被っちゃうことになりますが、これはこういうものというか、気になるならライティング的工夫で被らないようにするのが普通な感じですかね？
いいねをした人:それか、もういっそフォーム全体が
fieldsetで囲まれて、左側の「お名前」と「Snow Monkey が好きですか」がlegendで囲まれる（つまり、「はい・いいえ」のところは「はい・いいえ」だけ）ようにしたほうが良いのですかね…？いいねをした人:ご検討ありがとうございます！
フォームのブロック
.wp-block-snow-monkey-forms-itemがfieldsetになって、
ラベル部分（Snow Monkey が好きですか）.smf-item__labelにlegendが設定できると良いかなと思うのですがそれで Snow Monkey Forms のつくりと合うのかちょっと自信がないです。。
いいねをした人: 居ませんなるほどです。やはりそのほうが良さそうは良さそうですよね。僕も試してみないとわかりませんが、
display: contentsにしたらいけるのでは？と想像しているので、ちょっと試してみます！いいねをした人:時間あいちゃってすみません！ あまり詳しくなかったのでいろいろ調べてみたところ、
legendはfieldsetの最初の子要素でないといけない等ルールがあるみたいだったので、一応下記のような感じで変更を入れようかなと考えているところです。<div class="wp-block-snow-monkey-forms-item smf-item"> <fieldset> <legend class="smf-item__col smf-item__col--label"> <span class="smf-item__label"> <span class="smf-item__label__text">ここにラベル</span> </span> </legend> <div class="smf-item__col smf-item__col--controls"> <div class="smf-item__controls"> <div class="smf-placeholder"> ここにフォームコントロール... </div> </div> </div> </fieldset> </div>いいねをした人:と、書き込んですぐすみません、Form Design Patterns という本をみてたら「ラジオボタンやチェックボックス以外のところを fieldset と legend で囲むのは仕様上は問題ないけどくどいのでやめたほうが良い」と書いてありました。
ということは、
お名前 [ ] Snow Monkey が好きですか の方式にして、右側の「Snow Monkey が好きですか」は管理画面上では設定できるけど、実際の画面では見えなくする、みたいな形のほうが良いのかなぁという気もしてきました。右側には複数個のコントロールを入れられるし、後方互換性も気にしなくて済むので。もうちょっと考えてみます…。
いいねをした人:と、書き込んですぐすみません、Form Design Patterns という本をみてたら「ラジオボタンやチェックボックス以外のところを fieldset と legend で囲むのは仕様上は問題ないけどくどいのでやめたほうが良い」と書いてありました。
ということは、
お名前 [ ] Snow Monkey が好きですか の方式にして、右側の「Snow Monkey が好きですか」は管理画面上では設定できるけど、実際の画面では見えなくする、みたいな形のほうが良いのかなぁという気もしてきました。右側には複数個のコントロールを入れられるし、後方互換性も気にしなくて済むので。もうちょっと考えてみます…。
いいねをした人:ご検討ありがとうございます！
WCAG 達成基準 1.3.1: 情報及び関係性の達成方法 では、
fieldsetとlegendを使う他にも
aria-labelledby を使用する方法（ARIA16）がありました。ラジオボタンやチェックボックス以外（単一のコントロールとラベルで成立するもの）の邪魔にならない方法があると良いのですが🙏
いいねをした人:
- トピック「Snow Monkey Forms のラジオボタンやチェックボックスで fieldset と legend を使いたい」には新しい返信をつけることはできません。