達成基準A 1.1.1 「非テキストコンテンツに関する達成基準」について例を交えて解説

達成基準A 1.1.1 「非テキストコンテンツに関する達成基準」とは、画像や音声などの非テキストコンテンツに対して、その内容を説明するテキストを提供できているかの基準です。これは、視覚や聴覚に障害があるユーザーがその情報にアクセスできるようにするための基準となります。

例1) 子どもたちが公園で遊ぶ画像が表示されている場合

【対応】代替テキスト「公園で遊ぶ子どもたち」をalt属性に設定。
【効果】この代替テキストにより、視覚に障害があるユーザーでも、スクリーンリーダーを通じて画像の内容を理解できます。

例2) 音声で商品説明を提供している場合

【対応】音声の内容をテキストに書き起こす。
【効果】聴覚に障害があるユーザーでも、商品説明の内容を理解できるようになります。

例3) 会社紹介の動画を提供している場合

【対応】動画に音声の内容を字幕として用意する。
【効果】聴覚に障害があるユーザーでも、商品説明の内容を理解できるようになります。

状況A： 短い説明が非テキストコンテンツと同じ目的を果たし、かつ同じ情報を提示できる場合について

非テキストコンテンツが伝えたい情報や目的が短いテキストで十分に表現できる場合のことを指します。この場合、画像や音声などの非テキストコンテンツが提供されているが、それと同じ内容が短いテキスト説明で完全に伝えられる場合、そのテキストが代替として機能します。

状況Aの場合のチェック項目

①オブジェクトのラベルを提供するために aria-label を使用する

例）ボタンが「検索」を実行する機能を持っている場合

ボタンにはアイコンだけが表示されていても、aria-label=”検索” と設定すれば、スクリーンリーダーはこのボタンが「検索」を実行することをユーザーに伝えます。

②非テキストコンテンツに対してテキストによる代替を提供するために aria-labelledby を使用する

例）画像ギャラリーのサムネイル画像

画像ギャラリーのサムネイルがあり、それぞれの画像に対して説明文が別の場所に書かれている場合。

<div id="image1-label">風景の写真：山と川</div>
<img src="mountain.jpg" alt="" aria-labelledby="image1-label">

ここで、imgタグのalt属性は空（alt=””）で、画像そのものにはテキストによる説明がない状態です。
しかし、aria-labelledby=”image1-label” を使用することで、この画像はid=”image1-label”と一致するdiv要素を参照し、「風景の写真：山と川」という説明をスクリーンリーダーが読み上げます。

③画像のグループにある一つの画像に、そのグループのすべての画像を説明するテキストによる代替を提供する

例）商品ギャラリー

商品ページに複数の画像があり、それぞれの商品を異なる角度や色で表示しています。この場合、画像の1つにグループ全体を説明する代替テキストを提供します。

<div role="group" aria-labelledby="product-group-label">
  <img src="product-front.jpg" alt="Tシャツの前面" aria-labelledby="product-group-label">
  <img src="product-back.jpg" alt="">
  <img src="product-side.jpg" alt="">
</div>
<p id="product-group-label">このグループの画像は、Tシャツの前面、背面、側面をそれぞれ異なる角度から撮影したものです。</p>

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

例） ニュース記事へのリンク

ニュースページに、記事のサムネイル画像とその横に「記事を読む」というテキストリンクがあり、どちらも同じ記事ページにリンクしている場合。

修正前の間違った例

<a href="news-article.html">
  <img src="news-thumbnail.jpg" alt="ニュース記事のサムネイル">
</a>
<a href="news-article.html">記事を読む</a>

修正後の正しい例

<a href="news-article.html">
  <img src="news-thumbnail.jpg" alt="ニュース記事のサムネイル">
  記事を読む
</a>

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

例1） 内容を伝える画像の場合

<img src="sunrise.jpg" alt="海辺の朝日">

例2） 装飾的な画像の場合

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

例3） リンク内の画像の場合

<a href="profile.html">
  <img src="profile-icon.png" alt="プロフィールページ">
</a>

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

object要素は、Webページに外部リソース（例えば、画像、ビデオ、アプリケーションなど）を埋め込むために使用されます。このobject要素には、外部リソースが読み込めない場合に代替コンテンツを提供するための「ボディ」が含まれます。object要素のボディにテキストや他のHTML要素を配置することで、リソースが表示できない場合にユーザーに適切な代替情報を提供できます。

例） 基本的な使用例

<object data="chart.svg" type="image/svg+xml">
  グラフが表示されない場合は、こちらをクリックして詳細情報をご覧ください。
  <a href="chart-details.html">詳細情報</a>
</object>

例2） 顔文字にテキストによる代替を提供する

顔文字は、感情や表情を表すために使われる記号です。スクリーンリーダーはこれらを適切に解釈できないことがあるため、代替テキストでその感情や表現を説明します。

<p>このメッセージの最後に「:D」という顔文字が使われています。これは、喜びや満足感を表しています。</p>

例3） リート語にテキストによる代替を提供する

リート語（Leetspeak）は、アルファベットの文字を数字や記号に置き換えて表現するインターネットスラングの一種です。これもスクリーンリーダーでは適切に解釈されないため、通常のテキストに置き換えるか、その意味を説明する必要があります。

<p>H3ll0 W0rld!</p>
<p>上のリート語は「Hello World!」という意味です。</p>

達成基準A 1.1.1 「非テキストコンテンツに関する達成基準」、状況A:「短い説明が非テキストコンテンツと同じ目的を果たし、かつ同じ情報を提示できる場合」についての解説でした。