<!--有効な月文字列--><time>2011-11</time><!--有効な日付文字列--><time>2011-11-12</time><!--有効な西暦なし日付文字列--><time>11-12</time><!--有効な時刻文字列--><time>14:54</time><time>14:54:39</time><time>14:54:39.929</time><!--有効な浮動日時文字列：日付と時刻を T または半角スペースで区切る--><time>2011-11-12T14:54</time><time>2011-11-12T14:54:39</time><time>2011-11-12T14:54:39.929</time><time>2011-11-12 14:54</time><time>2011-11-12 14:54:39</time><time>2011-11-12 14:54:39.929</time>

<time>Z</time><time>+0000</time><time>+00:00</time><time>-0800</time><time>-08:00</time>

<time>2011-11-12T14:54Z</time><time>2011-11-12T14:54+0000</time><time>2011-11-12T14:54+00:00</time><time>2011-11-12 14:54Z</time><time>2011-11-12 14:54+0000</time><time>2011-11-12 14:54+00:00</time>

<!--1週間と5日3時間20分17秒--><time>1w 5d 3h 20m 17s</time>

<!--1週間と5日（12日）3時間20分17秒--><time>P12DT3H20M17S</time>

<time datetime="2017-05-22">今日</time>

<p>△△は <time datetime="2017-07-07 19:00">7月7日</time>に開催します。</p><p>1着の記録は、<time datetime="2h 34m 56S">2時間34分56秒</time>でした。</p>

<h3>ニューヨーク散歩</h3><p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p><figure> <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景"></figure><p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

<p><a href="#c3">以下は</a> load() の使用例です。</p><figure id="c3">  <pre><code>$("#jqs-1 button").click(function() {   $("#jqs-1 .injectToMe").load("../samples/ajax_02.html table#schedule");});</code></pre></figure><p>load() は指定の URL に向けて、Ajax 要求の発行を開始します。</p>

<h3>ニューヨーク散歩</h3><p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p><figure>  <figcaption>ウェストビレッジの古い建物</figcaption>  <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景" /></figure><p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

<h3>ニューヨーク散歩</h3><p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p><figure>  <h4>ウェストビレッジ</h4>   <figcaption>ウェストビレッジの古い建物</figcaption> <!-- 誤まり -->  <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景" /></figure><p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

<h3>ニューヨーク散歩</h3><p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p><figure>  <h4>ウェストビレッジ</h4>   <p>ウェストビレッジを歩いていると古い建物が目に付きます。</p>  <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景" />  <figcaption>ウェストビレッジの古い建物</figcaption></figure><p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

<picture>  <source media="(min-width: 980px)" srcset="images/large.png">  <source media="(min-width: 640px)" srcset="images/medium.png">  <img src="images/small.png" alt="サンプル画像"> </picture>

<picture>  <source media="(min-width: 768px)"           srcset="images/large.png 1x,                  images/large_1.5x.png 1.5x,                  images/large_2x.png 2x" />  <source media="(min-width: 320px)"           srcset="images/medium.png 1x,                  images/medium_1.5x.png 1.5x,                  images/medium_2x.png 2x" />  <img src="images/small.png"        srcset="images/small_1.5x.png 1.5x,               images/small_2x.png 2x"       alt="サンプル画像" /></picture>

<picture>  <source media="(min-width: 768px)"           sizes="80vw"          srcset="images/large.png 320w,                  images/large_1.5x.png 480w,                  images/large_2x.png 640w" />  <source media="(min-width: 320px)"           sizes="80vw"          srcset="images/medium.png 320w,                  images/medium_1.5x.png 480w,                  images/medium_2x.png 640w" />  <img src="images/small.png"        sizes="80vw"       srcset="images/small_1.5x.png 480w,               images/small_2x.png 640w"       alt="サンプル画像" /></picture>

