【WCAG 2.0】Webアクセシビリティの「HTML」の達成方法をおさらい

「WCAG 2.0」が定義しているWebアクセシビリティ達成基準の中の「HTML」の項目をすべて確認する意図で作成しました。
HTML と XHTML の達成方法 | WCAG 2.0 達成方法集

実際にコーディングしているので、具体的な方法を知りたい方はぜひ参考にしてください!(誤っている箇所等ありましたらご指摘いただけますと幸いです)

目次

Webアクセシビリティの「HTML」の達成方法をおさらい

それでは早速見ていきましょう!公式はこちらになります。
HTML と XHTML の達成方法 | WCAG 2.0 達成方法集

H2: 同じリソースに対して隣接する画像とテキストリンクを結合する

「アイコンとリンクは1つのリンクにまとめましょう!」というものです。

トップへ戻る

というコンテンツがあったときに、画像とテキストをそれぞれaタグで囲うのではなく、まとめて囲ってあげてください。

<a href="https://haniwaman.com/">
	<img src="https://haniwaman.com/wp-content/uploads/2018/12/arrow.png" alt="" /> トップへ戻る
</a>

(参考)→ H2: 同じリソースに対して隣接する画像とテキストリンクを結合する

H4: リンク、フォームコントロール、及びオブジェクトを通して、論理的なタブ順序を作成する

ホームページは、キーボードのタブで操作することも考慮して、「タブの順番が整合性の取れた順番になるようにしましょう!」というものです。

HTMLのマークアップが正しければ基本的にはコンテンツの順番どおりの自然なタブでの移動となるはずですが、もし順番を入れ替えていたりしたら、tabindexというHTML属性を使って順番を違和感のないようにしてあげてください。

(参考)→ H4: リンク、フォームコントロール、及びオブジェクトを通して、論理的なタブ順序を作成する

H24: イメージマップの area 要素にテキストによる代替を提供する

「画像上のリンク場所を指し示すarea属性に、そのエリアの目的をテキストで用意しましょう」というもの。

イメージマップ(自分はクリッカブルマップと読んでいますが)については以下の記事で紹介しているので分からない方は参考にしてください!

以下のように、area内のaltに追加してあげる形となります。

<img src="https://haniwaman.com/wp-content/uploads/2019/05/map-area1.png" usemap="#image-map2">
<map name="image-map2">
  <area class="image-num" alt="1" title="1" href="#" coords="164,74,198,106" shape="rect" alt="ページ1へ移動する">
  <area class="image-num" alt="5" title="5" href="#" coords="168,152,201,184" shape="rect" alt="ページ5へ移動する">
</map>

(参考)→ H24: イメージマップの area 要素にテキストによる代替を提供する

H25: title 要素を用いて、ページタイトルを提供する

titleタグを使いましょう!」という当たり前の内容です。・・・が、対応できていないホームページもあるので、当たり前を大切に。

headタグ内に記載します。

<title>【WCAG 2.0】Webアクセシビリティの「HTML」の達成方法をおさらい | HPcode</title>

(参考)→ H25: title 要素を用いて、ページタイトルを提供する

H28: abbr 要素を用いて、略語の定義を提供する

abbrは略語を定義するためのHTMLタグです。「HTML」という丁度いい略語があったので、これをabbrでマークアップすると以下のようになります。

<p><code>abbr</code>は略語を定義するための<abbr title="HyperText Markup Language">HTML</abbr>タグです。</p>

(参考)→ H28: abbr 要素を用いて、略語の定義を提供する

H30: a 要素のリンクの目的を説明するリンクテキストを提供する

「リンクに指定する文字はリンク先が伝わるような内容にしましょう」というものです。「もっと見る」というリンクがよくありますが、これでは伝わりません。

「もっと」内容を具体化してあげて、「はにわまんのプロフィールを見る」のようにリンク先の内容がイメージできるものを指定してあげましょう。

<a href="">はにわまんのプロフィールを見る</a>

(参考)→ H30: a 要素のリンクの目的を説明するリンクテキストを提供する

H32: 送信ボタンを提供する

フォーム(form)に対して送信ボタンを付けてあげてください。送信ボタンとは具体的には、input type="submit"input type="image"button type="submit"の3つです。

