インクルーシブ デザインは、UX デザイナーや Web 開発者の領域のように思われるかもしれません。しかし、ソーシャル メディア マーケティング担当者もそれを実践する必要があります。
ここ数年、ソーシャル メディアのアクセシビリティはますます注目を集めています。Twitter や TikTok による最近の製品リリースもあって、もはやニッチなトピックではありません。今や、すべてのソーシャル メディア マーケティング担当者が学ぶべき実践となっています。
この記事では、ソーシャル メディアでアクセシビリティが重要な理由、障害を持つユーザーがソーシャル メディアで直面する可能性のある障壁、すべてのユーザーにとって包括的なソーシャル メディア コンテンツを設計するためのベスト プラクティスについて説明します。
インクルーシブデザインとは何ですか?
ソーシャル メディアにおけるインクルーシブ デザインとは、背景や能力に関係なく、すべてのユーザーがソーシャル メディアに完全に参加して関与できるように、ソーシャル メディア プラットフォーム、機能、コンテンツを設計することを指します。
インクルーシブ デザインでは、コンテンツを作成する際に、さまざまなユーザーの多様なニーズと経験を考慮します。これには、障害のあるユーザー、異なる言語や文化的背景を持つユーザー、その他の固有のニーズに合わせたデザインが含まれます。
周辺にいる人々（アクセシビリティの問題を抱える人々）のニーズから始めれば、他のすべての人をカバーし、排除しない体験を生み出すことができます。
途中から始まるソフトウェア設計は、古くて失敗した方法論です。
まずは端から始めましょう。無料アドバイス。 #あ11y
— マヴェラス (@FashionMaven88) 2022年11月28日
包括的な設計原則に従うことで、コミュニティはより歓迎的で包括的な空間になります。
ソーシャルメディアにとってアクセシビリティが重要な理由
ソーシャル メディアには多くの利点があるにもかかわらず、障害や特別なニーズを持つユーザーにとってはストレスの原因となることがあります。ソーシャル メディアのコンテンツにアクセスできないと、これらのユーザーはソーシャルの世界に参加できなくなります。会話から締め出されたり、重要な情報にアクセスできなくなったりすることもあります。
少なくとも 10 億人、つまり世界人口の 15% が何らかの障害を抱えています。一時的および状況的な障害も考慮すると、この数字は大幅に増加します。
世界保健機関は、世界の人口の 33% が聴覚または視覚に障害があると推定しています。ユーザーは主に音声と映像を通じてソーシャル コンテンツを消費するため、ソーシャル メディアのアクセシビリティは非常に重要です。
多くの場合、アクセシビリティは法律で義務付けられています。米国、カナダ、英国などの国には、米国障害者法 (ADA) やオンタリオ州障害者アクセシビリティ法 (AODA) などの法律があり、障害を持つユーザーが Web サイトやデジタル コンテンツにアクセスできるようにすることが義務付けられています。
*ちっ: アクセシビリティとインクルーシブ デザインは、障害者だけでなく、すべての人にメリットがあることをお知らせします*
— Ru (彼女/彼ら) (@RollWithRu) 2022年3月24日
さらに、アクセスしやすいコンテンツは、より多くの人々に届き、より魅力的になります。それがソーシャル メディア マーケティング担当者が最も重視していることですよね?
Verizon の調査によると、米国のユーザーの 83% が音声をオフにしてコンテンツを視聴しています。Chatterblast の調査では、音声をオフにした動画でコンバージョンが 77% 発生したことがわかりました。つまり、アクセスしやすいコンテンツを作成することは、私たち全員にとって本当にメリットがあるということです。
ソーシャルメディアマネージャーのための7つのインクルーシブデザインのヒント
1. 必ず代替テキストを追加する
説明キャプションと代替テキスト (alt テキストとも呼ばれます) により、画像が見えない場合でも、画像を視覚化できます。アクセシビリティ ツールは代替テキストを読み取ってユーザーに画像を説明するため、代替テキストを追加することは重要です。空白のままにしておくと、スクリーン リーダーがそれを「画像」として読み上げ、ユーザー エクスペリエンスが低下します。
Twitter に代替テキストのない写真を投稿するとどうなるかを説明します。私がどう対応すればいいのかわからない人もいると思います。まず、どのデバイスで見ているかによって異なります。1/
— コナー・スコット・ガードナー (@ConnorScottG) 2021年11月12日
いくつかのソーシャル メディア プラットフォームでは、オブジェクト認識テクノロジーを使用して、自動代替テキストを生成します。ただし、これらのキャプションは曖昧であったり制限があったりすることが多いため、カスタムの説明を追加する方が常に望ましいです。
適切な代替テキストを作成するためのヒント:
- 画像に実際に何が写っているかを説明します。 悪い例: 「棒グラフの画像」。良い例: 「S&P 500 指数の前年比での一貫した増加を示す棒グラフ」。
- 「～の画像」や「～の写真」と言うのは省略します。 英国王立盲人協会によると、ほとんどのスクリーンリーダーではそうしないことが好まれているそうです。
- ユーモアも取り入れましょう。 代替テキストは過度に形式的である必要はなく、ビジュアルで伝えられるジョークや微妙なニュアンスを説明する必要があります。
- テキストを書き写します。 画像の意味の中心となるコピーがある場合は、それを説明に含めます。
- GIFを忘れないでください。 Twitterでは、 GIF の代替テキストプラットフォームが GIF の代替テキストをサポートしていない場合は、コピーに説明を含めます。
- 簡潔に。 代替テキストを読むよりも説明する方が時間がかかることが多いため、説明を書くときはその点に留意してください。
代替テキストを書くときは、画像に実際に含まれている内容に焦点を当てます。画像自体の説明ではない関連情報は、代替テキストではなく、画像の下のキャプションに記述する必要があります。これには、写真のクレジット、許可、著作権情報が含まれます。
— アクセシビリティ意識 (@A11yAwareness) 2023年3月28日
ソーシャル メディアの SEO に関する注意: alt テキストは必ずしも検索エンジンのランキングに影響を与えるわけではありませんが、ソーシャル メディア アプリ内の検索ランキングは向上します。ただし、まずは明確で詳細な説明を書くことは常に優先してください。SEO は alt テキストの主な目的ではなく、二次的なメリットです。
https://twitter.com/HashtagHeyAlexa/status/1377077468201369601
最後にもう 1 つアドバイスがあります。画像の説明以外の目的で代替テキストを誤用しないでください。代替テキスト フィールドは、情報を隠したり、イースター エッグを作ったり、気の利いたことをしたり、ミームを作成したりするために使用しないでください。代替テキストを最も必要とするユーザーはこのコンテキストを理解しません。ジョークはキャプションに残しておいてください。
2. 動画のキャプション
動画にキャプションや字幕を追加することは、聴覚に障害のあるユーザーにとって非常に重要です。また、母国語以外の言語や音声のない環境で視聴するユーザーの視聴体験も向上します。
キャプションには、クローズド キャプションとオープン キャプションの 2 種類があります。ユーザーはクローズド キャプションのオン/オフを切り替えることができ、ソーシャル プラットフォーム内でネイティブに追加されます (通常は .srt ファイルとして)。オープン キャプションは、ビデオの作成時に「焼き付けられます」。
アクセシビリティの観点からはクローズド キャプションが推奨されますが、クローズド キャプションが利用できない場合や、ブランドがキャプションに適用する厳格なデザイン スタイルを持っている場合は、オープン キャプションを使用できます。
酔っぱらい
動画にオープンキャプションとクローズドキャプションの両方を追加すると #cc #learnontiktok #tiktokpartner #coda #opencaption #closedcaption
♬ ピース（ソロピアノバージョン） – ダニロ・スタンコビッチ
各プラットフォームでキャプションを追加する方法は次のとおりです。
- フェイスブック: 字幕を自動的に生成（および編集）したり、手動で作成したり、.srt ファイルをアップロードしたりできます。広告の場合は、複数の言語で字幕を追加できます。
- インスタグラム: リールとストーリーに自動生成されたクローズドキャプションを追加できます。.srt ファイルをアップロードすることはできません。
- ティックトック: 自動生成されたクローズドキャプションを動画に追加したり、TikTok 編集ツールを使用してオープンキャプションを手動で追加したりできます。
- ユーチューブ: クローズドキャプションを自動的に生成（および編集）したり、手動で作成したり、.srt ファイルをアップロードしたりできます。
- ツイッター: Twitter に投稿されるすべての動画では、自動キャプションがデフォルトで有効になっています。.srt ファイルをアップロードすることもできます。
フォロー
スタイリッシュに在宅勤務 #wfh #smm #socialmediamanager #corporatemillennial
この TikTok 動画では、TikTok で自動生成されたクローズド キャプションがどのように表示されるかを示しています。注: キャプションは TikTok アプリでのみ表示され、デスクトップでは表示されません。
3. わかりやすいテキストを書く
文章の明瞭さを優先すると、テキストがよりアクセスしやすく理解しやすくなります。そして、それは、抱える問題に関係なく、すべての人に利益をもたらします。
投稿文を書くときは、他の人の読みやすさを考慮してください。スクリーン リーダーなどのアクセシビリティ ツールを使用するユーザーにはどのような影響があるでしょうか。第二言語として英語を学習しているユーザーや学習障害のあるユーザーはどうでしょうか。
テキストの包括的なデザインに関するヒントをいくつか紹介します。
- わかりやすい言葉で書きましょう。 ユーザーが初めて読んだり聞いたりしたときに理解できるコピーを作成します。
- いいえ 派手なフォント強調したいという誘惑に駆られるかもしれませんが、スクリーン リーダーでは判読できません。
- 略語は慎重に使用してください。 略語は、一部の読者にとって混乱を招く可能性があります。ツールが略語を 1 つの単語として読み取ってしまうのを避けるには、間にピリオドまたはスペースを追加します (このように)。
- 大文字またはすべて大文字を変更しないでください。 これはスクリーン リーダーにとって意味不明な文字です。スクリーン リーダーが文脈を理解できないため、可能な限り大文字の使用は避けてください。
- 文字をアスタリスクで置き換えないでください。 これにより、スクリーン リーダーのフローが中断されます。
- ハッシュタグをPascal Caseで記述します。 これは、ハッシュタグ内のすべての単語の最初の文字を大文字にすることを意味します。これにより、スクリーン リーダーが適切に読み取ることができます。例: #MyBrandCampaignHashtag。キャメル ケースを使用することもできます。これは似ていますが、ハッシュタグの最初の単語を大文字にしません (例: #myBrandCampaignHashtag)。
- ハッシュタグをインラインで挿入しないでください。 ハッシュタグは、スクリーン リーダーの中断の原因となるため、文の途中ではなく、投稿のキャプションの最後に追加してください。
- ハッシュタグのブロックを別のコメントに入れます。 ハッシュタグの巨大なグループはアクセシビリティにはあまり適していませんが、どうしても使用する必要がある場合は、メインのキャプションの最後ではなく、別のコメントで追加してください。
- 包括的な言葉を使う障害者差別的な言葉遣いを避け、性別に中立な代名詞や用語を使用し、多様な意見や絵文字を共有し、思い込みや限定的な視点がないかテキストを精査してください。
これは、説明的なキャプション、Pascal Case ハッシュタグ、限定的な絵文字を使用し、ハッシュタグを投稿本文から分離している Canyon Bikes の優れた例です。
4. わかりやすいビジュアルを作成する
テキストと同様に、ソーシャル メディアのビジュアルもアクセシビリティの課題となる場合があります。視覚障害を持つユーザーは、インターネットを操作して視覚情報を理解するために、スクリーン リーダーなどのツールに大きく依存しています。
幸いなことに、ビジュアルを誰もがアクセスしやすく、包括的にするための簡単な方法はたくさんあります。
アクセシブルなビジュアルを作成するには、次のヒントに従ってください。
- 色のコントラストを確認してください。 背景にテキストを配置する場合、WCAG では少なくとも 4.5:1 のコントラストを推奨しています。このカラー コントラスト アナライザーなどの無料ツールを使用して色を確認できます。読みにくい画像の上にテキストを配置することは避けてください。
- 意味を伝えるのに色に頼らないでください。 色覚異常などの視覚障害を持つ人にとって、色を識別することは難しい場合があります。そのため、色だけに頼って何かを伝えるべきではありません。色だけに頼るのではなく、シンボル、パターン、またはラベルと組み合わせてください。
- アニメーション画像を共有するときは、点滅したり動きが激しい画像は避けてください。 動きは、前庭疾患を持つ人にとっててんかん、片頭痛、その他の問題を引き起こす可能性があります。可能であれば、動きが激しい GIF やその他のアニメーション画像の投稿は避けてください。
- 画像に過剰なテキストを追加しないでください。 大きなテキスト ブロックを共有したい場合は、投稿のキャプションに入力します。これにより、ユーザーはニーズに合わせてサイズ、色、言語を変更できます。
出典: Facebookデザイン
5. ミームと絵文字
絵文字やミームはインターネットやソーシャル メディアに深く根付いています。しかし、残念ながら、誰もが 100% 利用できるわけではありません。
たとえば、ブランドが絵文字を使用して文字通りの意味とは異なる内容を伝える場合、スクリーン リーダーなどの支援ツールで解釈すると、このコンテキストが失われる可能性があります。
強調するために各単語の間に手をたたく絵文字を使用すると、スクリーン リーダーのユーザーには各単語の後に「手をたたく」という音が聞こえます。これはどの絵文字にも当てはまります。これは気が散り、迷惑で、混乱を招きます。強調しようとしているメッセージが失われる可能性が高くなります。
— アクセシビリティ意識 (@A11yAwareness) 2023年4月3日
ミームはさらにひどい場合があります。多くの場合、ミームは画像にテキストを重ねて作成されます。ミームに代替テキストが含まれていても、テキストだけでオチを説明するのは難しい場合があります。
https://twitter.com/metraux_julia/status/1560081886331817984
ミームや絵文字をアクセシビリティ対応にするためのヒントをいくつか紹介します。
- 箇条書きとして絵文字を使用しないでください。 スクリーン リーダーは各絵文字の代替テキストを読み上げます。これにより、リストの読み取り時間が長くなり、明瞭さが損なわれる可能性があります。
- コンテンツとコンテキストを説明します。 ミームに代替テキストを追加するときは、コンテンツとコンテキストをできるだけ詳しく説明し、ジョークやユーモアについて説明してください。
- ASCII アート/ミームを避ける: これらはアクセシビリティの最も悪い例です。ご想像のとおり、テキスト読み上げツールが複数行のASCIIアートを読み上げると、非常に混乱を招く可能性があります。 このような ユーザーに。このトレンドに参加したい場合は、ASCII アートを画像として共有し、代替テキストで説明してください。
- 絵文字を文末に配置します。 支援ツールで読み取るときに邪魔になるため、文章の途中に絵文字を追加しないでください。代わりに、文章またはキャプションの末尾に絵文字を配置します。
- ソーシャル メディアの投稿ごとに絵文字を 3 つまで使用できます。 絵文字を多用すると、スクリーン リーダーを使用するユーザーにとって混乱を招く可能性があります。原則として、投稿には 3 つ以上の絵文字を使用しないでください。
- 絵文字を 3 つ以上続けて繰り返さないでください。 絵文字の繰り返しは、テキスト読み上げツールで読み上げるときに時間がかかることがあります。また、絵文字が繰り返される理由が理解できない可能性もあるため、可能な場合は避けてください。
パイナップルについてのあなたの意見を聞きたいです
＼(´･_･＼)
（）
く
ゴミ箱に捨てる
(´･_･`)
(＼ )＼
＞ ＞
— ドミノ・ピザ (@dominos) 2023年3月10日
Domino’s のこの例が示すように、ブランドはトレンドに参加したくなるものです。しかし、このツイートは絵文字や ASCII 記号が含まれているため、支援ツールで正しく解釈するのは困難です。
6. プラットフォームのアクセシビリティ機能の最新情報を把握する
朗報です。近年、多くのソーシャル メディア プラットフォームにとって、アクセシビリティは大きな優先事項となっています。Twitter と TikTok は、アクセシビリティの改善と新機能の導入をリードしてきました。これには、代替テキストや自動生成されたキャプションが含まれます。
各プラットフォームのアクセシビリティ機能とリソースをよく理解しておくことが重要です。詳細については、以下のリンクをご覧ください。
フェイスブックとインスタグラム:
- メタアクセシビリティページ
- Twitter のメタ アクセシビリティ
- Facebook アクセシビリティ ヘルプセンター
- Instagram アクセシビリティ ヘルプセンター
ツイッター:
ユーチューブ:
- YouTube のアクセシビリティ設定
- スクリーンリーダーで YouTube を使用する
- YouTube モバイルアプリのアクセシビリティ
ピンタレスト:
- 感情的健康リソース
- エンジニアとデザイナーのためのアクセシビリティのベストプラクティス
- 視覚アクセシビリティ機能
リンクトイン:
- LinkedIn のアクセシビリティ
- スクリーンリーダーのサポート
- アクセシビリティサポートリクエストを送信する
ティックトック:
- TikTokのアクセシビリティ
- アクセシブルなコンテンツを作成するためのヒント
その他のリソース:
最後に、アクセシビリティの専門家をいくつか紹介します。
7. フィードバックを受け入れる
すべてのソーシャル メディア マーケティング担当者がアクセシビリティの専門家であることを期待する人はいません。その代わりに、(この記事のような記事を通じて) 最新情報を入手するように最善を尽くし、アクセシビリティに関する間違いを犯した場合は、フィードバックを受け入れて、今後の参考にしてください。
5/x アクセシビリティに関する情報の多さに圧倒されていると感じる場合は、次の点を思い出してください。目標は、すべての標準とテクニックを暗記することではありません。アクセシビリティは、チェックリストのように、チェックして終わりというものではありません。標準に準拠することは、終わりではなく、始まりです。#あ11y#a11y2022
— パトリック・ガービン (@PatrickMGarvin) 2022年1月5日
ここに個人的な例を挙げます。
私が作成したビジュアルを改善してくれるデザイナーを探していたとき、グループでそのビジュアルを共有し、そのビジュアルを説明するのに「ダサい」という言葉を使いました。メンバーの一人が、「ダサい」は障害者差別用語なので、別の言葉を使うべきだとコメントしました。
もちろん、公の場で辱められるのは嫌だった。それでも、それが包括的ではないとは気づかなかったので、コメントしてくれた人に教育してくれて感謝した。
企業も同じアプローチを取るべきです。防御的になることを避け、謝罪し、間違いを認め、二度と繰り返さないようにしましょう。
ブランドとして、フィードバックに対してオープンであることを示すには、いくつかの方法があります。
- プロフィールまたはプロフィールリンクに明確な連絡先情報を記載してください
- DM/受信トレイを開いたままにしておく
- チャットボットを使ってメッセージに返信する場合は、人間に簡単に連絡できるようにしましょう。
- 否定的な発言やコメントに返信するときは、常にプロフェッショナルな口調を保つ
影響を受けた方には申し訳ありません。アクセシビリティは私にとって非常に重要です。これは寝る前に衝動的に書いたものです。これは私が気に入った別のシンボルベースのツイートからインスピレーションを得たものです。ID 付きの画像バージョンが追加されました。
— Callum Stephen (彼/彼) (@AutisticCallum_) 2022年1月15日
これは、アクセシビリティのフィードバックにどのように対応するかを示す優れた例です。
ソーシャルメディアアクセシビリティツール
ウェブコンテンツアクセシビリティガイドライン (WCAG) 2.1
W3 の推奨事項は、アクセス可能な Web およびソーシャル メディア エクスペリエンスの業界標準を設定します。
Vox 製品アクセシビリティ ガイドライン
これらのガイドラインは、デザイナー、編集者、エンジニアなどのためのインタラクティブなチェックリストを提供します。
読みやすさツール
Hemmingway Editor または Readable を使用して、コピーの読みやすさを確認します。WCAG 標準に準拠するには、グレード 8 以下を目指します。
スレッドリーダーアプリ
これ Twitterボット プラットフォーム上のスレッドを展開して、ユーザーがより簡単に読めるようにします。アプリを起動するには、タグを付けて、展開したいスレッドに「unroll」と返信します。
キャップカット
CapCut を使用すると、Instagram Reels、TikTok 動画、その他の動画にキャプションを自動的に追加できます。
コントラストアプリ
Contrast は、WCAG 準拠のコントラスト チェッカーを提供する Mac アプリです。このアプリを使用すると、デザイナーは色を選択するときにコントラスト スコアをチェックできます。こちらは、WCAG 標準を簡素化した作成者によるガイドです。
コントラストチェッカー
コントラスト チェッカーを使用すると、特定の画像をドラッグ アンド ドロップしてコントラスト チェックを行うことができます。これは、ソーシャル メディアにアセットをアップロードする前に行うと便利です。
カラーオラクル
情報を伝えるのに色だけを使っていないことを確認するには、無料の色覚異常シミュレーターを使用してください。このオープンソース ツールは、Windows、Mac、Linux で利用できます。
カラーセーフ
十分なコントラストを提供し、WCAG ガイドラインに準拠したカラーパレットを見つけるのにサポートが必要な場合は、Color Safe を使用してください。
背景画像のテキストのアクセシビリティチェック
この画像上のテキストのアクセシビリティ ツールは、色のコントラストに基づいてテキストの読みやすさを判断するのに役立ちます。
あなたを説明する
YouDescribe は、ボランティアによって作成された説明音声付きの YouTube 動画のデータベースです。開始するには、YouTube の URL を検索フィールドにコピーして貼り付け、[説明の作成/編集]をクリックします。
67パーセントコレクション
#SeeThe67 percent キャンペーンの一環として、Refinery29 は Getty Images と提携し、プラスサイズの女性をフィーチャーした画像を提供しました。このコラボレーションの続きである No Apologies コレクションもご覧ください。Dove も Getty と提携し、Show Us コレクションで美の固定観念を打ち破りました。
ジェンダースペクトラムコレクション
Vice は、このストックフォトコレクションを通じて、メディアが「二元性を超える」ことを奨励しています。
老化を阻止するコレクション
AARP と Getty が作成したこのコレクションでは、年齢差別と闘う 1,400 枚を超える画像にアクセスできます。
エギスブ
Aegisub は、字幕を作成および編集するための無料のオープンソース ツールです。このツールを使用して、ビデオのトランスクリプトを作成することもできます。
メンションリティクス
Mentionlytics を使用して、ソーシャル メディアや Web 全体でのブランドの言及を追跡します。このツールは、@ 言及されているかどうかに関係なく、質問やフィードバックに応答するのに適した方法です。
最後に、私が必読だと思う2つのリソースを紹介したいと思います。 毎 ソーシャルメディアマーケティング担当者。
まず、Accessible Social です。Alexa Heinrich によるこの Web サイトには、アクセシビリティの高いソーシャル メディア コンテンツを作成するためのヒントとベスト プラクティスが更新されています。
また、英国政府コミュニケーションチームによるガイド「Creating Accessible Social Media Campaigns」も気に入っています。フォントからハッシュタグ、リンクまで、あらゆることが網羅されています。
ソーシャル メディアのアクセシビリティとは、排除を認識し、フォロワーから学び、可能な限り明確な方法で情報を提示することを意味します。そして結局のところ、それが優れたマーケティングなのです。
参考文献:
アクセシビリティの高いソーシャルメディアとウェブサイトコンテンツを作成する理由と方法
私たちの活動を応援してください ❤️
この記事を気に入っていただけたら、今後も質の高いコンテンツを発信し続けられるようチップのご支援をご検討ください。
