wulin.comの記事紹介(www.vevb.com):誰もが使用できるWebサイトの10の使いやすさ。
1.ロゴに代替テキストを追加します
これには2つの利点があります。スクリーンリーダーは、ロゴ画像の意味を認識できます。画像がロードされていない場合、ロゴがどこにあるかは視聴者ではないユーザーに伝えることもできます。
いくつかの方法:
<img src = logo.png alt = webティーチングWebサイト>
または、背景画像を使用してロゴを実装する場合は、タイトル属性を追加して実装することもできます。
<SPANタイトル= WebページティーチングWebサイト> </span>
もちろん、リンク +背景画像は最良の方法ですが、タイトル属性も追加するのが最善です。
<a title = web教育ネットワーク> web教育ネットワーク</a>
2.基本的なランドマークを追加します
ARIAランドマークは、W3Cによって定義されたWebサイトユーザビリティルールのセットです。 Webサイトのさまざまなモジュールに説明的なランドマークを追加するか、または直接呼ばれるロールと呼ばれることは、視覚障害のあるユーザーがウェブサイトをよりよく使用できるように、Webページをよりよく理解するためのスクリーンリーディングソフトウェアを助長します。
<NAVロール=ナビゲーション>
<div id = maincontent role = main>
<form action = search.php role = search>
3.フォーカス定義を強化します
実際、多くのWebサイトは、特にIEブラウザ向けに、ブラウザのフォーカススタイルを削除するためにあらゆる手段を試します。実際、デフォルトのフォーカスを備えたブラウザを持つことは理にかなっています。ユーザーの現在のマウスフォーカスがどこにあるかを示すことができます。これは、キーボードストリーミングにとって特に重要です。
フォーカススタイルを削除しないでください。デフォルトのスタイルが見栄えが良くない、または不安定ではないと思われたとしても(つまり、WebKitは強調表示されたソリッドボックス、Safariは青、クロムはオレンジ色です)、ハイライトカラーを自分で定義することもできます。
A:フォーカス{
アウトライン:1pxソリッドレッド。
背景:黄色。
}
プロダクトマネージャーまたはビジュアルデザイナーがフォーカス状態を削除することを主張する場合は、マウスを1日取り外して、タブを使用してリンクを切り替えることができることを伝えてください。 。 。
4.必要なフォーム項目を定義します
ARIAが必要とした属性を使用して、必要なアイテムをフォームで定義します - まあ、それは主に画面読み取りソフトウェアを伝えることです。
<入力型=テキスト名= username aria-required = true>
5.ページにH1を追加します
その理由は、SEOだけでなく、ウェブサイトの全体的な使いやすさと読みやすさのためにもシンプルです。また、コードの強迫観念はありませんか?
6.テーブルヘッダーを定義します
通常、多くの人は、あらゆるフォームにTDタグを使用することに慣れています。実際、テーブルにはHDタグだけでなく、TH、COL、スコープなどもあります。
単純に言うと、ヘッダーをTHタグに変更します。
<th scope = col> date </th>
7.表の説明を定義します
テーブルの前/前にPを追加しないでください。テーブルには、写真のように専用のキャプションタグがあります。
<表>
<キャプション>クラススケジュール</caption>
<tr>
...
8。ここをクリックしないでください
このようなリンクの説明は普通の人にとっては関係ありませんが、画面読み取りソフトウェアにとってはかなり悪いことです。実際、視覚障害のあるユーザーへの干渉です。
したがって、適切な場所でリンクを使用してください。
9。Tabindexを削除します
むかしむかし、多くの人々はTabindexを使用してユーザーエクスペリエンスを強化しましたが、この属性は視覚障害のあるユーザーにとって悲惨なページの通常の読み取り順序を破壊し、普通のユーザーに友好的ではない場合があります。
したがって、Tabindex属性を悪用しないでください。
10。オンラインで確認してください
まあ、これを見たとき、それは実際に広告であることがわかりましたが、ウェブサイトの使いやすさの問題を検出できる場合、それも良いことです。 WebAimによって開発されたWebツールは、URLを入力することにより自動的に検出されます。テストしたのはかなり良かった。