なので、送信ボタンの処理はJavaScriptに制御せずに、ブラウザのformの動きに任せましょうということだと思います。

(参考)→ H32: 送信ボタンを提供する

H33: title 属性を用いて、リンクテキストを補足する

title属性でリンクのテキストを補足しましょう」というものです。テキスト自体で説明はしているので、追加情報のようなイメージになります。

<a href="" title="はにわまんの自己紹介と実績を見る">はにわまんのプロフィール</a>

(参考)→ H33: title 属性を用いて、リンクテキストを補足する

H34: インラインでテキストの方向を混在させるために、Unicode の right-to-left mark (RLM) 又は left-to-right mark (LRM) を使用する

文字の方向に対して、記号の位置を調整する。具体的には、左から右に読む文字では、&lrm;。右から左に読む文字では&rlm;‏を記号の後ろの挿入してあげればOK。

<span lang="ar" xml:lang="ar">مفتاح معايير الويب!‏</span>

(参考)→ H34: インラインでテキストの方向を混在させるために、Unicode の right-to-left mark (RLM) 又は left-to-right mark (LRM) を使用する

H35: applet 要素にテキストによる代替を提供する

applet要素の代替テキストを用意してあげましょう。alt属性とapplet要素のテキストとして存在していることが大切です。

<applet code="" width="300" height="300" alt="五目並べ">
   五目並べ
</applet>  

(参考)→ H35: applet 要素にテキストによる代替を提供する

H36: 送信ボタンとして用いる画像の alt 属性を使用する

送信ボタンには、input type="image"として指定することが可能です。この送信ボタンは画像になるので、何か書いてあるかをalt属性で指定してあげてください。

<form action="" method="post">
  <input type="image" name="submit" src="hoge.png" alt="送信する">
</form>

(参考)→ H36: 送信ボタンとして用いる画像の alt 属性を使用する

H37: img 要素の alt 属性を使用する

画像が見れない人に対しても、何の画像かをテキストで提示してあげる必要があります。

<img src="hoge.jpg" alt="犬と一緒に駆け回っている少年">

(参考)→ H37: img 要素の alt 属性を使用する

H39: データテーブルのキャプションとデータテーブルを関連付けるために、caption 要素を使用する

何のtableかを示すためのcaptionを用意してあげてください。

<table>
	<caption>2020年2月のカレンダー</caption>
</table> 

(参考)→ H39: データテーブルのキャプションとデータテーブルを関連付けるために、caption 要素を使用する

H40: 記述リストを使用する

「記述リスト」とはdlでのマークアップのことですね。dtの定義に対して、1つ以上のddでの説明がセットとなっているかを確認してください。

<dl title="HTML用語">
	<dt>title</dt>
	<dd>ブラウザのタブや、ブックマークとして使われます。また検索結果でも使用される値となります。</dd>
	<dt>alt</dt>
	<dd>代替テキスト。画像が表示されないときにaltのテキストが表示されたり、スクリーンリーダーで読み上げられたりします。</dd>
</dl>

(参考)→ H40: 記述リストを使用する

H42: 見出しを特定するために、h1 要素~ h6 要素を使用する

見出しを指定することで、構造的にホームページが理解しやすくなります。また、スクリーンリーダーで見出しからナビゲートできるので、ユーザーは関心のあるコンテンツから読むこともできるようになります。

<h1>HPcode</h1>
<h2>できること</h2>
<h3>Webコーディング</h3>
<h3>WordPress化</h3>
<h3>レスポンシブ化</h3>

見出しの作り方は以下でも紹介しているので、参考にしていただければと思います。

(参考)→ H42: 見出しを特定するために、h1 要素~ h6 要素を使用する

H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する

tabletdthの関係を紐付けるために、id属性とheaders属性を使いましょう」ということです。

特にcolspanrowspanでセルがまとまっていると対応するデータが分かりづらくなるので設定してあげましょう。

