Googleデジタルマーケティング＆Eコマース：ソーシャルメディア・コンテンツのアクセシビリティ

# はじめに

”Googleデジタルマーケティング＆Eコマース プロフェッショナル認定証"　の受講が完了しました(2022/3/3)。私がこのコースから得られた素晴らしい体験を、テーマごとに分割して、わかりやすくご紹介しています。興味を持たれた方は、是非下記を受講してみてください。

https://jp.coursera.org/professional-certificates/google-digital-marketing-ecommerce

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/24ea32fb-2fb3-bdb2-462a-4ffc4d60a96f.png" width="800">

# アクセシビリティ

世界には、障害を持つ人が10億人以上います。これは、米国、カナダ、フランス、イタリア、日本、メキシコ、ブラジルの人口を合わせた数よりも多いのです。障がいがあると、以下のような影響があります。

- ビジョン
- ムーブメント
- 思考
- 記憶
- 学習
- コミュニケーション
- 聴力
- メンタルヘルス
- 社会的関係

ソーシャルメディアのコンテンツを作成する場合、オーディエンスにはキャプションに依存する難聴者や、画像を説明する特別なテキストに依存する視覚障害者がいることを念頭に置くことが重要です。

***<font color="MediumVioletRed">『アクセシビリティとは、製品、サービス、施設を建設または変更する際に障害者のニーズを考慮し、あらゆる能力の人が使用できるようにすること』</font>***

# アクセシビリティのためのヒント

### ビデオ・キャプション

ビデオ・キャプションは、耳の聞こえない方や多少の難聴のある方をサポートします。また、キャプションは、使用されている言語が母国語でない方や、静かな空間や混雑した環境など、通常と同じように音を再生できる場所にいない方をサポートします。

| 種類 |  内容 | 
| :--- | :--- | 
| クローズド・キャプション | 映像に重ねて表示され、ユーザーがオン・オフすることができます。 | 
| オープン・キャプション | 映像に直接埋め込まれており、ユーザーが隠したりオフにしたりすることはできません。 | 


使用予定のソーシャルメディアプラットフォームでどのタイプのキャプションがサポートされているかを確認し、その要件を満たすようにコンテンツを設計してください。

### 代替テキスト（altテキスト）

代替テキストとは、視覚障害者の支援を主な目的とした、画像の簡潔な説明文のことです。多くのプラットフォームでは、ソーシャルメディアの投稿用にaltテキストを送信することができます。一部のプラットフォームでは、人工知能（AI）機能を使って画像のaltテキストを自動的に生成しています。この技術はまだ新しいものですが、自分でテキストを作成する代わりに、自動生成されたテキストを編集すれば、時間を節約できるかもしれません。

#### altテキストの説明文を書くための2つのヒント

スクリーン・リーダーは、画像の存在を「image」という単語で知らせるため、説明文に「image」を含める必要はありません。
- 例えば、「コーヒーカップの画像」ではなく、「コーヒーカップ」とし、さらに「ハートの形の泡が上に乗っているコーヒーカップ」のように、より説明的な内容を追加することもできます。 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/bfab63b0-8ac4-2471-920b-a64205a813e1.jpeg" width="500">

画像の詳細ではなく、画像の目的に焦点を当てます。
- 例えば、期間限定のキャンペーンを説明するために時計の画像を使用する場合、時計の実際の時刻をaltテキストに含める必要はありません。表示されている時刻が10時10分であることに言及しなくても、「時針、分針、秒針が時間の経過を示す壁掛け時計」とすればよいのです。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/e5e6899b-5161-636d-ce1f-28f569b467d5.jpeg" width="500">

### カラー・コンテキスト

カラー・コントラスト比（L1/L2）は、明るい色（L1）の発光と暗い色（L2）の発光を比較したものです。

コントラスト比は、1/1（1:1）から21/1（21:1）までの範囲です。

- 白地に白のコントラスト比は1:1
- 白地に黒のコントラスト比は21:1

です。

比較のため、

- 白地に赤のコントラスト比は4:1
- 白地に緑のコントラスト比は1.4:1
- 白地に青のコントラスト比は8.6:1

となっています。

ソーシャルメディア上のグラフィックスでは、テキストと背景色のコントラストを少なくとも4.5:1にして、テキストが読みやすくなるようにします。この指針に従えば、コントラスト比が4:1の赤と1.4:1の緑ではなく、8.6:1の青と白を選択することになります。

:::note info
WebAIMは、コンテンツをよりアクセスしやすくするためのリソースにアクセスできる便利なウェブサイトです。前景と背景の16進カラーコードを入力してコントラスト比を決定できるインタラクティブなコントラストチェッカーのページをチェックしてみてください。
https://webaim.org/
:::

### フォント

カスタムフォントは、印象的で斬新に見えるかもしれませんが、スクリーンリーダーがテキストを識別するのに問題がある可能性があります。イタリック体などの標準的なスタイルも含まれるため、注意が必要です。


### ハッシュタグ

ハッシュタグは、キャメルケースと呼ばれる、単語の頭文字を大文字にしたものを使用する必要があります。例えば、「#virtualclassroom」ではなく「#VirtualClassroom」を使用します。スクリーンリーダーはキャメルケースのテキストを2つの単語として認識し、正しい発音を使用します。

### 絵文字

絵文字は楽しいものですが、スクリーン・リーダーが複数の単語で表現するため、ソーシャルメディアへの投稿では控えめに使用してください。絵文字はスクリーン・リーダーで説明するのに時間がかかりすぎ、人々は忍耐力を失ってしまうことがあります。

### 言語

ソーシャル・メディア・コンテンツを作成する場合、障害のために人を過小評価したり、非人間的にしたりするような言葉は避けてください。
- 例えば、"the blind "という用語を使用する代わりに、"blind people "または "partially-sighted people "を使用することができます。

さらに、あるフレーズが頻繁に使われているのを聞いたことがあるからといって、それが包括的であるとは限りません。アクセシビリティを考慮して、よく使われる表現を言い換えることが必要な場合があります。
- 例えば、車椅子を使用している人は歩くことはできませんが、アウトドアを楽しむことはできるので、「散歩をする」を「アウトドアを楽しむ」に置き換えることができます。