Snow Monkey Forms のラジオボタンやチェックボックスで fieldset と legend を使いたい

1
いいねをした人:
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • 投稿者
    投稿
  • #133879
    mjmjsachi
    参加者
    10

    MW WP Form からの乗り換えで、Snow Monkey 以外のテーマでも Snow Monkey Forms のお世話になっています!

    フォームのアクセシビリティを向上したく、要望を出させてください。

    Snow Monkey Forms にはフォームのIDと紐づけてlabel 要素を追加できる機能があります。

    同様の紐付けをラジオボタンとチェックボックスでも行いたいです。

    fieldset 要素でラジオボタンやチェックボックスなど複数の要素を囲んでグループ化して、それに対して legend 要素でラベルをつけられると嬉しいです。

    ラジオボタンを使ったフォームの例。「Snow Monkey が好きですか?」に対して、はい/いいえの選択肢がある。

    現状、上のようなフォームをスクリーンリーダーで読んだとき、「はい」「いいえ」だけが読み上げられて、ラベルにしたい部分との関連付けができません。

    ブロックのHTML編集を試してみましたが、うまくいきませんでした。

    別の方法で実現可能でしたらすみません!

    ご検討いただけますと助かります。

    1
    いいねをした人:
    #133922
    キタジマ タカシ
    参加者
    2201

    なるほどです。ご提案ありがとうございます!この辺詳しくないので良かったら少し教えてください!

    例えば今 Snow Monkey Forms でフォームをつくると下記のような見た目になりますが、

    お名前 [          ]
    Snow Monkey が好きですか [ ] はい
    [ ] いいえ

    fieldsetlegend を使うとこういう感じになりますよね?

    お名前 [          ]
    Snow Monkey が好きですか
    Snow Monkey が好きですか

    [ ] はい
    [ ] いいえ

    「Snow Monkey が好きですか」が被っちゃうことになりますが、これはこういうものというか、気になるならライティング的工夫で被らないようにするのが普通な感じですかね?

    1
    いいねをした人:
    #133924
    キタジマ タカシ
    参加者
    2201

    それか、もういっそフォーム全体が fieldset で囲まれて、左側の「お名前」と「Snow Monkey が好きですか」が legend で囲まれる(つまり、「はい・いいえ」のところは「はい・いいえ」だけ)ようにしたほうが良いのですかね…?

    1
    いいねをした人:
    #133929
    mjmjsachi
    参加者
    10

    ご検討ありがとうございます!

    フォームのブロック .wp-block-snow-monkey-forms-itemfieldset になって、
    ラベル部分(Snow Monkey が好きですか) .smf-item__labellegend が設定できると良いかなと思うのですが

    それで Snow Monkey Forms のつくりと合うのかちょっと自信がないです。。

    0
    いいねをした人: 居ません
    #134038
    キタジマ タカシ
    参加者
    2201

    なるほどです。やはりそのほうが良さそうは良さそうですよね。僕も試してみないとわかりませんが、display: contents にしたらいけるのでは?と想像しているので、ちょっと試してみます!

    1
    いいねをした人:
    #134388
    キタジマ タカシ
    参加者
    2201

    時間あいちゃってすみません! あまり詳しくなかったのでいろいろ調べてみたところ、legendfieldset の最初の子要素でないといけない等ルールがあるみたいだったので、一応下記のような感じで変更を入れようかなと考えているところです。

    <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>
    1
    いいねをした人:
    #134389
    キタジマ タカシ
    参加者
    2201

    と、書き込んですぐすみません、Form Design Patterns という本をみてたら「ラジオボタンやチェックボックス以外のところを fieldset と legend で囲むのは仕様上は問題ないけどくどいのでやめたほうが良い」と書いてありました。

    ということは、

    お名前 [          ]
    Snow Monkey が好きですか
    Snow Monkey が好きですか

    [ ] はい
    [ ] いいえ

    の方式にして、右側の「Snow Monkey が好きですか」は管理画面上では設定できるけど、実際の画面では見えなくする、みたいな形のほうが良いのかなぁという気もしてきました。右側には複数個のコントロールを入れられるし、後方互換性も気にしなくて済むので。もうちょっと考えてみます…。

    1
    いいねをした人:
    #134390
    キタジマ タカシ
    参加者
    2201

    と、書き込んですぐすみません、Form Design Patterns という本をみてたら「ラジオボタンやチェックボックス以外のところを fieldset と legend で囲むのは仕様上は問題ないけどくどいのでやめたほうが良い」と書いてありました。

    ということは、

    お名前 [          ]
    Snow Monkey が好きですか
    Snow Monkey が好きですか

    [ ] はい
    [ ] いいえ

    の方式にして、右側の「Snow Monkey が好きですか」は管理画面上では設定できるけど、実際の画面では見えなくする、みたいな形のほうが良いのかなぁという気もしてきました。右側には複数個のコントロールを入れられるし、後方互換性も気にしなくて済むので。もうちょっと考えてみます…。

    1
    いいねをした人:
    #134393
    mjmjsachi
    参加者
    10

    ご検討ありがとうございます!

    WCAG 達成基準 1.3.1: 情報及び関係性の達成方法 では、fieldsetlegend を使う他にも
    aria-labelledby を使用する方法(ARIA16)がありました。

    ラジオボタンやチェックボックス以外(単一のコントロールとラベルで成立するもの)の邪魔にならない方法があると良いのですが🙏

    1
    いいねをした人:
    #135176
    キタジマ タカシ
    参加者
    2201

    遅くなってすみません!!!

    Snow Monkey Forms v6.1.0 で機能を追加してみました。

    アップデートして試してみてください!

    1
    いいねをした人:
    #135188
    mjmjsachi
    参加者
    10

    おおお、ご対応ありがとうございます!!!

    fieldset と legend を設定して、legendを不可視にしても読み上げられることを確認できました。
    ありがとうございました!

    1
    いいねをした人:
    #135214
    キタジマ タカシ
    参加者
    2201

    ご確認ありがとうございます!
    問題なさそうなので閉じますが、もし読み上げはあまり詳しくないので、もし不具合がでたときはまた教えてください!

    2
    いいねをした人:
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • トピック「Snow Monkey Forms のラジオボタンやチェックボックスで fieldset と legend を使いたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。