HTML・CSS・アクセシビリティ

セマンティックな HTML とは、見た目ではなく意味に合ったタグを使うことです。<button> はボタン、<nav> はナビゲーション、<h1>〜<h6> は見出しの階層を表します。スクリーンリーダーや検索エンジンは、タグからページの構造を理解します。

div だらけの問題

<!-- よくない -->
<div class="btn" onclick="save()">保存</div>
<!-- よい -->
<button type="button" onclick="save()">保存</button>

div で作ったボタンは、Tab キーで移動できず、Enter や Space で押せず、スクリーンリーダーにも「ボタン」と読まれません。それを補うには tabindex・role・キー操作の処理を自分で足す必要があります。button を使えば最初から全部できます。ページの移動は <a href>、操作は <button> と使い分けます。header・main・footer で領域を示すと、スクリーンリーダーの利用者は目的の場所に飛べます。

フォームは、ユーザーが一番つまずく場所です。正しい HTML で書くだけで、読み上げ・自動入力・スマホのキーボードが効きます。

<label for="email">メールアドレス</label>
<input id="email" type="email" name="email" autocomplete="email" required>

• label と入力欄を結びつけると、読み上げられ、ラベルを押しても入力欄に移れる。placeholder はラベルの代わりにならない（入力すると消える）。
• type="email"・tel・number でスマホのキーボードが変わる。autocomplete で自動入力が効く。
• エラーは色だけでなく文字で示し、aria-describedby で入力欄と結びつける。
• ラジオボタンのまとまりは fieldset と legend で囲む。

入力チェックは、送信前にブラウザ（required・pattern）でも行いますが、正しさの保証は必ずサーバーで行います。

Flexbox と Grid の使い分け

「中身の大きさに合わせて並べる」なら Flexbox、「枠を先に決めて中身を入れる」なら Grid と考えると選びやすいです。余白は margin より親の gap で付けると崩れにくくなります。

/* 画面の幅で切り替える */
@media (min-width: 768px) { .list { grid-template-columns: 1fr 1fr; } }

/* 置かれた枠の幅で切り替える */
.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { display: flex; } }

メディアクエリは画面全体の幅で、コンテナクエリは親要素の幅で切り替えます。同じカードをサイドバーにもメインにも置くような部品は、コンテナクエリのほうが自然に作れます。スマホから書いて広い画面で足す（min-width）のが一般的です。<meta name="viewport" content="width=device-width, initial-scale=1"> を忘れるとスマホで縮小表示になります。

• CSS Modules：クラス名をファイルごとに自動で変えて、他の部品と衝突させない。普通の CSS で書ける。
• Tailwind CSS：flex gap-4 p-2 のような小さなクラスを HTML に並べる。CSS ファイルを行き来せずに済み、デザインのトークン（色・余白）をそろえやすい。クラスが長くなるので部品に切り出す。
• BEM などの命名規則：仕組みに頼らず名前で衝突を防ぐ。

どれを選ぶかよりも、色・余白・文字の大きさをトークン（CSS 変数など）にまとめて、チームで同じ値を使うことが大事です。

アクセシビリティ（a11y）は、目が見えにくい・マウスを使えない・色の区別がつきにくいなど、さまざまな人が同じようにサービスを使えるようにすることです。高齢の人や、片手でスマホを操作している人にも役立ちます。

WCAG の考え方

WCAG は Web のアクセシビリティの国際的なガイドラインで、4つの原則があります。多くの組織は「レベル AA」を目標にします。

aria 属性は最後の手段

aria-* 属性は、支援技術に役割や状態を伝えるためのものですが、見た目や動きは変えません。<div role="button"> にしてもキー操作は自分で作る必要があります。まず button・a・input・dialog などの正しいタグを使い、それで表せないもの（タブ・開閉の状態 aria-expanded・アイコンだけのボタンの aria-label・読み上げてほしい通知 aria-live）だけに使います。間違った aria は、何もしないより悪くなります。

自動のチェックで見つかるのは問題の一部です。自動・キーボード・読み上げの3つを組み合わせます。

• 自動チェック：Chrome の Lighthouse、axe（ブラウザ拡張・テストに組み込む @axe-core/playwright など）。コントラストやラベルの抜けを見つけられる。ただし自動で見つかるのは一部。
• キーボード：マウスを使わず Tab・Shift+Tab・Enter・Esc で全部操作できるか。モーダルを開いたらフォーカスが中に移り、閉じたら戻るか。
• スクリーンリーダー：macOS・iOS の VoiceOver、Windows の NVDA で実際に読み上げを聞く。
• 画面を 200% に拡大して崩れないか。