WordPressの代替テキスト SEO効果とユーザーエクスペリエンス向上の秘密

記事
IT・テクノロジー
[👦質問者]

例えば、視覚障がい者の方や画像が表示されない場合でもコンテンツを理解できるようにするための代替テキストについて、ご自身の経験からどのように設定していますか?

また、それがどのような効果をもたらしたか具体的なエピソードがあれば教えてください。


[😺阿修羅ワークス]

過去にウェブアクセシビリティ向上のプロジェクトで、視覚障がい者の利用を考慮した代替テキスト(alt text)を設定する際の経験があります。

具体的には、画像の内容やその画像が持つコンテキスト、付加情報などをシンプルかつ具体的に記述することを心掛けています。

例えば、商品の画像では「赤いセーター、左胸にワンポイントの刺繍」といった形で詳細を説明します。

ある時、視覚障がい者の方々から実際に使用して感想を聞いた際、「商品を手触りや材質だけで判断するのは難しい。具体的な色やデザインの情報が分かると、選択の幅が広がる」とのフィードバックを頂きました。

この一例からも代替テキストを丁寧に設定することが、視覚障がい者を含む多くの人々にとって使いやすいウェブ体験の提供に直結していることを確認できました。


[👦質問者]

そのフィードバックを受けて、実際に代替テキストの設定方法をどのように改善しましたか?
具体的な手法や工夫について教えてください。


[😺阿修羅ワークス]

もちろんです。
フィードバックを受けて、以下のように代替テキスト(altテキスト)の設定方法を改善しました。

詳細化とコンテキストの強調

ユーザーが具体的なシチュエーションや内容を理解しやすいように、代替テキストの記述をより詳細にし、画像がページ内で果たす役割やコンテキストを正確に反映させました。

例えば、「赤い車」ではなく、「駐車場に停められた赤いスポーツカー」と記述することで、具体性と文脈を追加しました。

ユーザー調査の活用

アクセシビリティのニーズが異なるユーザーグループから直接意見を収集し、様々な視点を反映させました。

視覚障害を持つユーザーのフィードバックを特に重視し、彼らが理解しやすく、役立つと感じる情報を提供することに努めました。

ツールの活用

代替テキストの設定を効率的かつ一貫性を持たせるため、自動生成ツールと手動編集を組み合わせました。

特に重要な画像については、手動でチェックと修正を加えることで、質の高い代替テキストを確保しました。

ガイドラインの作成

社内で共有するための代替テキスト記入ガイドラインを策定しました。
このガイドラインには、具体例やベストプラクティス、避けるべき表現などが含まれており、これにより担当者間の理解統一を図りました。

定期的なレビュー 代替テキストの設定が適切であり続けるよう、定期的にレビューを行い、必要に応じて更新を行う仕組みを導入しました。

最新のユーザーフィードバックやテクノロジーの進化に対応するためです。
これにより、ユーザーのアクセシビリティ体験が向上し、多様なニーズに応えることができるようになりました。

阿修羅ワークスの出品リスト

阿修羅ワークスのプロフィール


サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら