label要素はbuttonにも適用できるの?

マテリアルデザインのスタイルガイドを見ていたら、ボタンの高さは36dpとあり、さらにクリッカブルな領域は48dpにするという記述を見つけました。

https://material.io/guidelines/components/buttons.html#buttons-style

スクリーンショット 2017-04-08 16.34.43

だとすると、button要素内に透明の領域を‥‥、とかspanやdivなど親要素つけてそこに判定を‥‥、というよりはlabel要素使うのがマークアップとしては素直かな?と思いました。

さて、果たしてlabel要素はbuttonに使っていいんでしょうか?つー訳で仕様をチェックです。

https://html.spec.whatwg.org/multipage/forms.html#the-label-element

その中に「labelable elements」という記述があるので見てみましょう。

https://html.spec.whatwg.org/multipage/forms.html#category-label

Some elements, not all of them form-associated, are categorized as labelable elements. These are elements that can be associated with a label element.

はい、buttonいました。ブラウザの実装を見てみる必要はありますが、仕様上は問題ないですね。

投稿者: maepon

okayama-js

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中