<table>
   <tr>
     <th rowspan="2" id="h1">見出し1</th>
     <th colspan="3" id="h2">見出し2</th>
     <th colspan="3" id="h3">見出し3</th>
   </tr>
   <tr>
     <th id="h1-1" headers="h2">見出し1-1</th>
     <th id="h1-2" headers="h2">見出し1-2</th>
     <th id="h1-3" headers="h2">見出し1-3</th>
     <th id="h2-1" headers="h3">見出し2-1</th>
     <th id="h2-2" headers="h3">見出し2-2</th>
     <th id="h2-3" headers="h3">見出し2-3</th>
   </tr>
   <tr>
    <td headers="h1">データ1</td>
    <td headers="h2 h2-1">データ2-1</td>
    <td headers="h2 h2-2">データ2-2</td>
    <td headers="h2 h2-3">データ2-3</td>
    <td headers="h3 h3-1">データ3-1</td>
    <td headers="h3 h3-2">データ3-2</td>
    <td headers="h3 h3-3">データ3-3</td>
   </tr>
  </table>

(参考)→ H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する

H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する

フォームコントロールに紐づくラベルを紐付かせる必要があります。なんのための入力項目かを指定する意味合いです。

ラベルを指定する要素

  • input type="text"
  • input type="checkbox"
  • input type="radio"
  • input type="file"
  • input type="password"
  • textarea
  • select

ラベルが不要な要素

  • input type="submit"
  • input type="reset"
  • input type="image"
  • input type="hidden"
  • button
  • input type="button"
<label for="ame">お名前</label> 
<input type="text" name="your-name" id="name">

<input type="radio" name="your-radio" id="your-radio1" value="ラジオ1">
<label for="your-radio1">ラジオ1</label>
<input type="radio" name="your-radio" id="your-radio2" value="ラジオ2">
<label for="your-radio2">ラジオ2</label>

(参考)→ H44: テキストラベルとフォームコントロールを関連付けるために、label 要素を使用する

H45: longdesc 属性を用いる

longdescは、役割としては画像のaltに近いですが、altの説明で不十分な場合に、より長い文章(コンテンツ)を外部HTMLファイルに格納して提示する点が異なります。

<img src="hoge.jpg" alt="ホゲの説明" longdesc="hoge.html">

(参考)→ H45: longdesc 属性を用いる

H46: embed 要素と一緒に noembed 要素を用いる

embed要素がサポートされていない場合に表示するコンテンツをnoembed要素で提示してあげる必要があります。

noembed要素はembed要素の内側(小要素)もしくは、直下(兄弟要素)に設置してあげます。

<embed src="hoge.mov">
  <noembed>
    <p>動画が読み込めませんでした。</p>
  </noembed>
</embed>

(参考)→ H46: embed 要素と一緒に noembed 要素を用いる

H48: リスト又はリンクのグループに、ol 要素、ul 要素、dl 要素を用いる

情報をまとめてユーザーにとって理解しやすくするために、リスト系のマークアップをしましょう!」というものです。

見栄えのためのマークアップではない点にご注意ください。

  • ul要素 → 順不同の箇条書きリスト
  • ol要素 → 順序ありのリスト
  • dl要素 → 定義(dt)と説明(dd)がセットになったリスト

情報のまとめ方に応じてリストのマークアップタグを選定してあげてください。

(参考)→ H48: リスト又はリンクのグループに、ol 要素、ul 要素、dl 要素を用いる

H49: 強調又は特別なテキストをマークアップするために、セマンティックなマークアップを使用する

セマンティックとは「タグへの意味付け」のような感じで使われます。代表的な要素としては、

  • em・・・文字の強調
  • strong・・・意味の強調
  • cite・・・引用元
  • blockquote・・・引用(ブロック)
  • quote・・・引用(インライン)
  • sub・・・下付き文字

HTML5からセマンティックなHTMLタグがたくさん登場しています。それぞれのタグの意味を知って適切にマークアップできるようにしておきましょう!

(参考)→ H49: 強調又は特別なテキストをマークアップするために、セマンティックなマークアップを使用する

H51: 表形式の情報を提示するために、テーブルのマークアップを使用する

「表形式の情報はtable要素を使いましょう!」というものです。divタグ等でもCSSで無理やり作れたりしますが、それはNGということですね。

少なくともtrthtdで表現されていることが条件となります。

(参考)→ H51: 表形式の情報を提示するために、テーブルのマークアップを使用する

H53: object 要素のボディを使用する