<!--誤った使い方--><picture>  <source media="(min-width: 768px)"           sizes="80vw"          srcset="images/large.png (誤り),　                  images/large_1.5x.png 1.5x (誤り),                  images/large_2x.png 2x (誤り)" />  <source media="(min-width: 320px)"           sizes="80vw"          srcset="images/medium.png (誤り),                  images/medium_1.5x.png 1.5x(誤り),                  images/medium_2x.png 2x(誤り)" />  <img src="images/small.png"        sizes="80vw"       srcset="images/small_1.5x.png 1.5x(誤り),               images/small_2x.png 2x(誤り)"       alt="サンプル画像" /></picture>

<p>mark 要素は、<mark>ハイライト</mark>されるテキストを表します。</p>

main { display: block; }

<!-- 他のコンテンツ --><main>  <h1>ジャズ</h1>  <p>ジャズは....</p>  <article>    <h2>スウィング</h2>    <p>スウィングしなければ....</p>    <p>... </p>    <p>... </p>  </article>  <article>    <h2>ビバップ</h2>    <p>ビバップとは...</p>    <p>... </p>    <p>... </p>  </article></main><!-- 他のコンテンツ -->

<main role="main">  <article>    <h1>ビンテージギター</h1>    <p>1950年代に作成された...</p>  </article></main>

ruby 要素

ruby 要素は、ルビ（ふりがな）を振るテキストの範囲を表します。

ruby 要素は、テキストにルビを振りたい場合に使用し、この要素内に対象のテキスト（ルビベース）を配置して、rt 要素でルビテキストを指定します。また、必要に応じて rb 要素、rtc 要素、rp 要素も使用することができます。

以下は文字毎のルビ（モノルビ）の例です。

<p>  <ruby>     日<rt>に</rt>    本<rt>ほん</rt>    語<rt>ご</rt>  </ruby></p>

日に 本ほん 語ご

以下は熟語のルビ（グループルビ）の例です。

<p>  <ruby>     日本語<rt>にほんご</rt>  </ruby></p>

日本語にほんご

以下は、rb要素を使って対象のテキストを明示的に示している例です。（前述の例と意味的には同じです）

<p>  <ruby>     <rb>日本語</rb><rt>にほんご</rt>  </ruby></p>

日本語にほんご

以下は、非対応ブラウザでは rt 要素の内容がそのまま表示されるので、rp 要素を記述して非対応ブラウザでは括弧で囲んだルビテキストが表示されるようにする例です。

<p>  <ruby>     日本語<rp>（</rp><rt>にほんご</rt><rp>）</rp>  </ruby></p>

日本語（にほんご）

rt 要素

rt 要素はルビテキストを表し、ruby 要素の内容となるテキストに与えられるルビ（ふりがな、説明、読み方など）として表示されます。ルビに対応していないブラウザーでは、rt 要素の内容は本文中にそのまま表示されます。

また、rt 要素の終了タグは、直後に rb、rp、rt、rtc 要素が続く場合は省略できますが、メンテナンス性を考慮すると省略しない方が良いでしょう。

rb 要素

ルビの対象となるテキスト（ルビベース：ルビを振られるテキスト）を表します。この要素は、ruby要素の子要素として使用します。

ruby 要素内に複数の rt 要素が存在する場合に、ルビ対象テキストとルビを関連付けられます。

※非標準: この機能は標準ではなく、標準化の予定もありません。Firefox のみで機能します。

以下は、rb 要素を使用した例です。

<p>  <ruby>     <rb>日</rb>    <rb>本</rb>    <rb>語</rb>    <rt>に</rt>    <rt>ほん</rt>    <rt>ご</rt>  </ruby></p>

日本語にほんご

rp 要素

rp 要素は ruby 要素に対応していないブラウザーにおいて、本文中にそのまま表示されるルビテキストを囲む括弧を表示します。ruby 要素の子要素、かつ rt 要素の前後に記述します。

ruby 要素に対応しているブラウザーでは無視され、何も表示されませんが、ruby 要素に未対応のブラウザーでは、rt 要素の前後に rp 要素の内容が表示されます。

