Theme
SD MILIEU

2021-1-13

[HTML] タグを使い分けるメリットが明確にある例

最低このタグに関してはちゃんと指定しようってものをまとめておく。

  • aタグ(JSでのルーティング時)
    • 中クリックやCtrl+クリックで別タブでリンク先を開くことが出来る。
    • SPAでrouter使用時にaタグを指定しておらず、新規タブで開けない例が結構見られてストレス
  • formタグ
    • Enterで送信ができる。
  • labelタグ
    • 関連付けられているフォームにフォーカスされる。
    • checkbox/radioの場合はクリック出来る領域が大きくなって使いやすくなる
  • button
    • TABキーで選択できる
    • フォーカス時にEnterでClickイベント発火

checkboxとかを装飾する必要がある場合、display: none は使用しない

opacity を使って実装するとTABキーによるフォーカス、Enterキーによる選択が出来ていいよって話。

アクセシビリティで気をつけるchecbox,radioのCSS