object要素で作られるコンテンツに対して代替テキストを用意しましょう!」というのが意図になります。

<object>
  <p>代替テキストを記載しておきます。</p>
</object>

(参考)→ H53: object 要素のボディを使用する

H54: 単語の定義実体を特定するために、dfn 要素を使用する

「文章の中で定義されている言葉はdfn要素で囲いましょう」というものです。

<p><dfn>はにわまん</dfn>は当ブログ(HPcode)のメインキャラクターです。</p>

(参考)→ H54: 単語の定義実体を特定するために、dfn 要素を使用する

H56: 入れ子になったテキストの表記方向に伴う問題を解決するために、インライン要素の dir 属性を使用する

テキストの表記の向きに対して逆向きのテキストが出てきたときにインライン要素で囲ってdir属性によって向きを指定してあげます。

  • 右から左の場合 → dir="rtl"
  • 左から右の場合 → dir="ltr"

(参考)→ H56: 入れ子になったテキストの表記方向に伴う問題を解決するために、インライン要素の dir 属性を使用する

<p>The title says "<span lang="he" dir="rtl"><span dir="rtl">פעילות הבינאום, W3C</span></span>" in Hebrew.</p>

(参考)→ H56: 入れ子になったテキストの表記方向に伴う問題を解決するために、インライン要素の dir 属性を使用する

H57: html 要素の言語属性を使用する

html要素にlang属性でHTML文書の言語を明示しましょう。ちなみに、HTML 4.01の場合は、xml:langを使用します。

<html lang="ja">

(参考)→ H57: html 要素の言語属性を使用する

H58: 自然言語の変更を指定するために、言語属性を使用する

html要素のlang属性で指定した標準の言語から異なる言語が登場する場合は、そのテキストに対してlang属性を付与してあげます。

<html lang="ja">
<head></head>
<body>
<p>ここは日本語です。</p>
<p lang-"en">This is Japanese.</p>
</body>

(参考)→ H58: 自然言語の変更を指定するために、言語属性を使用する

H59: link 要素及びナビゲーションツールを使用する

link要素を使うことで、指定したリンク先ページがどういった位置づけにいるかを明示できるようになります。

rel属性で関係性を定義して、href属性で関係をもつドキュメントへのリンクを指定します。

有用なrel属性の値としては以下のものがあるとのことです。

Start: 複数のドキュメントの中の最初のドキュメントへのリンク
Next: 一連のドキュメントにおける次のドキュメントへのリンク
Prev: 一連のドキュメントにおける前のドキュメントへのリンク
Contents: 目次の役割を果たすドキュメントへのリンク
Index: 現在のドキュメントに対して索引を提供するドキュメントへのリンク

WordPressでよく使われるのは、ページャーの次のページ、前のページを表現するときですかね。

<link rel="prev" href="https://haniwaman.com/page/2/" />
<link rel="next" href="https://haniwaman.com/page/4/" />

(参考)→ H59: link 要素及びナビゲーションツールを使用する

H60: 用語集にリンクするために、link 要素を使用する

現在のHTMLコンテンツに関係する用語集にリンクするためのlink要素を作成することがあります。

利用のケースとしては、「コンテンツの中にある用語が、別の用語集ページで定義されている場合」にリンク先を指定してあげる目的で使います。

<link rel="glossary" href="hoge.html">

(参考)→ H60: 用語集にリンクするために、link 要素を使用する

H62: ruby 要素を使用する

読み方や定義を与えるためにルビを振ってあげてください。rb要素がベーステキスト。rp要素はルビのカッコを指定するために使われます。そして、rt要素に読み方を指定します。

<p>
  <ruby>
    <rb>東京都</rb>
    <rp>(</rp>
    <rt>とうきょうと</rt>
    <rp>)</rp>
  </ruby>
</p> 

(参考)→ H62: ruby 要素を使用する

H63: データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

table要素の見出し(th要素)に対して、どの行または列に対しての見出しかを明示するためにscope属性が利用できます。

th要素のすべてにscope属性を付けて上げる必要があります。

scope属性の種類としては以下の4つです。

  • row
  • col
  • rowgroup
  • colgroup
