6

Hanselminutesの最近のエピソードで、Scott Hanselman が Web アプリケーションのアクセシビリティについて話しているのを聞いていて、自分のアプリケーションのアクセシビリティについて考えさせられました。

アクセシビリティに関連する Web アプリケーションでのセマンティック マークアップの重要性は誰もが理解していますが、障害のあるユーザーのユーザー エクスペリエンスを向上させるために行うことができるその他の簡単な機能強化についてはどうでしょうか?

劇中では何度も額を叩いて「もちろん！なんでやらなかったの？」って言ってました。特に、Scott は、「メイン コンテンツにスキップする」という Web ページの上部に非表示のリンクを配置した Web サイトについて話しました。リンクは、スクリーン リーダーを使用しているユーザーにのみ表示され、スクリーン リーダーがメニューやその他の二次コンテンツを飛び越えることができます。それは明らかな改善ですが、それを考えないのは簡単です。

アクセシビリティと全体的なユーザー エクスペリエンスには、有効な XHTML を作成して 1 日で完了するだけではありません。

視覚障害者のユーザー エクスペリエンスを向上させるための簡単な秘訣は何ですか?

4

7 に答える 7

4

アクセシブルなページを作成することは、これまでに行ったことがない場合は考えにくいことです。ただし、基本的な概念を習得すると、95％のケースで非常に簡単に実行できます。私は主に他の人が言ったことを繰り返しますが：

  1. 表形式のデータにはテーブルのみを使用してください
  2. HTML経由で利用できるセマンティックツールを使用していることを確認してください。これは、スコープ属性でTHを使用することを意味します。<i>の代わりに<em>を使用し、<b>の代わりに<strong>を使用します。頭字語と略語のタグを使用します。定義リストを使用します。誰かが望むなら、私はこれらのことを拡張することができます。

  3. 最も重要なことの1つは、入力フィールドでラベルタグを使用することです。すべての入力フィールド、ラジオボタン、チェックボックス、およびテキスト入力に対して、次のものが必要です。

    <labelfor = "username">ユーザー名：</ label> <input name = "username" />

  4. テキストの大きなチャンクがどこにあるかに応じて、「ナビゲーションをスキップ」または「ナビゲーションにスキップ」を追加します。政府のサイトで作業している場合、これは、作成するすべてのもので繰り返しの情報をスキップできるという第二の性質である必要があります。

  5. 強調のために色を使用しないでください。

  6. すべてのテキストのサイズが変更可能であることを確認してください。これは、cssで「px」を使用しないことを意味します。

  7. これを再度強調します：セマンティックページを作成します。タイトルにはHタグを使用してください。ナビゲーションにはul / liを使用します。

  8. すべての画像でalt属性を使用します。スペーサーgifをお持ちの場合...まあ..しないでください。それ以外の場合は、画像の内容と、関連するコンテンツに対するその重要性を説明してください。altタグとして「チャート」を使用しないでください。「年初来の財務チャート：$ 5,000 Q1、$ 4,000 Q2、$8,000Q3」などを使用します。

  9. すべてのオーディオおよびビデオコンポーネントにクローズドキャプションまたはトランスクリプトを提供する

ここで重要なのは、視覚、聴覚、運動障害のある人に、標準的な身体能力のある人と同じ体験を提供することです。フィールドにタブで移動できない場合、スクリーンリーダーもタブで移動できません。チェックボックスの横にあるテキストをクリックして選択できない場合、スクリーンリーダーはテキストがチェックボックスに関連していることを認識しません。

ページが意味をなすかどうかを確認するために、スタイルシート（FirefoxとWeb開発者ツールバーがある場合はctrl-shift-s）なしでサイトを頻繁に表示する必要があります。目の見える人として意味がない場合は、スクリーンリーダーを使用している人には意味がありません。

于 2008-09-17T14:14:45.560 に答える
4

ファンズをチェック

Fangsは、Web ページにアクセスしたときにスクリーン リーダーが「見る」ものをエミュレートする、Firefox 用のブラウザー内ツールです。その機能は単純で、Web ページにアクセスしたときにスクリーン リーダーがユーザーに読み上げる内容のトランスクリプトを出力することです。JAWS や Windows Eyes などのスクリーン リーダー アプリケーションの使用方法を学習 (および購入) する必要がなく、目の不自由な人が理解して使用できるようにコンテンツが効果的に構成されているかどうかをすばやく分析するのに役立つツールです。

