アクセシビリティを推進する HTML の機能

自己説明的でないリンクがある場合、またはリンク先をより詳しく説明することで恩恵を受けることができる場合、 aria-label または aria-labelledby 属性を使用してリンクに情報を追加することができます。

<p>
  リンクテキストを書くのが実に下手なんです。詳しくは、
  <a
    href="inept.html"
    aria-label="私がリンクテキストを書くのが下手な理由： 説明と謝罪"
    >こちらをクリック</a
  >してください。
</p>
<p>
  私は本当に<span id="incompetence">リンクテキストを書くのが下手なんです</span>。
  詳しくは<a href="inept.html" aria-labelledby="incompetence">こちらをクリック</a>してください。
</p>

ほとんどの場合、代わりに有益なリンクテキストを書く方が良いことに注意してください。

<p>
  私は<a href="capable.html">リンクテキストを書くのが得意だというブログ記事</a>を書きました。
</p>

タブ移動を補助するために、ユーザーがあなたのウェブページの大きな塊を飛び越えることを可能にするリンクを提供することができます。たとえば、ユーザーが多すぎるナビゲーションリンクを飛び越えて、すべてのリンクを巡回するのではなくページのメインコンテンツを読むことができるようにしたい場合があります。

<header>
  <h1>見出し</h1>
  <a href="#content">コンテンツまでスキップ</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>

すべての画像には alt 属性を設定すべきです。画像が純粋に装飾であり、文書のコンテンツやコンテキストに何の意味も与えない場合、 alt 属性は空ですが存在する必要があります。オプションとして、 role="presentation" を追加することもできます。それ以外の画像にはすべて alt 属性を設定し、他のコンテンツは読めても画像が見えないユーザーに役立つ方法で画像を説明する代替テキストを提供すべきです。画像を読み込むことができない人に、画像をどのように説明するかを考えてみてください。それが alt 属性の値として記載すべき情報です。

<!-- 装飾的な画像 -->
<img alt="" src="blueswish.png" role="presentation" />
<img
  alt="Open Web Docs のロゴ: 微笑む本の虫カール"
  src="carle.svg"
  role="img" />

同じコンテンツに対する alt 属性であっても、文脈によって異なるかもしれません。次の例では、 HTML の <progress> 要素の使い方を開発者に教える文書のページ読み込みの進捗を表示するために、進捗バーの代わりにアニメーション gif が使われています。

<img alt="20% complete" src="load-progress.gif" />
<img
  alt="進捗バーは、つまみの左側に太い緑色の正方形、右側に細い灰色の線で表示されます。つまみは、緑色の部分の高さと同じ直径の円です。"
  src="screenshot-progressbar.png" />

既定、 HTML の意味を持つすべての要素はロール (role) を持っています。例えば、 <input type="radio"> は radio ロールを持ちます。 HTML の意味を持たない要素はロールを持ちません。 ARIA ロールは、 tablist ウィジェットのように、 HTML にネイティブに存在しない要素を記述するために使用することができます。ロールはまた、存在するがまだブラウザーの完全な対応をしていない新しい要素にも役立ちます。例えば、 SVG 画像を使用する場合、開始タグに role="img" を追加してください。 SVG VoiceOver のバグ があり、 VoiceOver は SVG 画像を正しくアナウンスできないからです。

<img src="mdn.svg" alt="MDN logo" role="img" />