<table>
  <tr>
    <td></td>
    <th scope="col">見出しA</th>
    <th scope="col">見出しB</th>
  </tr>
  <tr>
    <td>1.</td>
    <th scope="row">見出しC</th>
    <td>データA</td>
  </tr>
</table> 

(参考)→ H63: データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

H64: frame 要素及び iframe 要素の title 属性を使用する

frame要素とiframe要素に対して、どういった内容の埋め込みかをtitle属性で提示してあげます。また、読み込めなかったときの代替テキストとしての役割もあります。

<iframe src="hoge.html" title="広告"></iframe>

(参考)→ H64: frame 要素及び iframe 要素の title 属性を使用する

H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する

label要素を付けることが(デザイン上の都合などで)好ましくないと判断された場合、title属性で代替することも可能です。

<select title="都道府県">
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
</select> 

(参考)→ H65: label 要素を使用できない場合に、フォームコントロールを特定するために、title 属性を使用する

H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない

title属性やalt属性をあえて空にするパターンもあります。空にすることで、無視してもOKであることを明示しているということですね。

<img src="hoge.png" alt="">

(参考)→ H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない

H69: コンテンツの各セクションの開始位置に見出し要素を提供する

コンテンツの各セクションは見出しから始まっていることを確認しましょう。HTML5からsection要素があって見出しを含める慣例になっていますが、先頭を見出しにしてあげると、アクセシビリティ的にはいいということですね。

<section>
    <h2>コンテンツに対する見出し</h2>
    <p>コンテンツ内容が入ります。</p>
</section>

(参照)→ H69: コンテンツの各セクションの開始位置に見出し要素を提供する

H70: 繰り返されているコンテンツのブロックをグループ化するために、frame 要素を使用する

繰り返されているコンテンツはframe要素でグループ化してあげると、ユーザーはスキップするかコンテンツを確認するかの選択が容易になります。

(参考)→ H70: 繰り返されているコンテンツのブロックをグループ化するために、frame 要素を使用する

H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する

フォームコントロールをfieldset要素でまとめることで、利用者がフォームコントロールの関係性を理解しやすくなります。legend要素には、fieldset要素でまとめたグループを説明するためのテキストを入れてあげます。

<fieldset>
  <legend>興味があるものを選択してください</legend>
  <input type="checkbox" id="check1" name="your-check" value="check1">
  <label for="check1">check1</label>
  <input type="checkbox" id="check2" name="your-check" value="check2">
  <label for="check2">check2</label>
  <input type="checkbox" id="check3" name="your-check" value="check3">
  <label for="check3">check3</label>
</fieldset>

(参考)→ H71: fieldset 要素及び legend 要素を使用して、フォームコントロールのグループに関する説明を提供する

H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用する

table要素のコンテンツの概要を説明するためにsummary属性を使ったりします。ただし、HTML5では廃止されている属性なので注意が必要です…。

<table summary="表の概要を入れるところです。">
</table>

(参考)→ H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用する

H74: 開始タグ及び終了タグを仕様に準じて使用していることを確認する

HTMLの開始タグと終了タグの関係を正しくマークアップしましょう。特にHTML4とHTML5で終了タグの書き方が変わっていたりするので注意が必要です。

(参考)→ H74: 開始タグ及び終了タグを仕様に準じて使用していることを確認する

H75: ウェブページが well-formed であることを確認する

(参考)→ H75: ウェブページが well-formed であることを確認する

H76: クライアントサイドで瞬間的にリダイレクトするために、meta 要素の refresh を使用する

クライアントサイドでリダイレクトする際は一瞬でリダイレクトされるように設定してください。

<head>
  <meta http-equiv="refresh" content="0;URL='https://example.com/'">
</head>

(参考)→ H76: クライアントサイドで瞬間的にリダイレクトするために、meta 要素の refresh を使用する

H77: リンクテキストとそれが含まれているリスト項目とを組み合わせて、リンクの目的を特定する

リスト項目とリンクを組み合わせることでリンクの目的が特定できるようにしてあげます。

(参考)→ H77: リンクテキストとそれが含まれているリスト項目とを組み合わせて、リンクの目的を特定する

H78: リンクテキストとそれが含まれている段落とを組み合わせて、リンクの目的を特定する

