知りたいこと
みなさん button や input[type="checkbox"] って使っていますか？
個人的に使わなくていいような気がする理由
たとえば「button を入れ子にすることはできないので、親を div role="button" にする」みたいなことが起こるなら、「初めから全て button でなく div role="button" を使う」とした方が分かりやすいような・・気がします。
また input[type="checkbox"] を使っていると、:has を使わないと表現しにくいとか兄弟関係がわかりにくい記述があったりするので、ならば「初めから全て div role="checkbox" を使う」とした方が分かりやすいような・・気がします。
改めて
以上の「・・気がします」は初心者の意見なので本当にそうしていいのか？不安が残り、みなさんはいかがかと気になりました。
ご意見頂けますと幸いです。
よろしくお願いいたします。
回答2件
#1
総合スコア37568
投稿2025/08/05 09:16
編集2025/08/05 09:19buttonを入れ子にしたいケースが思いつかないです。なにか例があった方がわかりやすいのかもしれません。
また、「できるだけWAI-ARIAは使わない方がよい」という原則に従うのであれば、当然、「div role="button"ではなくbuttonを使うべき」となるかと思います。
参考：
スクリーンリーダー利用者への対応として、「適切なroleを設定すればよい」という認識は、ほとんどの場合不十分、もしくは誤っています。 各roleには細かな使い方のルールや同時に組み合わせて使用する必要のある別の属性が存在するものが多くあります。 そして、マウス・キーボードのそれぞれにおいて、洗練された操作体系が存在します。
ARIA role を使用するのであれば、これらを熟知して適切に実装し、キーボードでの操作やスクリーンリーダーでの読み上げを入念にテストする必要があります。 数多くの知識、それなりの実装時間、ブラウザやスクリーンリーダーを複数組み合わせたテスト環境など、多くのリソースを必要とします。 もしこれらが十分でないのならば、ARIA roleを使用するべきではありません。 これらがすべてそろった開発の現場は、かなりレアではないでしょうか。 ARIA role はそういったレアな現場のためのものであり、ほとんどの場合には使用を推奨できないどころか、非推奨です。
標準でないチェックボックスはいろいろ難しい - ARIA-Barriers
#2
Lhankor_Mhy さん、いつもありがとうございます
> buttonを入れ子にしたいケース
たとえば "決定" というボタンの中に "何を決定するかのメニューを表示" というボタンを置きたいな。と思ってのことでした
具体的には下記で ... をクリックしたら、<ul><li>削除</li><li>チェックを外す</li></ul>などのメニューをポップアップで表示し、その選択したメニューについての "決定" だとしようと思ったのです
html
1<button>決定<button>...</buttton></buttton>
でも、はい、すみません
下記の様にすればいいだけでした（ボタンの中にボタンがあるような見た目に引っ張られて、button の入れ子だと短慮に捉えてしまいました）
html
1<div> 2 <button>決定</button> 3 <buttton>...</buttton> 4<div>
> 標準でないチェックボックスはいろいろ難しい - ARIA-Barriers
こちらのリンクも参考になりました
わ・・なんか難しそうだったのですね・・
ありがとうございました
みなさんそれぞれかと思い意見交換へ投稿したのですが、ベストアンサーな感じでした
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。