このビデオでは、WebFX InteractiveチームのJaciが、アクセシブルなWebデザインを開始する方法を説明しています。

トランスクリプト：

ウェブサイトをチェックすることに本当に興奮しているのに、そのウェブサイトにアクセスすると、そのコンテンツにアクセスできないとしたらどう思いますか？ 個人的にはイライラしますし、あなたもそうだと思います。

アクセシブルなウェブデザインを使用しない場合、これは米国で障害を持つ成人の4人に1人のために作成するシナリオです。これはあなたのウェブサイトに平等にアクセスできない約6,100万人です。

Webデザインのアクセシビリティガイドラインに従うのは、これまでに行ったことがない場合は簡単ではありませんが、始めるためにできることをいくつか概説します。

この動画の別のセクションにスキップする場合は、動画の説明にあるタイムスタンプを使用してください。 今、私はウェブサイトのアクセシビリティの概要に飛び込みます。

ウェブサイトのアクセシビリティとは何ですか？

ウェブサイトのアクセシビリティとは、障害を持つ人々がそれを使用できるようにウェブサイトが設計されていることを意味します。 アクセシブルなデザインの目標は、技術的な障壁を取り除き、誰もがあなたのコンテンツを操作できるようにすることです。

W3Cとしても知られるWorldWideWeb Consortiumによると、アクセシブルなWebサイトは、聴覚、認知、神経、身体、言語、および視覚の障害を持つ人々のために機能します。

どこから始めればよいかわからなくても心配しないでください。 W3Cには、基準を満たすためにWebサイトに何を含めるべきかを説明するドキュメントがあります。

このドキュメントには次のものが含まれます。

• オーサリングツールアクセシビリティガイドライン（ATAG）
• Webコンテンツアクセシビリティガイドライン（WCAG）
• ユーザーエージェントアクセシビリティガイドライン（UAAG）

ATAGは、人々がインターネットコンテンツを作成するために使用するツールに焦点を当てており、UAAGは、Webコンテンツをレンダリングするツールのアクセシビリティを調べています。

このビデオでは、誰もがWebサイトのコンテンツにアクセスできるようにするためのガイドラインであるWCAGに焦点を当てます。

WCAGを使用すると、A、AA、AAAの3つの異なるレベルのコンプライアンスが得られます。 AからAA、AAAに進むにつれて、WCAGによって定められたより多くの基準に従い、より多くの人々がサイトにアクセスできるようになります。

それで、あなたがアクセシブルなウェブサイトを持っているかどうかをどうやって知るのですか？ 監査をしてください！

あなたのウェブサイトのアクセシビリティを監査する方法

自分で監査を行う必要はありません。 監査を外部委託したい場合は、Webサイトを分析し、必要な調整を行うことができるコンサルタントのチームに連絡してください。

さて、社内で物事を処理したい場合は、たくさんのオプションがあります。 Webサイトのページを調べて手動で問題を探すこともできますが、これにはおそらく多くの時間がかかります。

あなたはあなたを助けるためにいくつかのツールを使用したいかもしれません。 URLをWAVEなどのアクセシビリティチェッカーに接続して、1ページで更新する必要があるものを確認します。 一括アクセシビリティチェッカーを使用して、一度に複数のページを分析することもできます。

W3C Webサイトには、アクセシビリティツールの大きなリストがあるため、すべてを自分で行う必要はありません。

また、アクセシビリティのための5つの重要な要素のリストと、いくつかのアクセシブルな設計例（次に説明します）がありますので、私に固執してください。

5つのWebデザインアクセシビリティガイドライン

これらはWCAGガイドラインの短い要約であることを覚えておいてください。 W3Cのクイックリファレンスガイドを使用して、アクセシブルなデザインのより詳細なテクニックを学ぶことをお勧めします。

1.テキストが読みやすいことを確認します

重要な情報を伝える通常サイズのテキストは、読みやすいものである必要があります。

これにはコントラストが重要な役割を果たします。 現在のところ、大きなテキスト（主要な見出しなど）には、テキストと背景のコントラスト比が3：1である必要があります。 コンテンツの本文を構成するテキストのような通常の（または小さい）テキストには、4.5：1のコントラスト比が必要です。