段落内にあるリンクについて、同じ段落内の文章を読めばリンクの意味が特定できるようにしてあげます。

<p>
〇〇のイベントがx月x日に開催されます!
<a href="final15.html">詳細はこちら</a>
</p>

(参考)→ H78: リンクテキストとそれが含まれている段落とを組み合わせて、リンクの目的を特定する

H79: リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定する

table要素内の見出しとセルの組み合わせによってリンクの目的が特定できるようにしてあげます。

<table>
  <tr>
    <th scope="col">〇〇株式会社</th>
    <th scope="col">△△株式会社</th>
    <th scope="col">□□株式会社</th>
</tr>
<tr>
    <td><a href="hoge.html">公式サイト</a></td>
    <td><a href="hoge.html">公式サイト</a></td>
    <td><a href="hoge.html">公式サイト</a></td>
</tr>
</table>

(参考)→ H79: リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定する

H80: リンクテキストと先行する見出し要素とを組み合わせて、リンクの目的を特定する

直前の見出し要素(h1h6)と組み合わせるとリンクの目的が分かるようにしてあげます。

<h2>2020年のアクセス解析資料</h2>
<p> 
  <a href="hoge1.html">(HTML)</a>
  <a href="hoge2.pdf">(PDF)</a>
</p>

(参考)→ H80: リンクテキストと先行する見出し要素とを組み合わせて、リンクの目的を特定する

H81: リストが入れ子になっている状況で、親のリスト項目と結合したリンクテキストを用いて、入れ子になったリストの中でリンクの目的を特定する

リスト(li)が入れ子になっている場合に、リンクの目的が特定できるようにしてあげます。WordPressだとメニューでよく使われているかと思います。

<ul>
  <li><a href="parent.html">親カテゴリー</a>
    <ul>
      <li><a href="child1.html">子カテゴリー1</a></li>
      <li><a href="chidl2.html">子カテゴリー2</a></li>
      <li><a href="child3.html">子カテゴリー3</a></li>
    </ul>
  </li>
</ul>

(参考)→ H81: リストが入れ子になっている状況で、親のリスト項目と結合したリンクテキストを用いて、入れ子になったリストの中でリンクの目的を特定する

H83: 利用者の要求に応じて新しいウィンドウを開くために target 属性を使用して、そのことをリンクテキストで明示する

リンクを開く際に新しいウインドウが開く際に、リンクテキストで明示してあげる必要があります。

<a href="hoge.html" target="_blank">お問い合わせ(新しいウインドウで開きます)</a>

(参考)→ H83: 利用者の要求に応じて新しいウィンドウを開くために target 属性を使用して、そのことをリンクテキストで明示する

H84: アクションを実行するために、select 要素とともにボタンを使用する

select要素を選択しただけでアクションを起こさないようしてあげます。利用者にとって意図しない操作になる可能性が高いからですね…

<form action="" method="post">
  <label for="action">Options:</label>
  <select name="action" id="action">
    <option value="help">Help</option>
    <option value="reset">Reset</option>
    <option value="submit">Submit</option>
  </select> 
  <button type="submit" name="submit" value="submit">Do It </button>
</form>          

(参考)→ H84: アクションを実行するために、select 要素とともにボタンを使用する

H85: select 要素内の option 要素をグループ化するために、optgroup 要素を使用する

select要素内で関連する選択肢のグループがあることを確認してあげます。関連するグループがある場合は、optgroup要素でグループ化します。

<label for="food">What is your favorite food?</label>
<select id="food" name="food">
  <optgroup label="Fruits">
    <option value="1">Apples</option>
    <option value="3">Bananas</option>
    <option value="4">Peaches</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="2">Carrots</option>
    <option value="6">Cucumbers</option>
  </optgroup>
</select>

選択リストの見栄えとしては以下のようになります。

(参考)→ H85: select 要素内の option 要素をグループ化するために、optgroup 要素を使用する

H86: ASCII アート、顔文字、及びリート語にテキストによる代替を提供する

顔文字などの「視覚的でしか理解できない文字に対して代替テキストを用意してあげましょう」というものです。

<abbr title="顔文字 ばんざい">\(^o^)/</abbr>

