HTMLとCSSで実装したほうがいいUI、JavaScriptも使ったほうがいいUI
自己紹介
株式会社ゆめみ
フロントエンドの駆け出しテックリードをやっています
アクセシビリティとクラフトビールとウイスキーに興味があります
HTMLとCSSでやったほうがいいこと
メディアクエリ（width、prefers-color-scheme最近はコンテナクエリも）でのUI切り替え
擬似クラス（特に静的なもの、:nth-child、:empty）でのUI切り替え
例
code:tsx
// SSR されるコンポーネントで
const media = useMediaType(); // "SP" | "PC"
const itemsToShown = items.
slice(0, media === "SP" ? 8 : 9)
// ...
なぜ？
（SSRの場合）ハイドレーションエラーや一瞬表示されないなど
code:css
@media (width <= 30em) {
.items:nth-child(n+8) {
display: none;
}
}
他にも
JavaScriptも使ったほうがいいこと
タブ（:targetとアンカーリンクで作るやつ）
ダイアログ（:targetとアンカーリンクで作るやつ）
カスタムチェックボックス（display:noneなチェックボックスを+で作るやつ）
ドロップダウンメニュー（:hoverと+で作るやつ）
なぜ？
UIの一般的な挙動（ユーザーが期待する挙動）から外れてしまう！
ユーザー「おっ、タブや！ Tabキーでフォーカスして、左右キーで切り替えて…」
ユーザー「できへん😭」
ユーザーが期待する挙動って？
→ARIA Authoring Practices Guide (APG)を読もう！！！
どない実装すんねん
キーボードのフォーカス制御
支援技術への情報を追加（ role、aria-*）
そんなん全部実装してられへん
→ヘッドレスなUIライブラリを使おう！
ヘッドレスなUIライブラリ？
インタラクションのみ実装してくれている
スタイルが無いので、サイトのトンマナから外れない
例えば
Headless UI (React, Vue)
Ark UI (React, Solid, Vue)
React Aria (React)
Radix UI (React / Vue や Astro へのポートもあり)
これらや他のライブラリを選ぶ際もAPGをチェックすると安心！（たまに APGをサポートしてますよとドキュメントに書いてるライブラリに出会うとめちゃめちゃ嬉しい、ありがとうございます）
対象ブラウザやUIの要件によってはHTMLやCSSの機能を使える
アコーディオン、ディスクロージャー：<details>タグ、同タグのname属性
ダイアログやメニュー：HTMLの <dialog>要素や popover属性
カスタムチェックボックス：accent-color プロパティ、appearance: none
まとめ
HTMLのタグと属性、CSSのメディアクエリと疑似クラスとプロパティを見よう
APG読もう
ヘッドレスUIライブラリ使おう