ホームページ > ウェブフロントエンド > jsチュートリアル > アクセシビリティ (a) ルール - 5

アクセシビリティ (a) ルール - 5

Patricia Arquette
リリース: 2024-12-14 10:22:12
オリジナル
801 人が閲覧しました

Accessibility (a) Rules - 5

ビデオとオーディオ

  • 代替メディア タイプの主な 4 つのタイプ (キャプション、トランスクリプト、音声説明、手話通訳) を音声ファイルとメディア ファイルに含める必要があります。これらの代替案は以下に基づく必要があります:

    • サポートするメディアの種類 - オーディオのみ、ビデオのみ、またはオーディオ付きビデオ (マルチメディア) 形式
    • メディアがライブか事前録画か
    • WCAG コンプライアンス ターゲティングのバージョンとレベル
    • ユーザーが必要とする追加のメディア関連

フォーム

フィールド

  • ARIA でカスタム コンポーネントを作成するのではなく、可能な限り標準の HTML 要素とパターンを使用します。

非推奨 — ARIA を使用したカスタム HTML

<div role="form">



<h4>
  
  
  推奨 - 標準 HTML
</h4>



<pre class="brush:php;toolbar:false">



ログイン後にコピー
  • フィールドに HTML オートコンプリート属性を追加する必要があります。

  • フォームフィールドは、コンポーネントを使用する前に動作についてユーザーに警告されていない限り、フォーカスまたはユーザー入力を受け取ったときにコンテキストの変更を生成すべきではありません (例: フィールドがフォーカスを受け取ったとき、または一度フォームが自動的に送信されるべきではありません)ユーザーがフィールドにコンテンツを追加します。)

ラベル

  • すべてのフォームフィールドに、明確で正確な、プログラム的に関連付けられたラベルがあることを確認します。

説明

  • ラベルまたはフォームの指示が十分に説明的であれば、アクセシビリティのためにフィールドの説明は必要ありません。

  • ユーザーエラーを防ぐためにさらに情報が必要な場合は、フィールドの説明を追加します。たとえば、パスワードの長さや特定の日付形式 (MM-DD-YYYY など) などの入力要件を含めます。

  • フィールドの説明をフォーム要素にリンクするには、aria-descriptionby 属性を使用します。これにより、スクリーン リーダーがラベルと説明の両方を確実に読み取れるようになり、ユーザーのわかりやすさが向上します。

エラー

  • フォームエラーが発生した場合は、直ちにエラーを知らせてください。エラーが発生したフィールドを明確に特定し、ユーザーにエラーを説明する簡潔な説明テキストを提供します。

  • エラー メッセージを表示するには、次のようなさまざまな方法があります。

    • エラーが発生した場所の近くにあるインラインのモーダル
    • ページの上部にある 1 つの大きなメッセージにグループ化されたエラーのコレクション
  • エラーをアナウンスするときは、キーボード フォーカスと ARIA ライブ リージョン オプションに必ず注意してください。

  • 可能な限り、エラーを修正する方法についての詳細な提案をユーザーに提供します。ユーザーにエラーを通知するために使用できる属性が 2 つあります。

    • HTML の required 属性を使用できます。ブラウザは、フィールドに入力された検証パラメータに基づいて一般的なエラー メッセージを提供します。
    • または、aria-required 属性を使用して、カスタマイズされたエラー メッセージを AT に共有することもできます。すべてのユーザーにメッセージが表示されるようにコードを追加しない限り、AT のみがメッセージを受信します。

追加の成功基準

ターゲット サイズ (最小)

一貫したヘルプ

アクセス可能な認証

冗長エントリ

以上がアクセシビリティ (a) ルール - 5の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート