⭐️

【Polaris和訳】Content/Alternative text

2021/10/29に公開

この記事について

この記事は、Polaris/Content/Alternative textの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

代替テキスト | Alternative text

Shopify は、インクルーシブな体験を提供することを目指しています。代替テキスト (alt text) は、目が不自由な方が当社の製品を使用する際に役立ちます。

一般的に、代替テキストは画像の代わりとなるテキストのことで、HTML 要素の alt 属性であるalt=""で表されることが多いですが、他のシナリオでも使用されます。

スクリーンリーダーでは、視覚障害者の方に画像を説明するために代替テキストを表示します。また、何らかの理由で画像のダウンロードに失敗した場合(ネットワーク接続が不安定な場合など)にも、代替テキストが表示されます。

代替テキストは、以下のようにすべきです:

  • サイト訪問者のナビゲートに役立つ

  • インクルーシブな体験を提供する

  • 可能な限り具体的で簡潔であること


画像の代替テキスト

すべての<img>タグには、たとえそれが空であっても、alt 属性が必要です。スクリーンリーダーに画像を無視することを知らせる必要があるからです。

画像の空の代替テキスト属性: <img alt="" />

Image from Gyazo


代替テキストの書き方

代替テキストは、常にプレインテキストで記述する必要があります。

  • できるだけシンプルな言葉を使いましょう。複雑な言葉の置き換えに困っている場合は代替語の A-Z リストや、プレインランゲージのヒントをご覧ください。

  • 必要のない単語は避けましょう。ある単語を削除したとしても、そのフレーズが同じように理解できるならば、その単語を削除しましょう。

  • 簡潔に書きましょう。少ないスペースにどうやって書くかを考えるのが良い近道です。

  • 能動態で書きましょう。誰がやっているのかを隠したいときだけ、受動態を使いましょう。


代替テキストが必要な場面

アイコンについて

誤解を招く恐れのあるアイコンには説明が必要なので、aria-label属性を使用します。

<button aria-label="Close" onclick="myDialog.close()">X</button>

アクション

スペースの都合上、「詳細を見る」や「今すぐ申し込む」などの名詞を使わないアクションの呼び出しを書かなければならない場合は、マーチャントが選択した後にどこに送られるかをさらに示します。

<a href="{cta-url}" aria-label="Shopifyでのオンラインストア開設についてはこちら">詳細を見るく</a>

複雑な画像

少し複雑な画像の場合、コードにはより多くのロジックが必要です。

<div role="img" aria-labelledby="star_id">
  <img src="fullstar.png" alt="" />
  <img src="fullstar.png" alt="" />
  <img src="halfemptystar.png" alt="" />
</div>
<div id="star_id">5つ星中の3つ星</div>

発音・翻訳

私たちは、製品とのやり取りを楽しいものにするだけでなく、マーチャントのリスニング体験も楽しいものにしようと努力しています。HTML の lang 属性は、音声合成ツールが発音を把握したり、翻訳ツールがどのようなルールを使用するかを把握するのに役立ちます。

Image from Gyazo

ここでは、ドキュメントで使用可能な言語属性の標準的なリストを紹介します。


SEO 対策

代替テキストは、サイトの検索性を高めるための良い方法です。これは Shopify の管理者以外にも適用されます。

  • キーワード(人々が検索する言葉)を論理的に使う

  • キーワードを挿入するために、代替テキストの関連性やわかりやすさを低下させてはいけません

コーディングや代替テキストの基準については、Web Content Accessibility Guidelines (WCAG)を参照してください。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます