2023年にアクセス可能なB2B Webサイトを作成する方法

2023 年になり、今日に至るまで、障害を持つユーザーはブログ、Web サイト、およびその他のさまざまな資料にアクセスすることが困難です。 マーケティング資料が障害のある人々に対応していない場合、意図しない除外の明確なパターンがあります。

障害を持つユーザーがアクセスできる Web サイトはわずか 3% です。 アクセス可能なB2B Web サイトの数はさらに少なくなっています。

また、コンテンツ ゲーティング フォームや長文ブログなどの独自のインタラクティブ ツールを備えたこれらのサイトでは、Web アクセシビリティを実現する必要性が差し迫っています。

このブログでは、Web サイトのアクセシビリティとは何か、それを実現する方法、および B2B ビジネスが市場の非常にサービスが行き届いていない部分にリーチを拡大するのにどのように役立つかを説明することにより、ギャップを埋めるのに役立ちます.

Web アクセシビリティとは何か、なぜ重要なのか?

Web アクセシビリティの標準とベスト プラクティスにより、障害を持つ人々が Web ベースのエクスペリエンスに参加できるようになります。

これには、Web サイトのナビゲート、電子ブックのダウンロード、ウェビナーの視聴などが含まれます。

アクセシビリティには万能のアプローチはありません。 障害にはさまざまな種類があり、それぞれがさまざまな人にさまざまな影響を与える可能性があります。

ただし、Web サイトの所有者は、標準化された方法でこれらの影響に対処できます。

Web コンテンツ アクセシビリティ ガイドライン(略して WCAG) は、障害を持つ Web ユーザーのニーズに対応するためのベスト プラクティスを確立しています。

これらのガイドラインに従うことは、障害を持つすべての人があなたの Web サイトを使用できることを保証するものではありません。 ただし、これらは、Web サイトの所有者が Web エクスペリエンスをより包括的にするための共通の出発点を提供します。

WCAG は、Americans with Disabilities Act (略して ADA) への準拠の中核でもあります。
ほとんどの場合、WCAG 準拠の Web サイトは ADA 準拠でもあります。

WCAG プロトコルに従うことが、ADA 準拠を保証する最善の方法です。

すべての Web サイトがコンプライアンスを考慮して設計されているわけではありません。 実際、その数は非常に少ないです。

そのため、B2B Web サイトの所有者は WCAG コンプライアンス チェッカーを使用して、Web アクセシビリティを改善する方法を見つけています。 これは、WCAG コンプライアンスの達成との間にあるものを見つけるのに役立ちます。 詳細なレポートが提供され、最適な Web アクセシビリティ ステータスを達成するために調整が必要な Web サイトの領域が強調表示されます。

障害者コミュニティの購買力

アクセシビリティはモラルの観点から重要ですが、ブランドの価値ある差別化要因でもあります。

世界人口の約 15% が何らかの障害を経験しています。 障害は、国や文化の壁によって制限されません。 それらは、地球上のあらゆる場所で、あらゆる人口統計に影響を与えます。

つまり、お客様の聴衆の一部は障害を持つ人々によって構成されているということです。 ケスラー財団は、米国の労働力に占める障害者の割合が増加していると報告しています。 前年比の傾向は、一貫してパーセンテージポイントの上昇で勢いを増し続けています。

これらの人々を無視することは不当であるだけでなく、賢明でもありません。

B2B マーケティング戦略がブログへのオーガニック トラフィックの促進に依存している場合、潜在的な顧客の約 15% を除外することは意味がありません。

しかし、これはまさに多くの企業が行っていることです。

障害を持つ人々にとって、Web アクセシビリティはユーザー エクスペリエンスにとって絶対に不可欠です。

これらの人々の多くは、準拠していない Web サイトは使用できないと感じています。 彼らは他の人と同じようにコンテンツに遭遇しますが、それとのやり取りから完全に除外されます.

そのコンテンツは、B2B バイヤーのジャーニーにおいて重要な役割を果たします。

それは正しいことであり、収益性の高いビジネス戦略でもあります。

アクセシブルなウェブサイトを作成する方法

