すべてのカテゴリ

ユーザーにとって「分かりやすいWebサイト」を作成する上で、代替テキスト（alt属性）は重要な要素です。今回は代替テキストの目的と設定の注意点についてご紹介します。代替テキストとはWebサイトに含まれる画像や動画など代わりになるテキストの事です。ブラウザによっては何らかの原因で表示されない時や、スクリーンリーダーや音声ブラウザの為に情報を取得します。又画像に代替テキストを設定することで、検索エンジンのクローラーが画像の内容を理解し、「画像検索」などに表示されるようになります。その為には画像の内容に沿った意味を持つキーワードを入力する事が大切です。ユーザーに分かりやすいサイトを作る事はクローラーにとっても分かりやすいサイトになり結果的にSEO強化に繋がります。代替テキストの設定のポイント①画像と関係のあるキーワードを設定 ⇒ユーザーの混乱を避けるためにも適切な画像の内容をテキスト入力することです。 ②キーワードをむやみに入れすぎない ⇒SEOを狙いすぎて過剰にキーワードを詰め込みすぎないようにする。又画像の意図と異なる設定をしない。検索エンジンからスパム行為とみなされる可能性もあります。 適切なキーワード代替テキスト：【滑り台を滑る女の子の写真】過剰なキーワード代替テキスト：【滑り台、女の子、子供服、遊ぶ、成長】③複数の異なる画像に同じ代替テキストを設定しない ④意味を持たない装飾画像には代替テキストの設定をしない ⇒罫線や背景画像といったデザイン装飾など意味の持たない画像の場合、空白にします。HTMLの場合は【alt＝""】と記述します。 【華やかさを演出する為の画像の場合】※

ブログページをご覧いただきありがとうございます。自己紹介動画のYouTube 説明欄へ視覚に困難がある方などに向けて手描き動画アニメーションについて代替テキスト　補完用説明を入力しました。YouTubeに代替テキストを入力できなかったため、説明欄へ補完するための説明文を入力していますが、分かりづらい部分などがあればDMでアドバイスをいただけると嬉しいです。現在、制作中の動画でもYouTube 説明欄へ補完用の説明のご依頼をいただいています。いただいたアドバイスやご意見をもとによりやさしい動画を制作していきたいと考えています。

[👦質問者] 例えば、視覚障がい者の方や画像が表示されない場合でもコンテンツを理解できるようにするための代替テキストについて、ご自身の経験からどのように設定していますか？ また、それがどのような効果をもたらしたか具体的なエピソードがあれば教えてください。 [😺阿修羅ワークス] 過去にウェブアクセシビリティ向上のプロジェクトで、視覚障がい者の利用を考慮した代替テキスト（alt text）を設定する際の経験があります。 具体的には、画像の内容やその画像が持つコンテキスト、付加情報などをシンプルかつ具体的に記述することを心掛けています。 例えば、商品の画像では「赤いセーター、左胸にワンポイントの刺繍」といった形で詳細を説明します。 ある時、視覚障がい者の方々から実際に使用して感想を聞いた際、「商品を手触りや材質だけで判断するのは難しい。具体的な色やデザインの情報が分かると、選択の幅が広がる」とのフィードバックを頂きました。この一例からも代替テキストを丁寧に設定することが、視覚障がい者を含む多くの人々にとって使いやすいウェブ体験の提供に直結していることを確認できました。 [👦質問者] そのフィードバックを受けて、実際に代替テキストの設定方法をどのように改善しましたか？ 具体的な手法や工夫について教えてください。[😺阿修羅ワークス] もちろんです。 フィードバックを受けて、以下のように代替テキスト（altテキスト）の設定方法を改善しました。詳細化とコンテキストの強調ユーザーが具体的なシチュエーションや内容を理解しやすいように、代替テキストの記述をより詳細にし、画像がページ内で果たす役割や