注目★★★★★Lobsters
ボタンとリンクの本当の違い、HTML に統一する提案
30秒で把握
- 1ボタンとリンクはセマンティクスが異なり、ボタンは固定コンテキスト内の操作、リンクは再文脈化可能な目的地を表す
- 2現状では JavaScript か誤ったセマンティクスに頼らなければ操作ナビゲーションが実装できず、主要デザインシステムでも常態化している
- 3Button Actions 提案でボタンに action/method 属性を追加すれば、フォーム以外でも正しいセマンティクスで状態遷移を実装可能になる
要約
Web デザイナーや開発者は「ボタン」と「リンク」を見た目で区別することが多いが、HTML の意味論では根本的に異なる。リンクは目的地を示し、ユーザーがどのコンテキスト (新タブ・ブックマーク・共有など) で開くかを制御できるのに対し、ボタンは固定コンテキスト内の操作を実行するもので、こうした再文脈化ができない。Triptych Project の「Button Actions」提案は、ボタンに action と method 属性を追加して、フォーム以外でもボタンが GET/POST/DELETE などのナビゲーションを直接実行できるようにする。現在、このような操作を実装するには JavaScript か、リンクを誤りながら作り込むしかなく、セマンティック違反が主要デザインシステムでも常態化している。Button Actions が実装されれば、状態遷移を正しいセマンティクスで表現でき、Web をより単純・安全・アクセシブルにできると著者は論じている。
あなたへの影響
日本国内でも政府サイト・金融機関サイトなど JavaScript 不可の要件が増える一方、セマンティック違反のボタン実装が広がっている。
推奨：Button Actions が標準化されれば、JavaScript なしで複雑な状態遷移を正しく実装できるため、アクセシビリティ対応とメンテナンス性が大幅に改善される可能性がある。