あまり知られていない、アクセシビリティに効果があるHTML要素のまとめ

Post on:2019年4月4日

Audio要素

<audio>タグは、音楽やオーディオストリームなどのサウンドを定義します。現在サポートされているファイル形式はMP3、WAV、OGGの3つです。

See the Pen
Audio Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<audio controls>
  <!-- Won't play because the mp3 doesn't exist -->
  <source src="cat.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Your browser does not support the audio tag.

</audio>

Blockquote要素

<blockquote>タグは、他のソースから引用されているセクションを定義します。

See the Pen
Blockquote Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<blockquote cite="https://codingcoach.io/">
  Coding Coach is a free, open-source platform which aims to connect software developers and mentors all over the world. It is built by a group of talented and passionate developers, designers, engineers, and humans who want to make the engineering world a better place to collaborate. This project was born out of a desire to provide a platform to connect mentors and mentees throughout the world at no cost. Coding Coach is created by the people, for the people.
</blockquote>

Coding Coach is a free, open-source platform which aims to connect software developers and mentors all over the world. It is built by a group of talented and passionate developers, designers, engineers, and humans who want to make the engineering world a better place to collaborate. This project was born out of a desire to provide a platform to connect mentors and mentees throughout the world at no cost. Coding Coach is created by the people, for the people.

</blockquote>

Output要素

<output>タグは計算結果を定義します。最初の入力値と2番目の入力値を出力タグに「出力」する必要があることを示すには、プラス記号と等号を使用できます。これは、結合する2つの要素のIDを含むfor属性で表すことができます。

See the Pen
Output Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<form oninput="totalWeight.value=parseInt(catAWeight.value)+parseInt(catBWeight.value)">0
  <input type="range" id="catAWeight" value="50">100
  +<input type="number" id="catBWeight" value="50">
  =<output name="totalWeight" for="catAWeight catBWeight"></output>
</form>

<form oninput="totalWeight.value=parseInt(catAWeight.value)+parseInt(catBWeight.value)">0

<input type="range" id="catAWeight" value="50">100

+<input type="number" id="catBWeight" value="50">

=<output name="totalWeight" for="catAWeight catBWeight"></output>

</form>

Picture要素

<picture>タグを使用すると、画像ソースを定義できます。ビューポートの幅に応じて拡大縮小する画像を用意する代わりに、ブラウザのビューポートを埋めるように複数の画像を定義します。

<picture>タグには2つの異なる要素が含まれています。source要素とimage要素です。

source要素には以下の属性があります。

srcset: 必須属性。表示する画像のURLを定義します。
media: CSS内で定義する可能性のある有効なメディアクエリをすべて受け入れます。
sizes: 単一の幅の値、幅の値を持つ単一のメディアクエリ、または幅の値を持つカンマ区切りのメディアクエリのリストを定義します。
type: MIMEタイプを定義します。

ブラウザはこれらの属性値を使用して最も適切な画像を読み込みます。一致した属性値を持つ最初のsource要素を使用し、後続のsource要素は無視します。

ブラウザが要素をサポートしていない場合、もしくはどの<source>タグも一致しない場合は、<img>タグを使用して下位互換性を確保します。

<picture>
  <source media="(min-width: 650px)" srcset="img_cat_fat.jpg">
  <source media="(min-width: 465px)" srcset="img_cat_fluffy.jpg">
  <img src="img_kitten.jpg" alt="Kitten" style="width:auto;">
</picture>

</picture>

Progress要素

<progress>タグはタスクの進行状況を定義します。

<progress>タグは<meter>タグの代替ではないため、ディスク容量の使用状況やクエリ結果の関連性を示すコンポーネントには<meter>タグを使用する必要があります。

See the Pen
Progress Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<progress value="42" max="100"></progress>

1	<progress value="42" max="100"></progress>

Meter要素

<meter>タグは定義された範囲内のスカラー測定値、または小数値を定義します。このゲージをgaugeという名前で参照することもできます。

<meter>タグを使用して、ディスク使用量の統計を表示したり、検索結果の関連性を示したりできます。

<meter>タグはタスクの進行状況を示すために使用しないでください。このタイプのコンポーネントはprogress要素によって定義されるべきです。

See the Pen
Meter Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

Meter With Min/Max: 
<meter value="4" min="0" max="10">4 out of 10</meter>
<br>
Meter With Percentage: 
<meter value="0.3">30%</meter>

Meter With Min/Max:

<br>

Meter With Percentage:

Template要素

<template>タグにはユーザーからは見えないコンテンツが含まれていますが、HTMLコードを繰り返しインスタンス化するために使用されます。

<template>
  <h2>Cat</h2>
  <img src="img_cat.jpg">
</template>

</template>

JavaScriptを使用すると、cloneNode()メソッドでこのコンテンツをレンダリングできます。

function showMyTemplate(){
  const myTemplate = document.querySelector('template');
  const templateClone = myTemplate.content.cloneNode(true);
  document.body.appendChild(templateClone);
}

function showMyTemplate(){

const myTemplate = document.querySelector('template');

const templateClone = myTemplate.content.cloneNode(true);

document.body.appendChild(templateClone);

}

Time要素

<time>タグは、人が読める日付または時刻を定義します。これはユーザーエージェントがユーザーのカレンダーに誕生日のリマインダーや予定されているイベントを追加できるように、日付と時刻を機械読み取り可能な方法でエンコードするために使用できます。
さらに、この要素は検索エンジンがよりスマートな検索結果を生み出すことを可能にします。

See the Pen
Time Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<p>My cat wakes up at <time>11:00</time> each day.</p>

1	<p>My cat wakes up at <time>11:00</time> each day.</p>

Video要素

<video>タグは、ムービークリップまたはビデオストリームを定義します。サポートされているフォーマットはMP4、WebM、Oggです。

See the Pen
Video Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<video width="320" height="240" controls>
  <!--can't play -->
  <source src="">
</video>

</video>

Word Break Opportunity

長いテキストブロックや長い単語がある場合は、<wbr>タグを使用してテキストのどこで分割するのが理想的かを指定できます。これは、サイズを変更してもブラウザがテキストを奇妙な場所で改行しないようにするための1つの方法です。

See the Pen
Word Break Element by Emma Wedekind (@emmawedekind)
on CodePen.

HTMLは下記の通りです。

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <wbr>Quaerat</wbr> doloribus eaque est esse culpa natus consequatur dolores modi velit, nostrum libero quibusdam? Corporis officiis itaque pariatur quam consequatur, quae hic.</p>

<p>super longggggggggggggggggggggggggggggggggggggggggggg<wbr>aaaaa</wbr>bbbbbb</p>

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. <wbr>Quaerat</wbr> doloribus eaque est esse culpa natus consequatur dolores modi velit, nostrum libero quibusdam? Corporis officiis itaque pariatur quam consequatur, quae hic.</p>