公式の WCAG 2.1 ドキュメントには、100 ページを超える高度に技術的な Web デザインと対話機能の標準が含まれています。 それは、多くの規則、条項、規定を含む威圧的な文書です。

ただし、アクセシブルな Web サイトを構築するために、アクセシビリティの専門家になる必要はありません。
WCAG 2.1 プロトコルの多くは、理解しやすい基本原則のセットを中心に展開しています。

これらを Web サイトに実装すると、アクセシビリティ コンプライアンスに向けて順調に進むことができます。

キーボード ナビゲーションを許可する

マウスは素晴らしいツールですが、あまり使いやすいものではありません。 同じことがタッチパッドとタッチスクリーンディスプレイにも当てはまります。 視覚または運動能力に障害のある人は、これらのデバイスを使用できません。

代わりに、障害を持つ多くの人が特殊なキーボードを使用しています。
このようなデバイスは、スティーブン ホーキング博士の頬のけいれんなど、ほぼすべての種類の物理的な入力をキーボード コマンドに変換できます。

同様に、JAWS のような画面読み上げソフトウェアは、キーボード コマンドだけで動作します。 Web サイトにキーボードでアクセスできないボタンや機能がある場合、スクリーン リーダーのユーザーはそれらを使用できません。

人々が Web サイトをナビゲートし、キーボード コマンドのみを使用してコンテンツを消費できるようにすることは、サイト全体のアクセシビリティを改善する最良の方法の 1 つです。

これは、インタラクティブなコンテンツ (ビデオ上のフォームなど) を使用してリードを獲得して変換する B2B Web サイトにとって特に重要です。

見出し階層を活用する

見出しは、スクリーン リーダーのユーザーにとって特に重要です。
これらのソリューションは、Web ページの見出し構造に基づいてテキスト コンテンツをグループ化します。 これにより、視覚障害のあるユーザーは、ページ上のすべての単語を読む必要なく、コンテンツをざっと読むことができます。

Web ページが適切な HTML 見出しを使用していない場合、彼らはこれを行うことができません。

通常、これは、コンテンツ作成者が通常のテキストのブロックを追加の通常のテキストで分割するときに発生します。 分割テキストは拡大または太字にすることができますが、見出しではありません。 スクリーン リーダーは、そのテキストをページ上の他のすべてのものと同じように読み上げます。

見出しは、Web ページの構造の一部です。 それらは、通常は H1 から H4 までの重要な特定の階層でタグ付けされます。 すべてのリッチ テキスト エディターで、コンテンツ ライターはこれらの見出しを使用してテキストのブロックを区切ることができます。 あなたのウェブサイトが同じことをしていることを確認してください。

説明的な代替テキストを追加する

画像ファイルは、スクリーン リーダーのユーザーに問題をもたらします。 スクリーン リーダーが画像ファイルに遭遇すると、画像の代替テキスト タグをユーザーに読み上げます。 代替テキストがない場合、ソフトウェアは単に「画像」と読み上げてから先に進みます。

画像に代替テキストを追加すると、スクリーン リーダーのユーザーは、他の方法では見逃す可能性のあるコンテキストの手がかりを理解できます。 問題の画像に重要な情報が含まれている場合、代替テキスト タグは、スクリーン リーダーがその情報を取得できる唯一の場所です。

これは、記述されたコンテンツをサポートする画像の場合に特に重要です。 チャート、インフォグラフィック、およびその他の説明画像は、B2B コンテンツ マーケティングにおいて重要な役割を果たします。 代替テキスト タグにより、視覚障害のあるユーザーがこれらの画像を適切に理解できるようになります。

alt-text タグは説明的であればあるほど良いです。
画像の価値をカプセル化し、そもそもなぜそれが選ばれたのかを示すようにしてください。

色のコントラストの芸術を完成させる

色のコントラストが悪いと、使いやすさとアクセシビリティの両方に大きな影響を与える可能性があります。 完全な視力を持つ人でも、同じような色の背景の上に書かれたテキストを簡単に読むことはできません。 アクセス可能な Web サイトのテキストは、適切な色のコントラストを提供する背景に対して設定する必要があります。

