たかがボタン、されどボタン ～button要素から深ぼるボタンUIの定義について～ / BuriKaigi 2026

BuriKaigi 2026での発表内容（Webページ版）

Transcript

1. たかがボタン、されどボタン button 要素から深ぼるボタンUI の定義について BuriKaigi 2026 Day2 | 2026-01-10 ドキュメントページ やまのく（yamanoku ）
2. 今日 どんなボタンを 押してきましたか？
4. やまのく（yamanoku ） 一児の父。会社員 千葉県在住 BuriKaigi 初参加 家族で初富山 この発表を𝕏へポストしてみよう！
5. ボタンとは何か？
7. 様々なボタンたち 送信 キーワードを入力 🔍 検索 🔊 ミュート 小 中 大 ← 戻る 次へ →
8. アフォーダンス
9. シグニファイア ボタンが無効であるかどうか 送信する 送信する アイコンで何ができるかを表す
10. GUI Xerox Alto and Xerox 8010 Star
11. スキューモフィズム iPhone 登場~iOS6
12. フラットデザイン
13. これはボタンなのか？
14. ニューモフィズム・グラスモーフィズム ニューモフィズムボタン グラスモーフィズムボタン
15. マテリアルデザイン https://github.com/material-components/material-web/blob/main/docs/components/button.md
16. フラットデザインの影響 ハイパーリンク表現によるボタン
21. 1: type 属性を忘れた<button>
22. <form> <label><input type="text" name="zipCode">郵便番号</label> <button onclick="searchAddress()">住所検索</button> <label><input type="text" name="prefecture" autocomplete="address-level1">都道府県</label> <label><input type="text" name="city" autocomplete="address-level2">市区町村</label> <label><input type="text" name="address" autocomplete="address-line1">番地</label> <button>送信する</button> </form>
23. HTML Living Standard
24. type 値 挙動 submit フォームを送信する reset フォームをリセットする button 何もしない（スクリプト用）
26. HTML 2.0 <input type="submit"> HTML 4.0 <button>
27. <!-- 🔴 危険：フォーム内で意図せず送信が発生 --> <form> <button onclick="searchAddress()">住所検索</button> <button>送信する</button> </form> <!-- 🟢 用途に分けてtype指定 --> <form> <button type="button" onclick="searchAddress()">住所検索</button> <button type="submit">送信する</button> </form>
28. Lint ルールで防ぐ html-eslint: @html-eslint/require-button-type eslint-plugin-react: react/button-has-type eslint-plugin-vue: vue/html-button-has-type angular-eslint: @angular-eslint/template/button-has-type eslint-plugin-svelte: svelte/button-has-type Biome: lint/a11y/useButtonType Deno lint: jsx-button-has-type
29. Markuplint で独自設定 { "rules": { "required-attr": true, }, "nodeRules": [ { "selector": "button", "rules": { "required-attr": { "value": [ { "name": "type", "value": ["button", "reset", "submit"] } ], } }
30. type にまつわる余談 ①新しいtype 属性が提案されていた・いる type="share" （未採択） Web Share API のボタン type="selectlist" （未採択） <select> 要素内でリストボックスを開くためのボタンのため type="press" （提案中） 押下されている状態を表現
31. type にまつわる余談 ②type 属性のデフォルト値を変えたい！ Investigate making the invalid state of <button type> not submit · Issue #10462 · whatwg/html type が無効値のときにsubmit 扱いになる現在仕様を見直す提案が議論されている 互換性リスクや既存サイトへの影響が大きく、仕様変更には慎重な検討が必要とさ れている 代替案として、仕様の明確化やlint 的な警告など、破壊的変更を避ける方向性も示さ れている
32. 2: <a> で実装されたボタンUI
33. <a href="#" onclick="doSomething()">処理を実行する</a> <a href="javascript:void(0)" onclick="openModal()">モーダルを開く</a>
34. 振る舞いに注目
35. ARIA Authoring Practices Guide Button "A button is a widget that enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation." （ボタンは、フォーム送信、ダイアログを開く、アクションのキャンセル、削除操作など、アク ションやイベントをトリガーするウィジェットです） Link "A link widget provides an interactive reference to a resource. The target resource can be either external or local." （リンクは、リソースへの対話的な参照を提供します。対象リソースは外部でもローカルでも構 いません）
36. ボタン リンク 目的 アクション実行 ナビゲーション 期待される結果 何かを実行する ページ遷移・特定位置に移動する 例 モーダルを開く、削除する 別ページへ移動 リンクはどこかへ移動する、ボタンは何かをする ものと定義できる
37. キーボード操作 Button Space : Activates the button. Enter : Activates the button. Link Enter : Executes the link and moves focus to the link target. Shift + F10 (Optional): Opens a context menu for the link.
38. リンクそのものの処理を除外する処理 const link = document.getElementById('link'); link.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); link.click(); } }); link.addEventListener('keyup', (e) => { if (e.key === ' ') { e.preventDefault(); } }); link.addEventListener('contextmenu', (e) => { e.preventDefault();
39. <a> <button>
40. リンク遷移させるなら <a> を使う
41. 3: <div> で実装されたボタンUI
42. <div onclick="handleClick()">ボタン</div>
43. ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ ✨ 👉 👈 ⚡ 今すぐ押して！ ⚡
44. 暗黙の役割 <button> … ボタン <a> … リンク <img> … 画像 <table> … テーブル <div> … generic 自分自身で意味を持たない名前のない役割
45. HTML の役割は支援技術に伝わる
46. スクリーンリーダーでの違い button 「ボタン、ダイアログを開く」 div 「ダイアログを開く」 <button type="button" onclick="openDialog()">ダイアログを開く</button> <div onclick="openDialog()">ダイアログを開く</div>
47. Web Content Accessibility Guidelines (WCAG)
48. 4.1.2 名前 (name) ・役割 (role) ・値 (value) 達成基準 すべてのユーザインタフェース コンポーネント ( フォームを構成する要素、リンク、スクリプト が生成するコンポーネントなど) では、名前 (name) 及び役割 (role) は、プログラムによる解釈が 可能である。 役割を上書きすることで「ボタン」と読み上げられる しかし<button> 本来がもつキーボード操作は付与されていない <div role="button" onclick="openDialog()">ダイアログを開く</div>
49. 2.1.1 キーボード ( レベル A) 達成基準 コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キ ーボードインタフェースを通じて操作可能である。 他にも Enter や Space でアクションさせる挙動も必要 Enter はkeydown で発火し、押しっぱなしだと連続で発火する Space はkeyup で発火するが、押しっぱなしのまま Tab でフォーカス移動すると発 火しない <div role="button" tabindex="0" onclick="openDialog()">ダイアログを開く</div>
50. ガイドラインから学ぶ鉄則 Using ARIA If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. （必要なセマンティクスと振る舞いを持つネイティブHTML 要素が使えるなら、ARIA で無理やり 作るのではなく、それを使ってください） ARIA Authoring Practices Guide No ARIA is better than Bad ARIA （悪いARIA より、ARIA を使わない方がマシである）
51. ざんねんなボタンUI 実装への対処方法 ① type 属性を忘れた<button> <button> の挙動を正しく理解し、適切なtype 属性を付与する ② <a> で実装されたボタンUI HTML 要素がもつ役割を正しく認識し、適切な場面で適切な要素を扱うようにする ③ <div> で実装されたボタンUI
52. おわりに
55. たかがボタン、されどボタン
56. Thank You For Listening !!