アクセシビリティのためにサイトを設計する10の方法

公開: 2022-02-16
アクセシビリティのためにサイトを設計する10の方法

私は現代のウェブデザインに不満を持っています。 そして私は確かに、グローバルなアクセシビリティをチェックせずに作品を販売するほとんどのテーマとテンプレートのデザイナーに不満を感じています。

多くの設計者は、実際に優れたアクセシブルなCMSを採用し、アクセシビリティに大きな問題があるデザインを作成しています。

私はオーストラリアの弁護士、ウェブサイトデザイナー、アクセシビリティ/ダイバーシティコンサルタントです。 企業、政府、教育部門にアドバイスしたところ、多くのサイトにアクセスできず、多くのユーザーに悪い体験を提供していることがわかりました。

なぜアクセシビリティが重要なのですか?

2010年には、先進国の10%の人々が印刷障害を持っていました。 その数字は非先進国では15%でした。

オーストラリアでは、アクセシビリティは十分に重要であると考えられているため、サイトにアクセスできない場合は裁判所に連れて行くことができます。 ショック?

いいえ、クライアントが「視覚障害者向けサイト」に焦点を当てることは決してお勧めしませんが、すべての人がアクセスできるサイトです。 これには、印刷障害、身体障害、聴覚障害のある人、さらには高齢者も含まれます。 要するに、あなたの全聴衆の大部分はあなたのようにあなたのサイトにアクセスすることができません。

高い? いいえ、実際には、これは実際の基本的なものであるため、設計標準に戻ります。

サイトにアクセスできるようにするための10の手順を次に示します。

#1。 サイトを使いやすくする

デザインの仕方を教える必要はありません。 しかし、これらの3つの主要な原則は、障害を持つユーザーを支援します。

  1. サイトを読みやすく、理解しやすくする
  2. サイトをナビゲートしやすくする
  3. モバイルデバイスでサイトを使いやすくする

これにより、アクセシビリティに近づくことができ、検索エンジンがあなたのサイトを愛するのにも役立ちます!

私が自分のサイトをテストするスクリーンリーダーは、Googleのロボットと同じです(ブラインドテクノロジーが最初に登場したことを除いて)。

#2。 アクセシビリティソフトウェアでテストする

PCには、画面のナビゲートと読み取りを支援するアクセシビリティソフトウェアがあることをご存知ですか? あなたはおそらくそうしましたが、モバイルデバイスにはアクセシビリティソフトウェアがコアに組み込まれていることも知っていましたか? このソフトウェアは、視覚障害のある人を含む人々に読むことができます。

  • Apple(iOS)はVoiceOverを使用しています。
  • AndroidはTalkbackを使用しています。
  • Windowsはナレーターを使用します。

ほぼすべてのウェブサイトデザイナーがテンプレートにメニューを含めていますが、95%は上記のテクノロジーのいずれでも読み取ることができません! これらのアクセシビリティサービスのほとんどは、メニューが正しくコーディングされていないため、メニューが存在することを認識できません。 ほとんどの場合、問題はメニューのコーディングが不十分であるか、明確にタグ付けされていないことです。

いくつかのサイトを携帯電話にロードして、ユーザー補助機能をオンにする価値があります。 サイトのメニューが機能するかどうかを確認します。

AppleVoiceOverの点字パネル

#3。 すべてを大文字で書かないでください

これはおそらく、誰もが自分のサイトに加えることができる最も基本的な変更です。すべて大文字で書かないでください。

すべての大文字は誰にとっても読みにくいため、これは科学的にテストされ、証明されています。

最もよく使われている大文字は、メニュー項目とボタンにあります。 ブランドやロゴなどの特定のデザイン目的がない限り、通常の大文字で書くと、メッセージを発信するのに役立ちます。

#4。 リンクを明確に説明する

[続きを読む]または[ここをクリック]ボタンは、リンクの背後にあるものをGoogle(またはスクリーンリーダーを使用しているユーザー)に通知しません。 リンクをコンテキストから外して、意味があるかどうかを確認してください。 ページの真ん中にある「続きを読む」はあなたにとって意味がありますか?続きを読む何ですか?

#5。 対照的なスタイルを使用する

それはあなたのコンテンツを殺すことを意味するのではありません-それは視覚障害者にとってそれを容易にすることを意味します。 ヒントは次のとおりです...モバイル画面を半分の電力に変えて、サイトを読んでみてください。 明暗の中でどのように見えますか?

#6。 「コンテンツにスキップ」リンクを使用