ほとんどの Web サイトでは、本文の色のコントラストは難しい問題ではありません。 バナー、ヘッダー テキスト、およびページ タイトルでは、より一般的な問題です。 これは、このテキストが画像の上にあることが多いためです。 文字と画像の色が近すぎると判読不能になります。

Rock Content のホームページは、色のコントラストが機能している好例です。 メイン画像の後ろに明るい紫色のフレアの背景があり、上部に黒いテキストがあります。 シンプルで、効果的で、読みやすいです。

Web サイトの色のコントラストを修正するには、いくつかの方法があります。

4.5:1 のコントラスト比になるようにテキストの色を調整するのが、最も簡単な解決策の 1 つです。
アクセス可能な Web サイトの多くは、背景画像とヘッダー テキストの間に透明なボックスを重ねています。 ヘッダー テキストを画像の上ではなく横に移動するだけの場合もあります。

動画にアクセスできることを確認する

ビデオ マーケティングは、最新の B2B マーケティング戦略のコア コンポーネントです。 製品を紹介したり、新しいテクノロジーを紹介したりしたい場合は、動画が最も没入感のある形式です。

ただし、ビデオは、障害を持つユーザーにとって最も困難な形式の 1 つになることもあります。 オーディオとビジュアルの情報を組み合わせてストーリーを伝えます。ほとんどのビデオ プレーヤーには、ポイント アンド クリック インターフェイスがあります。

キャプションとトランスクリプトは、障害を持つ人々がビデオ コンテンツを楽しめるようにする上で重要な役割を果たします。 キャプションは難聴者にとって理想的ですが、トランスクリプトはスクリーン リーダーのユーザーも理解できるようにします。

ビデオ コンテンツのキーボード操作性を確保するのは難しい場合があります。 すべてのビデオ ホスティング プロバイダーがアクセス可能なユーザー エクスペリエンスを提供しているわけではありません。 トランスクリプトを投稿すると、この要件を回避できる場合がありますが、必ずしもビデオ コンテンツの意味が完全に伝わるとは限りません。

フォームも同様です。

ビデオ コンテンツをフォームでゲートする場合は、アクセスしやすく、簡単に入力できるようにする必要があります。 明確に読みやすく、キーボードでナビゲートでき、スクリーン リーダーと互換性がある必要があります。

強力なサードパーティ ソリューションでコンプライアンスを最適化

WCAG プロトコルには、膨大な数の技術設計の詳細が含まれています。 これらには、特定の色のコントラスト比、操作性の基準、アンカー リンクのパフォーマンスなどが含まれます。

これらすべてを手動で検証することは、困難で時間のかかるプロセスです。 Web サイトのすべてのページで、何百もの小さな技術的な詳細を記憶し、チェックし、相互参照する必要があります。

Web アクセシビリティ ツールは、このタスクを自動化するのに役立ちます。 accessWidget などのツールには AI が組み込まれており、サイト内のアクセスできないコードを自動的に修正します。

また、障害を持つ Web サイトの訪問者が、個々のニーズに基づいて Web サイトの UI を変更できるようにします。 これには、色と表示オプションの調整、キーボード ナビゲーションの有効化、スクリーン リーダー テクノロジの調整が含まれます。

WCAG 標準のすべての要件を自動化できるわけではないことに注意してください。 これらの要件の一部は、コンテンツがユーザーに「意味」を伝える方法に言及しています。 それを確認できるのは人間だけです。

アクセシビリティは継続的な取り組みです

アクセシビリティは、チェックするコンプライアンス ボックス以上のものです。 あらゆる障害を持つすべての人が、Web サイトとそのすべてのコンテンツにアクセスできることを保証する方法はありません。 アクセシビリティへの道のりの一部には、障害を持つ人々からフィードバックを受け取り、それを実装することが含まれます。

その旅を始めるのが早ければ早いほど、結果は良くなります。 時間をかけて Web サイトを監査し、コンテンツのアクセシビリティを改善できる領域を特定してください。 障害者コミュニティに手を差し伸べて、その成功と統合に投資していることを示してください。 親切に対応してくれます。

さまざまな対象者にビジネスを売り込む方法に関するガイドラインについては、マーケティング プランニング バンドルをご覧ください。