視覚障害者の Web ユーザー エクスペリエンスの向上
https://stackoverflow.com/questions/61399
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
を聞いていました ヘンゼルミニッツの最近のエピソード そこで Scott Hanselman が Web アプリケーションのアクセシビリティについて議論しており、私はそれをきっかけに自分のアプリケーションのアクセシビリティについて考えるようになりました。
アクセシビリティに関連する Web アプリケーションにおけるセマンティック マークアップの重要性は誰もが理解していますが、障害のあるユーザーのユーザー エクスペリエンスを向上させるために行うことができるその他の簡単な機能強化についてはどうでしょうか?
エピソードの中で、額を叩いて「もちろんです！」と言う場面が何度かありました。なぜそうしなかったのですか?」 特に、スコット氏は、Web ページの上部に「メイン コンテンツにスキップ」という隠しリンクを配置した Web サイトについて話しました。このリンクはスクリーン リーダーを使用しているユーザーにのみ表示され、スクリーン リーダーはメニューやその他の二次コンテンツを飛び越えることができます。これは明らかな改善ですが、考えないのは簡単です。
アクセシビリティと全体的なユーザー エクスペリエンスには、単に有効な XHTML を作成してそれで終わりというだけではありません。
視覚障害者のユーザー エクスペリエンスを向上させるための簡単なコツは何ですか?
他のヒント
アクセシブルなページを作成することは、やったことがない場合は考えるのが難しいことです。ただし、基本的な概念を学べば、95% の場合は非常に簡単に実行できます。私は主に他の人が言ったことを繰り返しますが、次のとおりです。
- 表形式のデータにはテーブルのみを使用してください
- HTML 経由で利用できるセマンティック ツールを必ず使用してください。これは、TH をスコープ属性とともに使用することを意味します。<i> の代わりに <em> を使用し、<b> の代わりに <strong> を使用します。使用 頭字語 そして 略語 タグ。定義リストを使用します。誰かが望むなら、私はこれらのことを拡張することができます。
最も重要なことの 1 つは、 ラベル 入力フィールドのタグ。すべての入力フィールド、ラジオ ボタン、チェックボックス、テキスト入力には、次のものが必要です。
<label for="username">ユーザー名:</label><input name="username" />
大きなテキストの塊がどこにあるかに応じて、「ナビゲーションをスキップ」または「ナビゲーションにスキップ」を追加します。政府のサイトで作業している場合、作成しているすべてのもので繰り返しの情報をスキップできることは自然なことです。
強調するために色を使用しないでください。
すべてのテキストのサイズが変更可能であることを確認してください。これは、CSS で「px」を使用しないことを意味します。
これをもう一度強調します。 セマンティックページを作成します。 使用 H タイトルのタグ。使用 ウル/リー ナビゲーション用。
使用 代替 属性オン 全て 画像。スペーサーGIFがあれば...良い..しないでください。それ以外の場合は、その写真が何であるか、また、その写真が関連付けられているコンテンツにとってどのような重要性があるのかを説明してください。alt タグとして「グラフ」を使用しないでください。「YTD 財務グラフ:」を使用します。第 1 四半期 5,000 ドル、第 2 四半期 4,000 ドル、第 3 四半期 8,000 ドル」など。
すべてのオーディオおよびビデオコンポーネントにクローズドキャプションまたはトランスクリプトを提供します
ここで重要なのは、視覚、聴覚、そして聴覚を提供することです。 モーター 標準的な身体能力を持つ人と同じ経験が損なわれます。Tab キーでフィールドに移動できない場合、スクリーン リーダーも同様にフィールドに移動できません。チェック ボックスの横にあるテキストをクリックして選択できない場合、スクリーン リーダーはテキストがチェック ボックスに関連していることを認識しません。
スタイルシートを使用せずにサイトを頻繁に表示する必要があります (Firefox を使用している場合は Ctrl-Shift-S を押します)。 Web 開発者ツールバー) ページが意味があるかどうかを確認します。晴眼者であるあなたにとってそれが意味をなさないとしても、スクリーン リーダーを使用している人にとってもそれは意味をなさないでしょう。
セクション 508 を遵守しなければならない仕事に就いてからしばらく経ちましたが、他の投稿者が触れていないことを覚えています...
- データにはテーブルのみを使用してください。可能な限りレイアウトにテーブルを使用しないでください。
- データにテーブルを使用する場合は、列ヘッダーを TH タグでネストし、タイトル属性とスコープ属性を使用する必要があります。テーブルタグでは summary 属性を使用する必要があります。
- すべての画像には、画像内で何が起こっているかを説明する alt 属性の値が必要です。画像が何の目的も持たない場合 (シム画像など)、alt 属性は空の文字列に設定される必要があります。
- テキスト読み上げリーダーを使用するか、キーボードのみで操作するか、スタイルシートをオフにしてみてください。JAWS を購入する必要があると思いますが、無料のスクリーン リーダーがあると思います。スクリーン リーダーが解釈する手がかりなしにほとんどの Web ページを移動することがいかに難しいかを真に理解するには、スクリーン リーダーを通じてサイトを体験する必要があります。
「視覚障害」には色覚異常も含まれます。以前、私が一緒に仕事をしていた人は、赤と緑の区別があまりできなかったので、信号機スタイルのインターフェイスを使用するアプリケーションは彼にとって非常に使いにくかったです。私たちが働いていた業界では、行内のアラートが色分けされていたため、アラートの種類 (「緊急」、「警告」など) のテキストを行に追加する列など、別の形式の表示が彼にとって役に立ちました。 ）。
スクリーン リーダーに関する最大の問題は通常、ページ上に項目を配置するためのテーブルです。スクリーンリーダーはそれらを実際には処理できません。HTML の div に内容を入れて、賢明な順序で配置します。次に、CSS を使用してページ上に div を配置します。表に含める必要があるコンテンツを表示するには、表を使用します。
多くの Web ページのコードは次のように構成されています。
- ヘッダ
- トップナビゲーション
- 左側のナビゲーション
- コンテンツ
- フッター
このように構成されている場合、「メインコンテンツにスキップ」の隠しリンクが役立ちます。ただし、CSS レイアウトを使用すると、次のように順序を変更できる場合があります。
- コンテンツ
- ヘッダ
- トップナビゲーション
- 左側のナビゲーション
- フッター
次に、CSS の位置決めとフロートを使用してこれらのさまざまな要素を画面上で移動し、ページを希望どおりに表示します。
この方法で Web ページを構造化する主な利点は、ブラウザが CSS をサポートしていない場合、コンテンツが最初にページに表示されることです。これは、スクリーン リーダーに加えて、モバイル デバイスや検索エンジン スパイダーにとっても有益です。
部分的に弱視の場合は、テキストが過度に小さくなく、背景色と大幅に対照的であることを確認する必要があります。また、次のような相対的なサイズ単位を使用してテキストのサイズを変更できることも確認する必要があります。 えっとのような絶対単位ではなく、 ピクセル(ただし、私の意見では、ブラウザーがテキストのサイズ変更よりもズームを優先するようになったため、これは問題ではなくなりつつあります)。
スクリーン リーダーのユーザーにとって、スクリーン リーダーが実際にどのように使用されているかをよく理解すると役立ちます。次の記事では、視覚障害者がスクリーン リーダーを使用して Web を閲覧している観察に基づいたガイドラインを示しています。現在では少し古いものですが、スクリーン リーダーのユーザーにとって何が役立つか、何が役に立たないかを理解するのに役立ちます。
http://redish.net/content/papers/interactions.html
さらに、アメリカ視覚障害者財団には、 視覚障害のあるユーザーに対応する方法に関する Web 開発者向けのアドバイスを専門とする Web サイトのセクション.
視覚障害者だけでなく、マウスを使用できない障害者や神経障害のある人たちにも配慮する必要があります。そうした人々にどのように対応するかについてアドバイスを提供するリソースを提供できる人がいれば、それは素晴らしいことです。
