こんにちは！
Wixを専門とするホームページ制作会社、アクトワン代表の和田英也です！
今回もウェブアクセシビリティについて発信いたします。
WixLearn 第6回のWrite alt text for imagesでは代替テキストについて詳しく解説いたします。
代替テキストとは、画像や動画などの代わりに表示されるテキストのことです。
その画像がどういう目的で提供されているのかを伝えるものです。
画像が何らかの原因で表示されない場合や、音声読み上げブラウザを使用する際に、情報を取得することができます。
いくつかの基本ルールがあるので、そこをおさえておけば大丈夫です。
代替テキストは、HTMLではimg要素やarea要素のalt属性として指定されます。 alt属性は「オルト属性」とも呼ばれ、alt属性の「alt」は「オルト」という読み方になります。
代替テキストは、次のようなメリットがあります。
視覚障害者や高齢者にとっての補助テキストの役割を果たす。
検索エンジンは画像の内容を完璧に把握することが難しいため、代替テキストから画像の内容を判断します。 適切に記述すればSEOに良い効果が期待できます。
※一方で、alt属性を不適切に設定すると、ユーザーや検索エンジンに画像の内容がちゃんと伝わらない可能性が高まります。 よって、必ずしも画像に含まれていることを全て説明する必要はありません。 画像で伝えたいことについて説明するようにします。
それでは早速本題に進みましょう！
今までのWix Learn アクセシビリティ講座要約
SECTION1Add basic alt text
下の画像をご覧ください。
こちらは最も基本的なタイプです
これらはお店の雰囲気を伝える画像で、スクリーンリーダーを使っていて画像を見ることができない人にもこの雰囲気を伝えたいですね。
画像に代替テキストを追加する方法
エディタ内で画像をクリックします。
「設定」アイコンをクリックします。
「画像には何が含まれていますか？」の下に画像の詳細を入力します。
キーボードの Enter キーを押して保存します。
今回は「当店人気の素朴なグルテンフリーの スペルト小麦パン」と入力しています。
これはとても良い代替テキストです。
別の書き方として、
「木の棚に置かれているサワードウブレッド周りに1 2 3 4 5のパンがあり 棚は木目が粗い」などとも書けます。
ですが、この画像についてだけのエッセイを一気に書いても、これでは代替テキストとしてのポイントを外しています。
そのように書く代わりに ユーザーに意図を伝えました。
これが覚えておいていただきたい重要なポイントです。
続いて中にテキストが書かれている画像があります。
この場合は そのテキストを代替テキストに書く必要があります。
「いらっしゃいませ」と書かれた黒板 と入力しています。
これだけです。
簡潔でポイントを押さえており、画像の意図を伝えています。
するべきことはそれだけです。
次に説明するテキストは代替テキストというより装飾です。
ここにも通常通り代替テキストは追加できます。
ただし、今回は追加しません。
これは装飾用の画像でコンテンツには関係ないからです。
画像がある場合は常にスクリーンリーダーや検索エンジンロボットはその画像を読み取ろうとし、どのような種類の画像なのか解明しようとします。
それがどのような画像なのか必ず伝える必要があるからです。
今回はそれらのツールにこの画像を無視するように伝えます。 通常は コードに書いて画像を無視するように伝えます。
しかし Wixではそのようなことをする必要はありません。
代替テキストが空白になっていることを確認するだけです。
残りは Wix が処理してくれます。
SECTION2infomative alt text
次は情報提供用の一番下にある画像についてです。
会社用のメールアドレスの横にメールアイコンがあります。
これは実はメールアイコンでは ありませんね？ 封筒の画像です。
ここで書きたい代替テキストは、この画像の横にメールアドレスがあることを伝えるテキストです。
「封筒」とだけ書くこともできますが、メールアドレスの意味は まったく伝わりません。では代わりに何を書くべきでしょうか？
この画像の目的は、この封筒アイコンの横にあるのがメールアドレスであることを ユーザーに伝えることです。
画像の内容を文字どおりに表現して「封筒」と書くのではなく、これは「メールアドレス」だという意図を書きます。
そのようにシンプルに考えましょう。
SECTION3Functional & complex alt text
この会社のロゴは「設定」に移動すると、トップページにリンクしていることを確認できます 。
これは機能画像と呼ばれているもので、操作すると何らかの動作をする画像です。
今回 はその画像が何なのかについてと、クリックするとどこに遷移するかを指定しています。
機能画像では、その画像が何なのか？そしてクリックすると何が起こるのかを指定することが最も重要です。
トップページにリンクされているロゴだけではありません。
他にも、項目が開いたりその他の動作をするアイコンメニュー項目などの項目も挙げられます。 ユーザーが画像をクリックする前に、これらのインタラクティブ要素が何をするのかを伝える必要があります。
ここには読点を入れていることにも注目してください。
スクリーンリーダーは句読点に従います。
今回のケースではスクリーンリーダーは次のように分けて「グラフィック」「Henry's Bakery のロゴ」「トップページ」と読み上げます。
ここで もし読点を入れない場合は 「グラフィック Henry's Bakery ロゴトップページ」のように続けて読み上げます。
そして スクリーンリーダーは これがリンクであることをユーザーに伝えます。
よって、代替テキストではこれがリンクであることを知らせる必要はありません。
SECTION4 alt text do & don't
最後に、複雑な画像（例えば、上記のようなグラフ）についてお話しします。
一部の画像は内容が非常に複雑で、代替テキストだけでは十分に説明できない場合があります。
例えば、「セリアック病とグルテンのトレンドを示すグラフ」という代替テキストをつけるだけでは、画像の主旨や詳細がユーザーに十分伝わりません。では、
どうすればこの情報を正確に伝えられるのでしょうか？
代替テキストだけでは不十分な場合の対応方法
グラフの概要をメインテキストに記載する代替テキストでは簡潔な説明を行い、グラフの主な内容や目的をメインテキストに補足します。
「このグラフは、アメリカでの1800年以降の小麦粉消費量のトレンドと、1950年以降の全世界における10万人当たりのセリアック病罹患率を示しています。」
なぜこのグラフが重要かを明確に伝えるグラフに含まれる全てのデータを説明する必要はありません。その画像を掲載した目的や重要なポイントを伝えることが大切です。
詳細データが必要な場合の対応視覚障がいのあるユーザーにグラフの全データを伝えたい場合は、アクセシビリティ対応のデータシートを用意しましょう。例えば、Excelシートにデータを入力し、スクリーンリーダーで情報を確認できるようにします。
重要なポイント
代替テキストだけに頼らず、必要に応じてメインテキストに補足情報を記載しましょう。
すべてのデータを説明するのではなく、グラフの意図を的確に伝えることを目指してください。
これで複雑な画像やグラフのアクセシビリティ対応を効果的に行うことができます。
しかし、他にも、してはいけないことも意識しておく必要がありますので、追記します。
代替テキストは 100単語未満にする
それ以上の単語数になると ユーザーエクスペリエンスとフローが混乱してしまいます。
簡潔な言葉を使うこと
まず文字を省くように短い文にします。 しかし わかりやすく書かなくてはなりません 。
キーワードの羅列にならないようにする
ベーカリーのホームページにオーディエンスを引きつけようとしているなら 「パン」「白パン」「黒パン」 「スペルト小麦パン」というように、そのキーワードを書くだけではいけません。 第一に それではうまく機能しません。 SEO の観点からも良くありません。
同じようなことを何度も何度も 聞かないといけないと、スクリーンリーダーを使っている人が、混乱してストレスを感じてしまいます。
優れたユーザーエクスペリエンスも実現できません。 繰り返しますが、いつも必ず画像の目的を思い出すようにしてください。
今までのWix Learn アクセシビリティ講座要約
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください！
Wix Tech Salon >>
Comments