rp 要素の内容には括弧を入れるのが一般的ですが、他の文字を入れることも可能です。

rp 要素を使う場合は、rt 要素の「前後」に rp 要素を配置する必要があります（rt 要素の間に入れることはできません）。

以下は rp 要素の使用例です。

<p>  <ruby>     日本語<rp>（</rp><rt>にほんご</rt><rp>）</rp>  </ruby></p>

日本語（にほんご）

<p>  <ruby>     日<rp>（</rp><rt>に</rt><rp>）</rp>    本<rp>（</rp><rt>ほん</rt><rp>）</rp>    語<rp>（</rp><rt>ご</rt><rp>）</rp>  </ruby></p>

日（に） 本（ほん） 語（ご）

rtc 要素

rtc 要素はルビテキストコンテナーを表します。ルビテキストコンテナーとはルビテキストの集まりを指し、1つのルビ対象テキストに対して、複数のルビを適用したい場合等に使用できます。

※ Firefox でのみ機能します。非推奨（使わないほうが良い）。

rtc 要素は、rt 要素（ルビテキスト）のコンテナを明示的に示します。次の例では、rtc 要素を使って rt 要素のコンテナを明示的に示しています。

<p>  <ruby>     日本語    <rtc><rt>にほんご</rt></rtc>  </ruby></p>

日本語にほんご

しかし、rt 要素は暗黙的なコンテナ内に配置されているので、上記の例は rtc 要素を使わずに以下のように記述することができます。

<p>     <ruby>     日本語    <rt>にほんご</rt>  </ruby></p>

日本語にほんご

rtc 要素を利用するケースとしては、1つのルビ対象テキストに対して、複数のルビを適用したい場合があります。

rtc 要素の中には暗黙的に rt 要素があるとみなされるので、rtc 要素内に直接テキストを記述することができます。

<p>     <ruby>     日本語    <rt>にほんご</rt>    <rtc>Japanese</rtc>  </ruby></p>

日本語にほんごJapanese

rtc 要素内のルビテキストを分割したい場合は、以下のように rtc 要素内に rt 要素を配置します。

<p>  <ruby>     <rb>日</rb>    <rb>本</rb>    <rb>語</rb>    <rt>に</rt>    <rt>ほん</rt>    <rt>ご</rt>    <rtc>      <rt>ni</rt>      <rt>hon</rt>      <rt>go</rt>    </rtc>  </ruby></p>

日本語にほんごnihongo

rp 要素を使用した例

<p>  <ruby>    <rb>日</rb>    <rb>本</rb>    <rb>語</rb>    <rp>（</rp>    <rt>に</rt>    <rt>ほん</rt>    <rt>ご</rt>    <rp>)</rp>    <rp>[</rp>    <rtc>      <rt>ni</rt>      <rt>hon</rt>      <rt>go</rt>    </rtc>    <rp>]</rp>  </ruby></p>

日本語（にほんご)[nihongo]

input 要素

HTML5 のフォーム関連要素で大きく変更されたのが input 要素です。

<input type="search" name="sample">

<input type="tel" name="tel_sample" />

<input type="url" name="url_sample" />

<input type="email" name="email_sample">

<input type="datetime-local" name="datetime-local_sample">

<input type="datetime-local" name="datetime-local_sample" min="2017-06-01T00:00" max="2017-06-05T00:00">

<input type="datetime-local" name="datetime-local_sample" step="300">

<input type="date" name="date_sample">

<input type="month" name="month_sample">

<input type="week" name="week_sample">

<input type="time" name="time_sample">

<input type="time" name="time" min="00:00" max="12:00" step="1">

<input type="number" name="number_sample">

<input type="number" name="number_sample2" max="0.10" step="0.01">

<input type="range" name="range_sample">

<input type="range" name="range_sample" value="30" min="0" max="100" step="5">

<input type="range" name="range" min="0.05" step="0.05">

<input type="color" name="color_sample">

<form action="" method="post" autocomplete="off"><input type="text" autocomplete="on"><input type="text" autocomplete="off">

