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


35

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

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

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


uxexchange.com?
ボビージャック

回答:


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

W3のWebサイトでは、アクセシビリティに関する基本的なヒントを提供しています。ジョー・クラークは、「Building Accessible Websites」ブックのオンライン版を無料で閲覧できます。これには、多くの有用な情報が含まれています。


1
「代替テキスト」ルールにはいくつかの注意事項があります。残念ながら、私はそれを厳格なルールとして扱う人々と仕事をしてきました。つまり、すべての画像にはalt属性が必要です。次に、「私たちの会社のロゴ」のようなものをロゴ画像に追加し、「大きな青い「t」」をtwitterアカウントにリンクされた画像に追加します。
ボビージャック

altタグを使用すると、すべての画像にaltタグが必要だと思います。スクリーンリーダーを使用する場合は、何をすべきかを伝える必要があります。画像が視覚的に魅力的で、他に値がない場合は、alt = ""を使用して、スクリーンリーダーがそれを無視することを認識できるようにします。画像がグラフ、またはヘッダーの場合、スクリーンリーダーや画像を無効にするユーザーが見逃さないように、必ずaltタグに情報を含めてください。
ph33nyx

8

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


1
そして、CSSの裸の日はもっと楽しく:)
ティムポスト

2
ハハ、当然!真剣に、多くの人々はアクセシビリティはすべてデザインに関係していると考えていますが、まったく逆であり、デザインなしで動作するようにコンテンツを作成できれば、マシン(したがって人間)は常にアクセスできますそれ。
トビー

7

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

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

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

ブラウザのウィンドウが小さくても痛みが和らぐときに使用できるかどうかを確認するだけです。

色覚異常者

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

サイトの質が悪い人。

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

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

マウスを使用できない人

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

読解力の低い人

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

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

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

盲目の人。

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

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

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

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

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

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

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

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

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


1
この答えの最初の文が大好きです!(そしてもちろん他の文も)
ティムポスト


3

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

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


2

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



1

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


1

#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つは、ページのすべての機能を取り除き、それがまだ意味をなすかどうかを確認することです。


ALTタグについては...すべての画像にALTタグが必要です。画像がコンテンツである場合、ALTタグに説明的な内容が含まれている必要があります。装飾の場合は、空の引用符alt=""を使用して、JAWSなどのスクリーンリーダーがそれらを通過できることを示します。
ph33nyx
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.