(参考)→ H86: ASCII アート、顔文字、及びリート語にテキストによる代替を提供する

H88: 仕様に準じて HTML を使用する

仕様に準じたHTML構文(要素、属性及び属性値)となっているか確認します。HTML4からHTML5では書き方も変わっているので注意しましょう。

(参考)→ H88: 仕様に準じて HTML を使用する

H89: コンテキストに応じたヘルプを提供するために、title 属性を使用する

入力フォームに対して、ヘルプ(補足)的な役割でtitle属性を使うことができます。

<label for="address">住所</label>
<input id="address" type="text" value="" name="your-address" 
 title="東京都〇〇区〇〇町x-x-x">

(参考)→ H89: コンテキストに応じたヘルプを提供するために、title 属性を使用する

H90: label 要素又は legend 要素を使用して、必須のフォームコントロールを明示する

<!-- テキストで必須を明示パターン -->
<label for="name">名前(必須)</label> 
<input type="text" name="your-name" id="name">

<!-- アスタリスクで必須を明示パターン -->
<p>必須項目には、アスタリスク (<abbr title="必須">*</abbr>)が付いています。</p>
<label for="name">名前 <abbr title="必須">*</abbr>:</label> 
<input type="text" name="your-name" id="name">

<!-- 画像で必須を明示パターン -->
<p><img src="hoge.png" alt="(必須)">は必須項目であることを示しています。</p>
<label for="name">名前 <img src="hoge.png" alt="(必須)"></label> 
<input type="text" name="your-name" id="name">

<fieldset>
  <legend>私が関心のあるもの (必須)</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">写真</label></br>
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">水彩画</label></br>
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">アクリル画</label>
</fieldset> 

(参考)→ H90: label 要素又は legend 要素を使用して、必須のフォームコントロールを明示する

H91: HTML のフォームコントロール及びリンクを使用する

リンクやフォーム要素に対して、名前 (name)、値 (value)、状態 (state) が指定されている必要があります。詳しい対応は以下でまとめられています。

(参考)→ H91: HTML のフォームコントロール及びリンクを使用する

H93: ウェブページの id 属性値が一意的 (ユニーク) であるようにする

1つのページに対してid属性が複数あると、技術支援するツールが正しく解析できない可能性があります。

id属性は1つのページに1つという意識を持ってコーディングしていきましょう。

(参考)→ H93: ウェブページの id 属性値が一意的 (ユニーク) であるようにする

H94: 要素には重複した属性がないようにする

1つの要素の中で重複する属性がないようにしてください。動的に生成するclass属性など重複しがちなので注意が必要かもしれません…。

(参考)→ H94: 要素には重複した属性がないようにする

H95: キャプションを提供するために、track 要素を使用する

利用者が動画閲覧の際に音声が何かしらの要因で利用できない場合、track要素によってキャプションを提供しましょう、というものです。

<video poster="hoge.png" controls>
  <source src="hoge.mp4" srclang="en" type="video/mp4">
  <track src="hoge_en.vtt" kind="captions" srclang="en" label="English">
</video>

(参考)→ H95: キャプションを提供するために、track 要素を使用する

H96: 音声解説を提供するために、track 要素を使用する

(参考)→ H96: 音声解説を提供するために、track 要素を使用する

H97: nav 要素を使用して、関連したリンクをグループ化する

nav要素を使ってリンクをグルーピングしてあげましょう、というものです。

<nav aria-label="primary">
  <a href="home.html">Home</a>
  <a href="about-us.html">About Us</a>
  <a href="products.html">Products</a>
</nav>
<nav aria-label="secondary">
  <a href="adverts.html">Our Advertisers</a>
  <a href="related.html">Related Links</a>
  <a href="subsidiaries.html">Subsidiaries</a>
</nav>       

(参考)→ H97: nav 要素を使用して、関連したリンクをグループ化する

おわり

コーダーとしてはWebアクセシビリティを実現するために特に意識すべき「HTML」の達成方法について、公式を引用しつつまとめさせていただきました。

(もし解釈が誤っている部分などありましたら、ご指摘いただけますと幸いです。)

ただマークアップするだけでなく、誰もが利用しやすいホームページにするために、意識してコーディングしてみてください!

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事