女性向けエンジニアスクール
3秒でわかる
タグの意味どおりに要素を選んで文書を組む書き方。見出しや領域の役割が機械に伝わり、読み上げソフトや検索エンジンが構造を把握できます。
30秒図解
もう少し詳しく
どういうものか
見出しの スクリーンリーダーの利用者は、見出しだけを拾って飛ばし読みしたり、主要な領域へ一気に移動したりします。すべてが 検索エンジンにとっても、どこが本文でどこがナビゲーションかの判断材料になります。加えて、意味のある要素はブラウザが標準の振る舞いを持っています。 見出しレベルの飛ばしも起きがちです。文字サイズの都合で CSS をすべて外した状態で読んで、文書の構造が分かるかどうかを基準にします。分からなければタグの選び方が甘い、という判断ができます。 サイドバーと同じ推奨ルート・関連語を、まとめて確認できます。 LEARN BY DOING 直接関連する編と、その編を含むコースです。用語だけで終わらず、ブラウザ上で実際に手を動かせます。 のように、そのタグが何を表すかが名前から分かる要素を使って文書を組み立てる書き方です。見た目は CSS が決めるので、 から 、リストの も同じ考え方に含まれます。文字を大きくしたいから
を使う、のではなく、そこが節の見出しだから を使います。なぜ必要か
は Enter でも Space でも押せ、Tab で到達でき、押されたことを支援技術に伝えます。具体例
<!-- 意味が伝わらない書き方 -->
<div class="header">
<div class="title">ハレノヒ珈琲</div>
<div class="menu"><div>お知らせ</div></div>
</div>
<div class="content">
<div class="post-title">新豆が入りました</div>
<div>本日から販売しています。</div>
</div>
<!-- 意味が伝わる書き方 -->
<header>
<h1>ハレノヒ珈琲</h1>
<nav><ul><li><a href="/news">お知らせ</a></li></ul></nav>
</header>
<main>
<article>
<h2>新豆が入りました</h2>
<p>本日から販売しています。</p>
</article>
</main>つまずきやすいところ
onclick を付けてボタン代わりにする実装が最も多い落とし穴です。マウスでは押せますが、Tab で到達できず、Enter でも反応せず、読み上げでは「ボタン」と伝わりません。押せるものは 、移動するものは を使い分けます。 の次に を置くと、階層が壊れて読み上げの目次が狂います。大きさは CSS で調整します。 を単なる囲いとして使うのも避けます。 は見出しを伴う節を表すため、見出しが無いなら 覚え方
次に学ぶ
CSSとは？知識のつながり
この用語を、教材で使ってみる