<input type="password" name="pw" size="15" autocomplete="new-password">

<input type="text" autofocus="autofocus"><input type="text" autofocus>

<form action="" method="post" id="example">... 中略...</form><input type="submit" form="example">

<input list="citylist" tyle="text" name="city" value=""><datalist id="citylist"> <option value="Tokyo"> <option value="New York"> <option value="Paris"> <option value="London"></datalist>

<input type="datetime" name="datetime" min="2017-06-01T00:00" max="2017-06-05T00:00"><input type="number" name="num" min="10" max="200">

<input type="datetime" name="datetime" min="2017-06-01T00:00" max="2017-06-05T00:00"><input type="number" name="num" min="10" max="200">

<input type="password" maxlength="30">

<input type="password" minlength="10">

<input type="file" name="example" multiple><input type="email" name="sample_email" multiple>

<input type="text" name="postal_code" pattern="\d{3}-\d{4}" title="郵便番号は、3桁の数字、ハイフン（-）、4桁の数字で記入してください。">

<input type="text" name="postal_code" pattern="\d{5}" title="入力する値は、5桁の数字で記入してください。" required>

<input type="text" name="postal_code" placeholder="000-0000">

<input type="text" name="example" required>

<input type="number" name="number_sample" value="" step="10">

<input type="number" name="number_sample2" value="" min="5" step="5">

<input type="datetime-local" name="datetime-local_sample2" value="">

<input type="datetime-local" name="datetime-local_sample3" value="" step="10">

<form action="" method="post" novalidate>... 中略...</form>

<form action="" method="post">  <p>    <label for="name">お名前</label>    <input name="name" id="name" required>  </p>  <p>    <label for="content">内容</label>    <textarea name="content" id="content" required></textarea>  </p>  <p>    <input type="submit" name="submit" value="送信" >    <input type="submit" name="save" value="保存"  formnovalidate>  </p></form>

フォームの検証（Validation）

フォームに入力された値の検証は、以前はクライアントサイドの場合、JavaScript などで記述する必要がありましたが、HTML5 からは仕様に組み込まれるようになりました。クライアントサイドの HTML5 の内蔵フォーム検証は JavaScript ほどカスタマイズできませんが、パフォーマンスは優れています（サーバーサイドは別途 PHP 等で記述する必要があります）。

HTML5 では、以下の2通りの方法で検証を設定することができます。

• input 要素の type 属性に適切な値を指定します。例えば email を指定すると、値が妥当なメールアドレスであるかをチェックする制約が自動的に作成され検証されます。
  • type="url" ：妥当な URL が含まれているかを検証
  • type="email"：妥当なメールアドレスであるかを検証
  • type="number"：数値であるかどうかを検証
• pattern、min、max、minlength、maxlength、required などの検証関連属性を設定します。例えば required を設定すると、入力欄が空欄の場合はフォームが送信されず、エラーメッセージが表示されます。

参考ページ：

• フォームデータの検証 | MDN
• 制約の検証| MDN
• 最適なフォームの作成 | Google Developers
• ブラウザ対応状況：Can I Use Form-Validation

input 要素に適切な type 属性を指定したり、検証関連属性を設定することでその入力値に対して制約（規則）が適用され、入力された値がすべて規則に従っていれば妥当とみなされ、そうでなければ不正とみなされます。

妥当とみなされると、

• CSS の :valid疑似クラスが適用されます。これにより、妥当な要素に特定のスタイルを適用することができます。
• ユーザーがデータを送信しようとすると、（JavaScript などの他の検証が他になければ）フォームを送信します。

不正とみなされると、

• CSS の :invalid 疑似クラスが適用されます。これにより、不正な要素に特定のスタイルを適用することができます。
• ユーザーがデータを送信しようとすると、ブラウザーはエラーメッセージを表示し、フォームを送信しません。

検証は即座に実行されるため、ページが表示された直後で、ユーザーがまだフィールドに入力する前でも、フィールドが無効とマークされる可能性があります。

