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

「HTMLは簡単だよ」という声をよく聞きます。
確かに、HTMLは他のプログラミング言語よりも習得が容易であると言うことに同意はしますが、軽く考えるべきではありません。

HTMLは強力なマークアップ言語です。Webアプリケーションに構造を与え、強力なアクセシビリティの利点を提供するために使用できますが、それは適切に使用された場合に限られます。中でも、あまり知られていないHTML要素を紹介します。

サイトのキャプチャ

10 HTML Elements You Didn't Know You Needed
by Emma Wedekind


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Audio要素

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

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

HTMLは下記の通りです。

Blockquote要素

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

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

HTMLは下記の通りです。

Output要素

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

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

HTMLは下記の通りです。

Picture要素

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

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

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

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

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

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

Progress要素

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

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

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

HTMLは下記の通りです。

Meter要素

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

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

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

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

HTMLは下記の通りです。

Template要素

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

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

Time要素

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

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

HTMLは下記の通りです。

Video要素

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

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

HTMLは下記の通りです。

Word Break Opportunity

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

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

HTMLは下記の通りです。

sponsors

top of page

©2019 coliss