HTMLドキュメントのアクセシビリティ監査

1.セマンティックHTMLタグを使用：

すべてのユーザーがWebページのコンテンツにアクセスできるようにすることは、現代のWeb開発では無視できないものです。 HTMLドキュメントの場合、基本的なアクセシビリティ監査を行うことは、障害を持つ人々がウェブサイトをよりよく使用するのに役立つだけでなく、ユーザーエクスペリエンスとSEOのパフォーマンスを向上させることもできます。この方向に触れ始めたばかりの場合は、次のキーポイントから始めることができます。

セマンティックHTMLタグを使用します

HTML自体は、 <header></header> 、 <nav></nav> 、 <main></main> 、 <article></article> 、 <button></button>などのセマンティックタグシステムを提供します。これらのタグは、ブラウザや支援技術がページ構造を理解するのに役立つだけでなく、スクリーンリーダーユーザーのナビゲーション効率を改善するのにも役立ちます。

• Divとスパンの悪用を避ける： divを使用してボタン機能をシミュレートする代わりに<button></button>を使用して、画面リーダーがクリック可能なボタンであることを正しく認識できるようにします。
• クリア構造：ナビゲーションリンクを<nav></nav>でラップし、 <footer></footer>でフッターエリアを識別して、ユーザーが支援技術を通じて興味のある部品にすばやくジャンプできるようにします。

多くの場合、いくつかのタグを変更するだけで、追加のJavaScriptやARIA属性を必要とせずに、ページのアクセシビリティを大幅に改善できます。

画像とaltテキスト

画像はWebコンテンツの重要な部分ですが、視覚障害のあるユーザーの場合、代替テキストのない画像は空白に等しくなります。

• 各画像にalt属性を追加します。装飾的な画像であっても、 alt=""を使用してスクリーンリーダーにスキップするように指示することをお勧めします。
• 記述テキストは簡潔でなければなりません：たとえば<img src="/static/imghw/default1.png" data-src="dog.jpg" class="lazy" alt="HTMLドキュメントのアクセシビリティ監査"> 「絵1」を書くのではなく。

ALTテキストのページ上の既存のテキストを繰り返さないでも、キーワードを積み上げないでください。目標は、写真を見ることができない人々にそれを理解できるようにすることです。

キーボードナビゲーションとフォーカス管理

すべてのユーザーがマウス操作を使用しているわけではなく、多くのアシストテクノロジーユーザーはナビゲーションのためにキーボードに依存しています。したがって、キーボードを介してWebページに完全にアクセスできるようにすることが重要です。

• リンク、ボタン、フォームコントロールなど、すべてのインタラクティブな要素が焦点を絞っていることを確認してください。タブキーを介してアクセスできるはずです。
• 目に見えるフォーカススタイル：デフォルトのフォーカスボックスは、開発者によってリセットされることもあります。明確なフォーカスインジケーターを維持またはカスタマイズすることをお勧めします。
• 複雑なコンポーネントは、フォーカスを手動で管理する必要があります。たとえば、モーダルポップアップウィンドウが開いている場合、焦点はポップアップウィンドウの内側に制限され、閉じたときにトリガー要素に戻る必要があります。

キーボードを直接使用して、ページ全体の操作性をテストできます。これは、テストする最も直接的で効果的な方法の1つです。

フォームとタグの正しい使用

フォームは、ユーザーがWebサイトと対話するための重要な方法ですが、アクセシビリティデザインに注意を払わないと、ユーザー、特にスクリーンリーダーユーザーが記入することを困難にすることができます。

• <label></label>タグを使用してフォームコントロールをバインドします：ascoption labelとinput for attributeを使用して、ユーザーがタグをクリックするときに入力ボックスに集中できるようにします。
• クリアなエラープロンプトを提供する：ユーザーがエラーを入力すると、エラーメッセージは問題を明確に述べ、 aria-describedbyを介して対応する入力ボックスに関連付ける必要があります。
• プレースホルダーをラベルとしてのみ使用することは避けてください：プレースホルダーが入力したときに消えてしまい、一部のユーザーにとっては十分に友好的ではありません。フローティングラベルスキームを考慮することができます。

フォームの構造と迅速な情報は、特に認知障害のあるユーザーにとって、すべてのユーザーにとって重要です。

基本的にそれだけです。アクセシビリティ監査は複雑ではありませんが、簡単に見落とされます。開発プロセス中に構造、ラベル、および相互作用にもっと注意を払う限り、すべてのユーザーにより良いエクスペリエンスをもたらすことができます。

以上がHTMLドキュメントのアクセシビリティ監査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。