Frontend Academy · レッスン

基盤としてのセマンティック HTML

ARIA に頼る前に button、nav、heading などのネイティブ HTML 要素を使い、組み込みのアクセシビリティを活用します。

「基盤としてのセマンティック HTML」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

セマンティックHTMLがアクセシビリティをもたらす

適切なHTML要素を使うだけで、キーボード操作への対応、スクリーンリーダーによる読み上げ、正しいARIAロールを追加コストなしで利用できます。アクセシビリティ上の問題の多くは、ネイティブ要素の代わりにdivとJavaScriptを使うことから生じます。

buttonとonClick付きのdivの比較

<button>はフォーカス可能で、スクリーンリーダーに「ボタン」と通知され、EnterキーやSpaceキーでクリックイベントが発生し、フォームの送信にも対応します。一方、<div onClick>にはこれらの機能がありません。

<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>

<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>

ボタンにはbutton、リンクにはaを使う

操作によってURLへ移動する場合は<a href>を使います。ページ上で何らかの処理を実行する場合は<button>を使います。アンカーをボタンとして使わないでください（hrefを付けず、onclickだけを使う方法です）。支援技術にとって分かりにくくなります。

見出しで文書のアウトラインを作る

論理的なアウトラインを作るため、h1からh6までを順番に使います。スクリーンリーダーの利用者は見出しを使って移動するため、レベルを飛ばすと（h1 -> h3）分かりにくい空白が生じます。

<h1>Article Title</h1>
  <h2>Section One</h2>
    <h3>Subsection</h3>
  <h2>Section Two</h2>

<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>

ランドマーク要素

HTML5のランドマーク要素（header、nav、main、aside、footer）を使うと、スクリーンリーダーの利用者はページの主要な領域間を移動できます。1ページにつき<main>は1つにします。

<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <h1>Page Title</h1>
  <article>...</article>
  <aside>Sidebar</aside>
</main>
<footer>...</footer>

リスト要素

順序なしリストには<ul>、順序付きリストには<ol>、定義リストには<dl>を使います。スクリーンリーダーは「N個の項目のリスト」と読み上げるため、意味のあるナビゲーションの手がかりになります。

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->

フォームではすべての入力欄にlabelを付ける

すべての入力欄には対応する<label>が必要です。for/idの組み合わせで両者を関連付けます。ラベルをクリックすると入力欄にフォーカスが移り、フォーカスが当たったときにスクリーンリーダーがラベルを読み上げます。

<label for="email">Email</label>
<input id="email" name="email" type="email">

<!-- Or wrap (no for/id needed): -->
<label>
  Email
  <input name="email" type="email">
</label>

グループにはfieldsetとlegendを使う

ラジオボタンなど、関連する入力欄は<fieldset>と<legend>でグループ化します。グループ内の入力欄にフォーカスが移るたびに、スクリーンリーダーがlegendを読み上げます。

<fieldset>
  <legend>Choose a plan</legend>
  <label><input type="radio" name="plan" value="free"> Free</label>
  <label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

表形式のデータにはtable要素を使う

<table>に<thead>、<tbody>、<th scope="col">を組み合わせて使います。レイアウト目的でtableを使ってはいけません。スクリーンリーダーはセルを縦横2方向に移動し、見出しを読み上げます。

article、section、figure

<article>：それだけで完結するコンテンツ（ブログ記事、コメントなど）。<section>：見出しを伴うテーマごとのグループ。<figure>と<figcaption>：キャプション付きのメディア。

ARIAは必要な場合にだけ使う

ARIAの第一原則は、ARIAを使わないことです。常にネイティブHTMLを優先します。カスタムウィジェット（コンボボックス、タブ、ツリーなど）に適したセマンティック要素がない場合にだけARIAを使います。

理解度チェック

<div onclick="...">よりも<button onclick="...">が推奨されるのはなぜですか？

セマンティックHTMLの復習

適切な要素を使います。操作にはbutton、ナビゲーションにはa、アウトラインには順番どおりのh1-h6、主要領域にはランドマーク要素（header、nav、main、footer）、リストにはul/ol、すべての入力欄にはlabel、ラジオボタングループにはfieldset/legend、表形式のデータにはtableを使います。ネイティブHTMLを使えば、追加コストなしでアクセシビリティを確保できます。ARIAは最後の手段です。

よくある質問

「基盤としてのセマンティック HTML」レッスンは無料ですか？

はい。「基盤としてのセマンティック HTML」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「基盤としてのセマンティック HTML」で何を学びますか？

ARIA に頼る前に button、nav、heading などのネイティブ HTML 要素を使い、組み込みのアクセシビリティを活用します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「基盤としてのセマンティック HTML」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る