メインコンテンツを読む前に、頭を30回うなずくと想像してみてください。 あなたが彼らにメニューをスキップすることを許可しないならば、印刷障害を持つ人々はこれをしなければなりません。 実際、これは見出しタグの使用についても同じです。H1からH4は、検索エンジンや印刷障害のある人がサイトをナビゲートするのに役立ちます。

ああ、そしてリンクを画面から隠さないでください! 視力障害のある人は、拡大鏡を使用して、それらのリンクを手動で(キーボード経由ではなく)探すことがよくあります。

#7。 ポップアップの使用を停止する

少なくとも、「esc」を押して取り除くことができないものの使用はやめてください。 私たちのソフトウェアは基本的にこれらのポップアップボックスに入ることができないことをご存知ですか? そして通常、私たちは箱の後ろにあるものを読むことになります-それはあなたには灰色に見えますが、私たちには見えません。

ポップアップを使用する場合:

  • 'esc'ボタンで閉じることができるように作成します。
  • ソフトウェアが後ろのテキストではなくボックスを読み取れるように作成します。
  • コンテンツを検索する別の方法の詳細を入力するか、フォームに入力してください-'または、詳細についてはxxxxページにアクセスしてください'。

#8。 テキストリサイザーは、状況によっては役立つ場合があります

個人的には、テキストリサイザーはコンテンツリンクにスキップするよりもはるかに重要ではありません。 これは、印刷障害のある人(古い世代を含む)が、Windows拡大鏡、またはズームテキスト、魔法の目、その他の無料ソフトウェアなどの専門製品を使用するためです。 私の経験テキストでは、リサイザーは一般にモバイルコンテンツを破壊し、ピンチしたり、コアのモバイルアクセシビリティ機能を使用したりするよりも応答性が低くなります。

また、テキストのサイズを変更するアダプティブテクノロジーを使用すると、ユーザーはテキストのオンとオフを切り替えて、画面上で自分自身を見つけることができます(ズームによっては、一度に画面の1/8しか表示されません)。 とは言うものの、テキストリサイザーは依然として関連性があり、政府のサイトに導入する価値があるかもしれません。私にとって最優先事項ではありません。

#9。 画像アイコンではなくフォントアイコンを使用する

拡大を使用する人は一度にサイトの約1/8しか見ることができず、携帯電話を使用する人は通常、「リーダー」ボタンを押すことによって画像のないバージョンをロードします。 ほとんどの「画像アイコン」が最大ズームで極端にピクセル化するという事実についての投稿を書くことができますが、フォントアイコンはそうではありません(とにかくそれほど多くはありません)。

#10。 ビデオトランスクリプトを追加する

完全に無音の場合、ウェブサイトにYouTube動画を掲載しても意味がありません。また、聴覚障害者がそれをフォローするための記録や方法がない動画を掲載しても意味がありません。 それは、世界中の聴衆や顧客ベースを持っているようなものですが、日本語でのみ情報を提供します。

キックのためだけに、スピーチのない技術的なYouTubeビデオを入手して、目を閉じてください。 注-目を閉じると、再び開くことができるため、失明は再現されませんが、楽しい運動です。

クローズドキャプション付きのYouTubeプレーヤー

アクセシビリティリソース

これらのサイトは、サイトをチェックするためのガイドラインとツールを提供します。

  • WebAimアクセシビリティチェッカー
  • オーストラリア政府のWebコンテンツアクセシビリティガイドライン
  • W3Cバリデーター。 W3Cバリデーターは多くの不要なエラーを返すことに注意してください。 それぞれのエラーが問題に値するかどうかを判断する必要があります。

これらのサイトは、デスクトップサイトをテストするために使用できるスクリーンリーダーを提供します。

  • スピーチによるジョブアクセス(JAWS)
  • Aisquaredは無料試用版を提供しています
  • ウィンドウアイズ-スクリーンリーダー
  • NV Accessは、完全に無料のNon Visual Desktop Aid(NVDA)スクリーンリーダーを提供します

注:Sitecuesはお勧めしません。インストールが簡単で、印刷障害のある人に効果的とは言えません。

結論

何でもそうですが、機能とルールの厳格な順守の間にはバランスがあります。 私のクライアントサイトはどれも100%アクセス可能/ W3C準拠ではありません。 それらはアクセス可能であり、検索エンジンに優しいです。 それらは論理的でよく対照的ですが、インパクトのあるスタイルと機能も備えています。

世界で何百万人もの人々が印刷障害を持っていますか? 潜在的なクライアントはいくつですか?

Joomla、Drupal、WordPress、純粋なHTML、またはその他のプラットフォームでサイトを構築するかどうかにかかわらず、この問題を確信し、ビジネスと顧客にとって真剣に取り組む価値があることを願っています。