于 2008-11-19T03:27:36.157 に答える
3

セクション 508 を遵守しなければならない仕事に就いてからしばらく経ちましたが、他の投稿者が触れていないことを覚えています...

  1. データにはテーブルのみを使用してください。避けられる場合は、テーブルをレイアウトに使用しないでください。
  2. データにテーブルを使用する場合、列ヘッダーは TH タグでネストする必要があり、title および scope 属性を使用する必要があります。テーブル タグでは、summary 属性を使用する必要があります。
  3. すべての画像には、画像で何が起こっているかを説明する alt 属性の値が必要です。画像が目的を果たさない場合 (shim 画像または類似のもの)、alt 属性を空の文字列に設定する必要があります。
  4. テキスト読み上げリーダーを使用するか、キーボードのみを使用してナビゲートするか、スタイルシートをオフにしてみてください。JAWS を購入する必要があると思いますが、無料のスクリーン リーダーがあることは確かです。スクリーン リーダーが解釈する手がかりがなければ、ほとんどの Web ページをナビゲートするのがいかに難しいかを真に理解するには、スクリーン リーダーを使用してサイトを体験する必要があります。
于 2008-09-16T19:31:30.063 に答える
2

「視覚障害」には、色盲も含まれます。私は、赤と緑をあまりよく区別できない人と一緒に仕事をしていたので、信号機スタイルのインターフェースを使用するアプリケーションは、彼にとって非常に使いづらかったです。私たちが働いていた業界では、行のアラートは色分けされていたので、アラートの種類 (「緊急」、「警告」など) のテキストを含む行の追加の列など、別の表示形式が彼にとって役に立ちました。 ）。

于 2008-09-14T15:56:01.130 に答える
1

通常、スクリーン リーダーの最大の問題は、ページに配置するテーブルです。スクリーンリーダーは実際にはそれらを処理できません。html の div に要素を配置し、適切な順序で配置します。次に、css を使用してページに div を配置します。表にあるはずのコンテンツを表示するには、表を使用します。

于 2008-09-14T15:23:41.097 に答える
1

多くの Web ページのコードは次のように構成されています。

  1. ヘッダ
  2. トップナビゲーション
  3. 左のナビゲーション
  4. コンテンツ
  5. フッター

このように構成すると、「メイン コンテンツにスキップ」の隠しリンクが役立ちます。ただし、CSS レイアウトを使用すると、次のように並べ替えることができる場合があります。

  1. コンテンツ
  2. ヘッダ
  3. トップナビゲーション
  4. 左のナビゲーション
  5. フッター

次に、CSS ポジショニングとフロートを使用して、これらのさまざまな要素を画面上で移動し、ページを希望どおりに表示します。

この方法で Web ページを構造化する主な利点は、ブラウザーが CSS をサポートしていない場合、コンテンツがページの最初に表示されることです。スクリーン リーダーに加えて、これはモバイル デバイスや検索エンジンのスパイダーにも役立ちます。

于 2008-09-14T15:57:26.740 に答える
1

部分弱視の場合、テキストが小さすぎず、背景色とのコントラストが十分にあることを確認する必要があります。また、 pxのような絶対的な単位ではなく、emのような相対的なサイズ変更単位を使用して、テキストのサイズを変更できるようにする必要があります(ただし、ブラウザーがテキストのサイズ変更よりもズームをますます好むようになっているため、これは問題ではなくなりつつあります)。 .

スクリーン リーダーのユーザーにとっては、スクリーン リーダーが実際にどのように使用されているかを把握しておくと役に立ちます。次の記事では、スクリーン リーダーを使用して Web を閲覧している視覚障害者の観察に基づいたガイドラインを示します。今では少し古くなっていますが、スクリーン リーダーのユーザーにとって何が役に立ち、何が役に立たないかについての良い感触を与えてくれます。

http://redish.net/content/papers/interactions.html

さらに、American Foundation for the Blind のウェブサイトには、視覚障害のあるユーザーへの対応方法に関するウェブ開発者へのアドバイス専用のセクションがあります。

視覚障害者だけでなく、マウスが使えない障害者や神経障害者も考慮する必要があります。これらの個人に対応する方法についてアドバイスを提供するリソースを誰かが提供できる場合、それは素晴らしいことです.

于 2008-09-14T16:22:11.423 に答える