以下は、URL 入力用（type="url"）と Email アドレス入力用（type="email"）の input 要素に、required 属性を指定して検証する例です。

<div class="validation_sample">  <div>    <label for="url_input">URL :</label>    <input type="url" id="url_input" required>    <p> 検証：      <span class="invalid">URL が正しくありません。</span>       <span class="valid">正しい URL です。</span>     </p>  </div>  <div>    <label for="email_input">Email :</label>    <input type="email" id="email_input" required>    <p> 検証：      <span class="invalid">メールアドレスが正しくありません。</span>       <span class="valid">正しいメールアドレスです。</span>     </p>  </div></div>

ユーザーが required 属性を指定した入力欄（:required）に入力する際（:focus）に、値が正しければ（:valid）、入力欄の背景色を緑にしてメッセージ（p .valid）を緑で表示し、値が正しくなければ（:invalid）、入力欄の背景色を赤にしてメッセージ（p .invalid）を赤色で表示するようにしています。

input:focus:required:valid {  background-color:#CDFAD1;}input:focus:required:invalid {  background-color:#F1BDBE;}input + p .invalid {   display: none; }input + p .valid {   display: none; }input:focus:required:valid + p .valid {   display: inline;  color: #1BB006;}input:focus:required:invalid + p .invalid {   display: inline;  color: #CB2629;}

以下は、required 属性と minlength 属性を指定した input 要素（type="text"）と required 属性を指定したメールアドレス入力用（type="email"）の input 要素を持つフォームの例です。

送信ボタンをクリックしたり、入力欄にカーソルを置いて return キーを押してフォームを送信する際に指定した属性とタイプによる検証が行われ、不正な値の場合はブラウザによりメッセージが表示されます。

また、この例では、input:required:invalid にピンク色の背景色を指定しているので、初期状態では何も入力されていないため入力欄がピンク色になっています。

正しい値が入力されると入力中などフォーカスしている間は、input:focus:required:valid により背景色が薄緑色になります。

<form>  <div>    <label for="nameInput">お名前: </label>    <input type="text" name="nameInput" id="nameInput" minlength="3" required>  </div>  <div>    <label for="emailInput">メールアドレス: </label>    <input type="email" name="emailInput" id="emailInput" required>  </div>  <div>    <button>送信</button>  </div></form>

input:focus:required:valid {  background-color: #D9F8DA;}        input:required:invalid {  background-color: #F9DADB;}

新しいフォーム関連要素

HTML5 のフォームでは、以下のような新しいフォーム要素も追加されました。

• datalist 要素：入力候補の選択肢を提供
• output 要素：計算やユーザによるアクションの結果を表示
• progress 要素：タスクの進捗状況の表示
• meter 要素：特定の範囲にある数値を表示
• keygen 要素：鍵ペアの生成を定義（非推奨：標準から削除されました）

<label for="myBrowser">ブラウザを選択してください。</label><input list="browsers" name="myBrowser" id="myBrowser"><datalist id="browsers">  <option value="Chrome">  <option value="Firefox">  <option value="Internet Explorer">  <option value="Opera">  <option value="Safari"></datalist>

<label for="myBrowser2">ブラウザを選択してください。</label><input list="browsers2" name="myBrowser2" id="myBrowser2"><datalist id="browsers2">  <select name="browsers2">    <option value="Chrome">Chrome</option>    <option value="Firefox">Firefox</option>    <option value="Internet Explorer">Internet Explorer</option>    <option value="Opera">Opera</option>    <option value="Safari">Safari</option>  </select></datalist>

<form onsubmit="return false" oninput="result.value = a.valueAsNumber + b.valueAsNumber;">  <p>    <input type="number" name="a" id="a" value="0" >    +    <input type="number" name="b" id="b" value="0" >    =    <output name="result" for="a b"></output>  </p></form>

<form onsubmit="return false" oninput="result2.value = parseInt(a2.value)+parseInt(b2.value);">  <p>    <input type="number" id="a2" value="0" >    +    <input type="number" id="b2" value="0" >    =    <output id="result2"></output>  </p></form>

<form>価格（＄）：<input type="number" name="price" id="price"> 消費税率（％）：<input type="number" name="tax" id="tax" step="0.01">  税込み価格：<output name="total_price" id="total_price" for="price tax"></output><input type="button" onclick="document.getElementById('total_price').value =(parseInt(document.getElementById('price').value, 10) *(parseFloat(document.getElementById('tax').value, 10)/100) +parseInt(document.getElementById('price').value, 10)).toFixed(2);" value="計算する"></form>

<form>価格（＄）：<input type="number" name="price" id="price"> 消費税率（％）：<input type="number" name="tax" id="tax" step="0.01"> 税込み価格：<output name="total_price" id="total_price" for="price tax"></output><input type="button" onclick="show_price();" value="計算する"><script>function show_price() {  (document.getElementById('total_price').value =     parseInt(document.getElementById('price').value, 10) *     (parseFloat(document.getElementById('tax').value, 10)/100) +     parseInt(document.getElementById('price').value, 10)).toFixed(2);;}</script></form>

<progress value="70" max="100">70 %</progress>

<progress value="0.3">30 %</progress>

<p>ハードディスク使用率：<meter value="40" min="0" max="100">40%</meter></p>

<p>  A <meter value="20" max="100" low="30" high="80" optimum="100">20点</meter></p><p>  B <meter value="60" max="100" low="30" high="80" optimum="100">60点</meter></p><p>  C <meter value="90" max="100" low="30" high="80" optimum="100">90点</meter></p>

コード関連

<p>The <code>code</code> element represents a fragment of computercode.</p>

<pre><code class="language-pascal">var i: Integer;begin    i := 1;end.</code></pre>

var i: Integer;begin    i := 1;end.

<p><code><var>z</var> = <var>x</var> + <var>y</var></code></p>

<p>The computer said <samp>Too much cheese in tray two</samp> but I didn’t know what that meant.</p>

<p><kbd>ABC</kbd>と入力します。</p>

<p><kbd><kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>del</kbd></kbd> を押します。</p>

<p><kbd>F10</kbd> キーを押すと 「<samp><kbd>F10</kbd> が押されました</samp>」と表示されます。</p>

<p><kbd><kbd><samp>ファイル</samp></kbd>⇒<kbd><samp>新規作成</samp></kbd></kbd>を選択して下さい。</p>

<p><kbd>ファイル⇒新規作成</kbd>を選択して下さい。</p>

<p data-color="orange">オレンジ</p> <p data-color="green">メロン</p>

p[data-color="orange"] {  color: orange;  font-weight: bold;}p[data-color="green"] {  color: #449A6A;  font-weight: bold;}

<p data-add-text="追加のテキスト">Lorem ipsum dolor sit amet</p> <p data-add-text="追加のテキスト#2">Animi sint corrupti ipsum sunt</p>

p[data-add-text]::after {  content: "( "attr(data-add-text)" )";}

WAI-ARIA（または単に ARIA）はネイティブ HTML で対応できないアクセシビリティの問題がある領域を仲介するのに適しており、アクセシビリティ ツリーでの要素の解釈方法を変更する属性を指定することで機能します。

HTML5 では、役に立つ多くのセマンティックなタグを HTML に導入しました。新たな <progress> 要素のようにいくつかのタグは、ARIA で使用可能なロールと正に重複します。ARIA にも存在する HTML5 タグをブラウザがサポートする場合は、通常その要素に ARIA のロールやステートも追加する必要はありません。ARIA には HTML5 で使用できない多くのロール、ステート、プロパティが含まれており、それらは HTML5 を使用する開発者にとって引き続き有用でしょう。

役割を表す role 属性

各要素の中に「role="xxx"」という属性を記述することで、「役割」を表わすことができます。

例えば、本来特に意味を持たない div 要素に対して、ナビゲーションとして振る舞わせたければ、以下のように記述します。

<div role="navigation">...</div>

同じことは、HTML5 の nav 要素を使えば実現可能です。

<nav>...</nav>

以下は複数のボタンを組み合わせたボタンのグループですが、ボタンの親要素の div 要素に role="group" を指定する例です。

<div class="btn-group" role="group">  <button type="button" class="btn btn-default">Left</button>  <button type="button" class="btn btn-default">Middle</button>  <button type="button" class="btn btn-default">Right</button></div>

Roles（ロール・役割）には以下のようなものがあります。（ロールの分類）

• ランドマークロール（Landmark Roles）
• ウィジェットロール（Widget Roles）
• 文書構造（Document Structure）

ランドマークロール（Landmark Roles）

Landmark Roles は、Web ページ内のランドマークを表わします。例えば、role="banner" と指定されている要素は、それがバナーであることを、role="navigation" と指定されている要素は、それがナビゲーションであることを伝えます。

Landmark Roles には、以下のようなものがあります。

• banner
• complementary
• contentinfo
• form
• main
• navigation
• region
• search

ウィジェットロール（Widget Roles）

Widget Roles は、各種ウィジェット類を表わします。例えば、role="tab" と指定されている要素は、それがタブであることを、role="tabpanel" と指定されている要素は、それが各タブに紐づいて表示されるパネルでであることを伝えます。

Widget Roles には、以下のようなものがあります。

• alert
• alertdialog
• button
• checkbox
• dialog
• gridcell
• link
• log
• marquee
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• progressbar
• radio
• scrollbar
• searchbox
• slider
• spinbutton
• status
• switch
• tab
• tabpanel
• textbox
• timer
• tooltip
• treeitem

また、以下のように、複数の Widget Roles をひとまとめにするものもあります。

• combobox
• grid
• listbox
• menu
• menubar
• radiogroup
• tablist
• tree
• treegrid

文書構造（Document Structure）

Document Structure は、Web ページの文書構造を表わします。例えば、role="heading" と記述されている要素は、それが見出しであることを伝えます。

Document Structure には、以下のようなものがあります。

• application
• article
• cell
• columnheader
• definition
• directory
• document
• feed
• figure
• group
• heading
• img
• list
• listitem
• math
• none
• note
• presentation
• region
• row
• rowgroup
• rowheader
• separator
• table
• term
• toolbar

状態や性質を表す aria 属性

aria 属性は、要素の状態や性質を表すことができ、用途に応じた属性が多数用意されています。ステート（状態/States）とプロパティ（性質/Properties）の2つのタイプがあります。

ステートは、要素の「状態」を伝達し、プロパティは、要素の「性質」を伝達します。いずれも、各要素の中に「aria-xxxx="(属性値)"」という記述をすることで、「状態」や「性質」を表わすことができます。

ステートは、ユーザーの操作によって生じる状態を表わすものなので、必要に応じて JavaScript を使って、属性値をその時々で変更します。

• ステートに関する aria：多くの属性で、属性値に true または false を指定
• プロパティに関する aria：属性値に参照先の ID や数値または真偽値を指定

例えば、アイコンフォントなどそれが単に装飾目的のための場合は、aria-hidden="true" を指定します。（aria-hidden の値に「true」を指定することで、その要素が非表示であることをブラウザに伝え、読み上げをしないようにすることができます。）

<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> E-mail

また、例えばテキストの代わりに画像だけで目的を示しているボタンがあり、この視覚的なマークを見ることができないユーザー向けに目的を明確に示したい場合、aria-label属性を使用します。aria 属性は要素にラベルと説明を加える複数の仕組みを提供してくれます。

<button type="button" class="close" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>

aria-label と似たような属性にaria-labelledby があり、その目的は aria-label と同じですが、「ラベルテキストが画面上で可視である場合、aria-labelledby を使用すべきであり、aria-label を使用すべきではない」とされているようです。言い換えると、「インターフェイスが画面上で可視ラベルをもつことが不可能である場合のみ aria-label を使用する」とされているようです。

aria-labelledby を使用すると、DOM 内の別の要素の ID を要素のラベルとして指定できます。

<span id="do-label">Drink Options</span><div role="radiogroup" aria-labelledby="do-rabel"><input type="radio" name="drink_options" value="Beer"> Beer <input type="radio" name="drink_options" value="Wine"> Wine <input type="radio" name="drink_options" value="Sake"> Sake.....</div>

aria-describedby は、aria-labelledby によるラベルの提供と同様に、アクセス可能な説明を提供します。

<label for="pw">パスワード</label><input type="password" id="pw" aria-describedby="pw-help"><div id="pw-help">パスワードは8文字以上で大文字・小文字を含む必要があります。</div>

参考：ARIA ラベルと関係性（developers.google.com）

グローバルなステートおよびプロパティ

一部のステートおよびプロパティは、ロールが適用されるかどうかに関係なく、すべての要素に適用可能です。以下のステートおよびプロパティは、すべてのロール及びすべての基本マークアップ要素によってサポートされます。

• aria-atomic
• aria-busy （ステート）
• aria-controls（この要素によってコンテンツが制御されている要素を特定する。タブパネルなど。aria-controls="参照 ID"）
• aria-current （ステート/例 aria-current="page"→現在のページを表す）
• aria-describedby
• aria-details
• aria-disabled （ステート）
• aria-dropeffect
• aria-errormessage
• aria-flowto
• aria-grabbed （ステート）
• aria-haspopup（ポップアップメニューなどが存在するかどうか。tooltip は該当しない）
• aria-hidden （ステート）
• aria-invalid （ステート）
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription

ステートおよびプロパティの分類

ステートおよびプロパティは、次のように分類されています。

• ウィジェット属性
• ライブ領域属性
• ドラッグアンドドロップ属性
• 関係属性

ウィジェット属性

以下の属性は、ウィジェットロールをサポートするために使用されます。

• aria-autocomplete
• aria-checked
• aria-disabled
• aria-errormessage
• aria-expanded
• aria-haspopup
• aria-hidden
• aria-invalid
• aria-label
• aria-level
• aria-modal
• aria-multiline
• aria-multiselectable
• aria-orientation
• aria-placeholder
• aria-pressed
• aria-readonly
• aria-required
• aria-selected
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext

ライブ領域属性

この属性は、任意の要素に適用することができます。

• aria-atomic
• aria-busy
• aria-live
• aria-relevant

ドラッグアンドドロップ属性

ドラッグ可能な要素とそのドロップターゲットのような、ドラッグアンドドロップインターフェイス要素に関する情報を示す属性です。

• aria-dropeffect
• aria-grabbed

関係属性

文書構造から容易に決定することができない要素間の関係または関連を示す属性です。

• aria-activedescendant
• aria-colcount
• aria-colindex
• aria-colspan
• aria-controls
• aria-describedby
• aria-details
• aria-errormessage
• aria-flowto
• aria-labelledby
• aria-owns
• aria-posinset
• aria-rowcount
• aria-rowindex
• aria-rowspan
• aria-setsize

スクリーンリーダー限定テキスト

例えばフォームで placeholder 属性でラベルをテキストボックス内に表示したりしますが、label 要素を省略してしまうと目の不自由な方がスクリーンリーダー（Screen Reader）からラベルが読み上げられなくなってしまいます。また、アイコンなどを画像やアイコンフォントだけで表示しているコンテンツなどは、スクリーンリーダーにその意味が読み上げられません。

対策としては、スクリーンリーダには読み上げられるが、画面には表示しないようにします。

以下は、Bootstrapで使われているスクリーンリーダー限定テキストの CSS （sr-only クラス）の例です。

.sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  border: 0;}

以下は「コンテンツの非表示と更新（developers.google.com）」に掲載されている例です。

.sr-only {  position: absolute;  left: -10000px;  width: 1px;  height: 1px;  overflow: hidden;}