UIコンポートネント作成の方法は今や様々な方法がありますが、JSを減らす、ないしは無くすことができればそれに越したことはありません。
ネイティブHTMLを活用することで、JSやCSSへの依存をある程度減らすことができるかもしれません。Cool native HTML elements you should already be usingを読んでとても勉強になったので、備忘録として残したいと思います。
ネイティブHTMLを使って嬉しいのか
以下のような利点があると思っています。
- JSの依存関係を考えなくても良くなる場合がある
- ブラウザネイティブなため、互換性の心配がUIライブラリと比較して小さい
- ネイティブHTMLはアクセシビリティへの配慮ができているので、ネイティブHTMLをうまく活用できるとアクセシビリティへの対策もできる
モーダルウィンド
過去にまとめたことがあるので、よければ別の記事（HTML】便利そうな dialog 使ってみた感想）を参照してください。
-
dialog要素にによりキーボードで操作可能 - モーダルを開くとフォーカスが自動的にモーダルの中に移動
- ESCキーでモーダルを閉じる
などが自動で実装されており大変便利です。
アコーディオン
details要素で追加の詳細情報を確認できるようになります。
ただ、details要素には必ずsummary要素を含まなければならず、詳細情報が非表示になった状態では、summary要素の内容のみが表示されます。
メモ
-
details要素はインタラクティブな要素の一つでもあるので、デフォルトでキーボードによるフォーカスが可能 -
details要素にはopen属性をつけることができるので、デフォルトで開いた状態も作れる -
name属性を活用することで排他的アコーディオンになる - アコーディオンのネストも可能
デモ
See the Pen
native html accordion by 小林誠 (@knicisow-the-vuer)
on CodePen.
スライダー
input 要素の type="range" を活用すると実装できます。
スライダーをつまみで調整できるインターフェースなため、大まかな値を直感的に操作しやすい反面、細かい値の微調整には向きません。
ちなみに ARIAロールは sider です
メモリ付き
範囲入力にdatalist要素を使用することで、書く値のチェックマークを表示できます。
以下のように実装します。
リアルタイム値表示
少しのJSを使用することで簡単に表現できます。が動かされると、すぐ後ろの要素の値をスライダーの値に同期させます。
デモ
See the Pen
native html slider by 小林誠 (@knicisow-the-vuer)
on CodePen.
output要素はアプリケーションの実行結果やユーザーの操作結果を表示するために使用します。spanなどでも代用できそうな気もしますが、
- name属性で名前をつけられる（formの値として送信はされない）
- フォームに配置するとリセットボタンで初期値に戻せる
- ARIAロールが
statusであり、値が変化した際に支援技術に対して通知する機能を持つ
と機能を持つので、outputを使える場面ならこれを活用する方がいいでしょう。
プログレスバー
nativeなhtmlがサポートしています。
参考: progress
See the Pen
native html progressbar by 小林誠 (@knicisow-the-vuer)
on CodePen.
これは動的な進捗状況を表現するためのものなので、単なる静的なグラフとして表現したい場合はmeter を使用します
静的なグラフ meter
棒グラフのようなゲージとしてレンダリングされます。
注意:valueだけでUIは表現できますが、meter要素を解釈しないブラウザに対するフォールバックとして、テキストを入れておくことが無難だそうです。
参考: meter
検索可能なドロップダウン
datalistやoptgroupを活用することで検索したり、グループ化を簡単に実装できます。
入力補完の候補を表示
datalist要素に id属性を指定し、そのidをinput要素のlist属性で指定することで、datalistの子要素であるoption要素が補完候補になります。
入力しながら絞り込みができるので、検索フォームで活用できます。
ちなみにinput要素にtype="range"を指定すると option で指定した位置にメモリがつくスライダーとなります。
候補のグループ化
select要素の中で、optgroup要素を使用すると、option要素をグループ化できます。
注意:
-
optgroupにはoption以外を入れることができない -
optgroupを入れ子にできない
参考: optgroup
デモ
See the Pen
native html datalist by 小林誠 (@knicisow-the-vuer)
on CodePen.
キャプション付き画像
figcaptionを使用するとキャプションを表現できますfigcaptionはfigure要素のなかの先頭か末尾におく必要があります。
以下のように書きます
![]()
src="image.jpg" alt="..." />
See the Pen
Untitled by 小林誠 (@knicisow-the-vuer)
on CodePen.
注意:figcaptionのスクローンリーダーの読み上げ対象となるので、alt と同じ文言を書いた場合、2度同じ内容が読み上げられるので注意が必要です。
参考: figcaption
マークされたテキスト
強調やハイライトを表現し、強調したいケース以外に、検索語句をハイライトとしたい場合でも使用できます。
ここテストに出ます！
まとめ
ここまで見ていただきありがとうございます。
自分も過去にspanタグやjsを無理やり駆使して、車輪の再発明をしたことがあります。😅
こういったネイティブHTMLの挙動を知っておくと、実装を効率化させたり、よりアクセシビリティに配慮されたUIコンポーネントを実装できます。
誰かの参考になると嬉しいです。
参考
Views: 0