コントラストが少なすぎる例は、少し濃い緑色の背景に明るい緑色のテキストのように見えます。 テキストを黒または白に変更すると、Webサイトのコントラストが大幅に向上します。

また、ユーザーは、サイトの機能に影響を与えたり、コンテンツを見逃したりしない方法でテキストを拡大できる必要があります。

2.見たり読んだりする画像を最適化する

画像に代替テキストを追加することは、SEOの一般的な方法だけではありません。 画像が見えない人が画像の内容を理解するのに役立ちます。

代替テキストは、画像で何が起こっているかを明確に説明する少しのテキストです。 代替テキストは、画像の埋め込みコードにぴったり収まります。 このMashableの例でわかるように、ページには画像があり、コード側に移動すると、代替テキストが表示されます。

3.視聴者に動画を理解するための追加の方法を提供します

これまでに動画にキャプションを追加したことがない場合は、今から始めましょう。 また、YouTubeや他のホスティングプロバイダーが自動的に生成するものだけに頼らないでください。

時間と忍耐力がある場合は、自動生成されたキャプションを確認して編集してください。 AIから来るのは完璧ではありません。

Revなどのツールを使用してキャプションを注文し、ビデオに追加することもできます。

動画にトランスクリプトを含めると、動画にアクセスしやすくなります。 スクリプトを作成した場合は、すでにトランスクリプトが準備されています。

音声ガイドは、アクセシビリティの別の層を追加します。 これらは、対話のギャップの間でビデオで何が起こっているかを説明する個別のオーディオトラックです。

したがって、最近の買い物旅行について2人の人が話していて、ビデオが服を着ている人の映像に切り取られた場合、音声ガイドはビデオで何が起こっているかを説明します。 これは次のようなものかもしれません。女性が鏡の前に立ち、肩に2枚のスカーフをかけます。

Wistiaのようなホスティングプラットフォームでは、音声ガイドをアップロードできます（また、ビデオをアップロードするときにビデオアクセシビリティチェックリストもあります）。

4.マウスとキーボードに対応するようにWebサイトを設計します

誰もがインターネットをナビゲートするためにマウスを使用するわけではありません。 あなたのウェブサイトはそれを反映するべきです。

これは、誰かがキーボードを介してWebサイトを操作できるようにする必要があるだけでなく、Webサイトのどの部分に焦点が当てられているかを強調するための目立つ方法があることも必要です。

別のアクセシブルなデザイン例を見ると、Keds Webサイトの検索バーをクリックすると、入力できることを知らせる古典的な点滅線が表示されていることがわかります。 クリックすると検索バーも目立つようになります。

WCAGガイドラインを満たすために、この機能はキーボードが使用されているときに発生する必要があります。

5.サイトのナビゲーションを理解しやすくします

このヒントは、アクセシビリティを超えています。 あなたのウェブサイトをナビゲートすることを単純で明確にすることは一般的に良いことです。

明確な目的を持つページのタイトルと見出しを書きます。 リンク先のコンテンツの内容を簡単に理解できるリンクアンカーテキストを使用します。

繰り返しになりますが、フォーカスインジケーターを使用して、ページのどこにいるかがわかるようにします。 サイトマップ、メインナビゲーション、目次など、Webページにアクセスするための複数の方法を提供します。

そして、どうすればこれをスキップできますか？ 一貫したナビゲーションがあります。 つまり、メインナビゲーションヘッダーがある場合、ユーザーがページ間を移動しても、実際には変更されないはずです。

At HomeのWebサイトを取り上げたこの例では、あるページから次のページをクリックしていますが、ページ上部のナビゲーションは変わりません。

そして、先に述べたように、これはWebデザインのアクセシビリティガイドラインに従うために必要なことの包括的なリストではありません。 これらのガイドラインも変更される可能性があるため、アクセシビリティを評価する準備ができたら調査を行ってください。

さまざまなウェブデザインやデジタルマーケティングのトピックについて学び続けるには、 YouTubeチャンネルとメールマガジンのRevenueWeeklyを購読してください。 がっかりすることはありません。

ご参加いただきありがとうございます！

WebFXビデオからマーケティング知識を得る5,000人のマーケターに加わってください。

今すぐ購読