実装方法のヒント
ウェブアクセシビリティの基準達成のため、日ごろ弊社で行なっている実装方法や考え方について一部紹介いたします。
画像の代替テキスト（alt属性）：何を伝えているか目的が大切
達成基準に記載の最初の項目であり、対策の第一歩です。検査の際にもここからチェックすることが多いです。対処方法や判断基準は比較的容易で、多くの場合、画像の alt 属性に代替テキストを記述する方法をとりますが、要素の状態や前後の状況によっては別の方法を用いることもあります。また、複雑な図版では記述内容について何度も検討を重ねる場合もあります。
バナーやボタンなど画像化されたテキストを含むもの
画像内のテキストをそのまま alt 属性に記述すればOKです。
-
<img src="images/button01.png" alt="ウェブアクセシビリティ対応サービス">
写真や図版
上記の写真の代替テキストを考えてみましょう。
-
この画像は img タグで掲載されているので、alt 属性に記述します。
写真の様子を簡潔に表現することが基本となります。
<img src="images/image01.jpg" alt="宇宙から見た地球の一部の写真"> -
よく見ると、街や道路の部分が光っている夜間の写真であることが分かります。
代替テキストにこのことを記述する必要はあるでしょうか？
このような時には、前後の文脈が関係してきます。送り手がどんな目的で写真を用いているかを把握します。もし、前後の文章で光について述べられていれば、この写真はそれを示すことが目的のはずなので、街や道路の光について記述する必要があります。
<img src="images/image01.jpg" alt="宇宙から見た地球の一部で夜間に街や道路の部分が光っている様子の写真"> -
ところで、この写真は地球のどこを写したものでしょう？ 気になって地図を調べると、写っている範囲はイタリア北部からフランス国境付近にかけての地域であることが分かりました。
代替テキストにこのことを記述したほうがいいでしょうか？
ここで規格を見てみましょう。WCAG 2.0 達成方法集には次のように「同じ目的及び情報を伝える」とあります。
この達成方法の目的は、元の非テキストコンテンツと同じ目的及び情報を伝えるテキストによる代替を作成することである。
（出展：WCAG 2.0 達成方法「G94: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す、簡潔なテキストによる代替を提供する」）
どの辺が写っているかは、その地域に詳しい人でなければ、おそらく見るだけでは分からないことです。地域を示すことが目的でなければ記述する必要はありません。あまり詳しく記述してしまうと、視覚的に取得できる以上の情報を盛り込むことになり、書き過ぎとなってしまいます。
-
一方、地域を示すことが目的ならば、その情報も記述します。
<img src="images/image01.jpg" alt="宇宙から見た地球の一部、イタリア北部からフランス国境付近にかけての地域で、夜間に街や道路の部分が光っている様子の写真">このように情報が多く、文章が長くて分かりにくくになりそうな時は、文章を区切ってみましょう。
<img src="images/image01.jpg" alt="宇宙から見た地球の一部の写真。イタリア北部からフランス国境付近にかけての地域。夜間に街や道路の部分が光っている様子">スクリーンリーダーでの読み上げを想像して、音声だけでも意味がつかめるか確認してみるのも良いでしょう。
視覚的な情報の意図や目的を明確化・言語化して（視覚的に伝えられない相手に）伝えるという点で、アクセシビリティ（誰でも使える）を象徴する項目であり、また、ページやサイト全体の情報構成にも関わるものだろうと思います。
