web-dev-qa-db-ja.com

Webサイトにアクセスできるようにするために最低限必要な手順は何ですか?

私は最近まで無視してきたことを認めなければならない非常に重要な基準に従うことを試みています。障害を持つ人々の大部分が自分のページにアクセスできるようにします。主にテキストと画像を集中的に使用するチュートリアルに焦点を当てていますが、ビデオ/フラッシュやアニメーションは一切使用していません。

多くの障害のある人が私のウェブサイトを使用するときに良い経験をすることができるようにするために私が従うことができるチェックリストとは何ですか、そしてどの障害を最も意識すべきですか?

みんなを喜ばせることができないことは知っています。 W3Cガイドライン を経験しましたが、どの基準が私に適用されるのか完全にはわかりません。私はWebアプリケーションを構築しているのではなく、情報交換、ブログ、時折のフォーラムのようなWikiを主に構築しています。

35
Tim Post
  • すべての画像に代替テキストがあることを確認してください。
  • あなたの配色が色覚異常のある人に適していることを確認してください。
  • 視覚障害者のために、高コントラストレイアウトまたは大きなテキストレイアウトを提供します。
  • コンテキストから読み取ったときにリンクが意味をなすようにしてください(つまり、「ここをクリック」とだけ書かないでください)。
  • ユーザーがJavaScriptをサポートしていない場合は、サイトが完全な基本機能を提供していることを確認してください。

W3は、アクセシビリティに関するいくつかの基本的なヒントを提供します Webサイト経由 。ジョー・クラークには、彼の "Building Accessible Websites" のオンライン版があり、無料で見ることができ、多くの有用な情報が含まれています。

18
Wolfwyrd

マークアップセマンティックを作成することは、アクセシビリティに向けた大きな一歩です。CSSを適用せずにサイトをナビゲートでき、コンテンツが理にかなっている場合、他のすべては視覚的なグレービーです!

8
Toby

まず、「障害者」は何も意味しません!

自分のウェブサイトであるかどうかを確認する必要がある人々のグループを見てみましょう。

小さな画面のノートブックしか持っていない貧しい人

ブラウザのウィンドウが小さくても痛みが和らぐことなく使用できるかどうかを確認する必要があります。

色覚異常者

誰かがあなたがB&Wモニターでアクセスしていることをイメージしたアイコンの色などを見ずにあなたのウェブサイトを使用できますか?.

サイトの質が悪い人。

ブラウザで文字サイズを変更すると、サイト内のすべてのテキストが大きくなり、レイアウトは正常のままです。また、このサイトはまだ小さなモニターで使用できますか?

サイトでハイコントラストレイアウトを使用していますか?そうでない場合、ユーザーはハイコントラストレイアウトに簡単に切り替えることができますか?

マウスを使用できない人

以前にあなたのウェブサイトを使用したことがない人が、キーボードを使用してすべての機能/情報にアクセスできますか? (タブキーは便利な方法で機能しますか?)

読解力の低い人

できるだけシンプルな英語を使用していますか?

新しいことを学ぶのが苦手な人。

サイトのデザインは、ユーザーが既に使用方法を知っている他のサイトに基づいていますか?

盲人。

これは難しいものであり、あなたが読んだもののほとんどは一致するものではありません!!
視力の悪い人やマウスを使用できない人は拘束されている人よりも多いため、他のすべてのアクセス問題を先に解決します。

次に目的を理解する、たとえば、サイトがホテル予約サイトである場合、予約の際に有料の電話番号を提供してから、ホテル情報にアクセスできるようにする方がよい場合があります。

ほとんどの視覚障害者は、これまでに使用したことのないインタラクティブなWebサイトを使用するのは非常に難しいと感じていますが、Webサイトは適切に設計されています。

それでは、Webなしのオプションを提供する必要がありますか? (電話?フォームへの入力を支援するために訪問する人など?)

まず、画像なしでサイトを使用できますか? (代替テキストはこれを行う1つの方法です)

音声ソフトウェアがサイトを上から下に読むことを考えると、あなたのサイトはそのように理解できますか?

複雑なナビゲーションを備えたサイトをバインド人が簡単に使用できるようにすることは非常に困難です。また、バインド人は、ページの一部がJavaScriptによって更新されており、再度読み取る必要があることを知る方法がありません。

状態の変化に合わせてアイテムの色を変更することも良い選択肢ではありません。

Webサイトをバインドユーザーに対して適切に機能させる方法を学ぶ唯一の方法は、一部のWebサイトでバインドユーザーがスクリーンリーダーを使用する方法を確認することです。標準はどれも十分ではなく、あなたがすべきでないことを伝えるだけですが、それらを維持するだけでは十分ではありません(新聞サイトのような静的テキストが提供されている場合を除く)。

7
Ian Ringrose

このサイトを使用して、コンプライアンスの概要を簡単に確認できます。 http://wave.webaim.org/

数年前にシャットダウンした古い「Bobby」システムと同様の仕事をします。

4
Mark Hatton

オランダ政府はこのサイトを使用して、アクセシビリティに関するサイトをテストしています。ご覧ください...サイトにアクセスして、アクセシビリティに関する現在のステータスをテストすることもできます...

http://www.webrichtlijnen.nl/english/

3
Rickjaah

Mark Pilgrimの無料でダウンロード可能な本 Dive into Accesibility がこのテーマの有用な参照ポイントであることがわかりました。 2002年からですが、まだ非常に適切です。 「グレースフルデグラデーションを使用する」などのアドバイスは古くなりません。

2
Ian Mackinnon

WAI-ARIAは、アクセシビリティの武器に追加できるようになりました。

WAI-ARIAに関するいくつかの情報- http://www.alistapart.com/articles/waiaria

2
DBUK

#1の答えは簡単です:有効で意味的に正しいHTML/CSSを記述してください!!!上記の提案はすべて良いです。ここに、私が数年前に書いたチェックリストがあります。これは、すべてのサイトでチェックすべきいくつかのことを示しています。 https://forge.iowa.gov/wiki/index.php/Web_Checklist 。 FFにWeb Developerツールバーがあることを前提としていますが、無料で簡単に入手できます。

私が感じるいくつかの簡単なことは、本当に違いを生むことができます。

フォームの場合は、LABELタグを必ず使用してください。ラジオボタンなどのクリック可能な領域が大きくなり、スクリーンリーダーの場合も結び付けられます。

私が一般的に誤用されていると感じるもう1つのことは、h1、h2、h3 ...タグです。適切に使用すれば、誰かがページを簡単にナビゲートするのに役立ちます。スタイルを設定して自由に使用すると、スクリーンリーダーやその他のマウスレスI/Oデバイスにとって非常に誤解を招く恐れがあります。

また、美しいCSSや画像を使用せずにページをナビゲートしている人が、コンテンツへの過去の繰り返しコードをスキップできるようにすることも素晴らしいことです。これは通常、CSSに隠されているSKIPリンクを使用して実現されます。たとえば、<a href="#skipnav" class="noshow">Skip past navigation to content.</a>は、長いナビゲーションをスキップしてスキップできるようにします。

トニーが述べたように、最良のテストの1つは、ページのすべての機能を取り除き、それがまだ意味をなすかどうかを確認することです。

1
ph33nyx

このサイト http://www.totalvalidator.com または利用可能なfirefoxプラグインを使用する必要があると思います。いくつかの障害検証があり、欠落しているものはすべてフラグされます。

1
user1270