ご挨拶！ この記事では、スクリーンアクセスプログラムのユーザーのアクセシビリティに関して、ウェブマスターが抱える最も一般的な間違いについて説明します。 私はそのようなユーザーであるため、サイトへのアクセス不能の主な問題とその解決方法を説明しようとします。
この記事は標準を主張せず、行動への直接的なガイドではなく、サイト作成時の最も一般的ではあるがそれほど重要ではないアクセシビリティエラーも含むことをすぐに強調したいと思います。
写真とALT属性
多くのウェブマスターの最も一般的な間違いは、<img />タグでalt = ""属性を使用できないこと、またはその誤った使用です。
少なくとも何らかの方法で検索エンジンの要件に慣れている属性を指定すると、ほとんどの人が正しく示すことができません。 以下は、非文字属性の内容の例です。
- 異なる写真に同じ単語を使用する（alt = "image"）;
- 意味のない文字セットを使用する（alt = "dsf86sdfgbvc94nf56"）;
- ページタイトルの複製。
- 文全体、フレーズの属性での配置。
- 属性内の1文字の表示。これは多くの場合、画像内の被写体の名前の最初の文字でさえありません。
この属性を使用する最も論理的な方法は、例を挙げることです。
各ユーザーのアバターの前に、サイト上のユーザーのリストがあると仮定すると、彼の名前が表示されます。 また、ユーザーリストに「Igor」という名前のユーザーが3人いるとします。 イゴールの普通のユーザーがアバターで適切なユーザーを見つけた場合、画面アクセスプログラムのユーザーは名前ごとに適切なユーザーを決定することはできません。
この場合、最も適切な解決策は、alt = ""属性の各アバターに対して、ユーザーの姓で名前を表示することです。 したがって、グラフィック表示の観点からは、何も変わらず、盲目の訪問者は適切な人を見つけることができます。
見出し
誰もが<h1>から<h6>までのタイトルタグを知っています。 フォントサイズを変更するのではなく、見出しに正確に使用する必要があるのは理にかなっていると思いますが、そのような賢い人もいます。
スクリーンリーダーでは、行の長さを設定できます。通常、デフォルトは100文字です。
ヘッダーに100文字以上ある場合、スクリーンリーダーは残りを新しい行に転送します。
したがって、長すぎるタイトルで下矢印を押すと、プログラムは2行で「レベル1〜6の見出し」を読み取ります。
ツールチップ
一部のドメイン名レジストラを含む多くのサイトでは、ホバーのツールチップでサービス更新の価格を示したいと考えています。 これが悪い戦術であると言っているわけではありませんが、すべてのお客様にこれらのヒントを利用できるかどうかを検討する価値はあります。
解決策は非常に簡単です。リンクにtitle = ""属性を使用するだけで、スクリプトは使用しません。
注：title属性がタブレットでは表明されないという未確認の情報がありますが、この記事では主にWindows用のスクリーンアクセスプログラムであるJawsとNVDAを扱います。
テーブルとテーブルのレイアウト
誰がまだテーブルレイアウトを使用しているのかわかりませんが、視覚障害者のためにリソースを便利にしたい場合は、それを放棄する価値があります。
テーブルを使用する際の主な間違い：
- スクリーンリーダーが各セルの座標を読み取るため、1つまたは複数のテーブルを別のテーブルにネストするとナビゲーションが非常に困難になります。
- 必要のない場所では<th>タグを使用します。 例は、ゲーム「Ogame」、「2moons」、「Supernova」などのスクリプトです。
テーブルのネストを完全に放棄し、美しさのためだけでなく、用語のリストとともに、価格を持つテーブルで<th>属性を使用することをお勧めします。
ロールとラベル
おそらく最も有名なアクセシビリティはロールとラベルです。
通常、role = ""属性は<div>ブロックに登録されますが、HTML5の登場により、ブロックでロールを処方する必要がなくなりました。
この表は、HTML5のロールと置換タグのリストを提供します。
| 役割 | 交換用タグ | スクリーンリーダーによるプレゼンテーション |
|---|
| バナー | <ヘッダー> | バナーのランドマーク |
| ナビゲーション | <nav> | ナビゲーションランドマーク |
| メイン | <メイン> | 主なランドマーク |
| 補完的 | <脇> | 追加のランドマーク |
| contentinfo | <フッター> | ランドマークコンテンツ情報 |
| 検索する | - | ランドマーク検索 |
表からわかるように、HTML5には「検索」ロールの代替タグはありません。または、わかりません。
サイトに複数の異なるメニュー、検索フィールド、すべて同じ役割が含まれていて、全員がプレーンテキストで署名すると、視覚的に生成される情報が多すぎる可能性があります。
この場合、属性area-label = ""が役立ちます。
この属性では、画面アクセスプログラムのユーザーに情報を指定できます。これにより、同種の領域間を移動するのに役立ちます。
重要な追加：ロールとラベルをサイトのすべての領域にすぐに登録しないでください。これはナビゲーションを非常に複雑にします。
たとえば、私について言えば、「バナー」の役割は一般的に邪魔になります。誰もが地下ではなく上部に帽子があることを理解しているからです。
キャプチャ
最後に、キャプチャのトピックに触れたいと思います。
特別なプラグインとアドオンのおかげで、スクリーンリーダーの現代ユーザーは、次の場合にロボットからの保護を渡すことに問題を抱えることはないはずです。
- captchaは、回答を入力するリクエストを含むテキスト算術の例で表されます。
- フォームはGoogle Recaptchaウィジェットを使用します。このウィジェットでは、チェックボックスをオンにするだけです。
- グラフィック画像を使用する場合は、alt属性が必要です。できればalt =“ captcha”またはalt =“ code with code”が必要です。
alt属性のないコードを含む画像がパズルであるか、画像がサイトデザインに縫い付けられ、キャラクターがバックグラウンドで生成される場合、盲目の訪問者は自分でフォームを送信できません。
それだけです
スクリーンアクセスプログラムのユーザーがアクセスできないサイトに起因する主なエラーを説明しようとしました。 この記事が、アクセスしやすいサイトを作成するのに役立つことを願っています。
まだ質問がある場合は、コメントでお答えします。