ASP.NET Core の関連付けられていない入力の修正

導入

ユーザーから情報を収集する Web ページを開発する場合、以下に示すように、チーム リーダーまたは開発者が視覚障害のあるサイト訪問者を考慮していないことが何度もあります。

これは、道路の二次入力だけでなく、追加情報が必要な他のタイプの入力にも当てはまります。

なぜこれが重要なのでしょうか?なぜなら、訪問者が新規の潜在顧客である場合、その入力が何のためのものであるかわからないラベルなしで情報を入力しようとするからです。彼らはイライラしてフォームに記入せずに立ち去る可能性があります。

Web ページを作成する際の確実な推奨事項は、アクセシビリティ ツールを継続的に使用して、ページが WCAG AA に準拠しているかどうかを確認することです。 Chrome、Firefox、Microsoft Edge 用の Wave アクセシビリティ ツールをチェックしてください。

これをスクリーン リーダーのテストと組み合わせます。NVDA は視覚障害のあるユーザー エクスペリエンスを模倣するための無料ツールです。

ヒント

簡単な解決策は、以下に示すように、入力に aria-label と aria-describeby を追加することです。

代替

Bootstrap や Tailwind など、使用されているサードパーティ ライブラリに応じて、別のオプションとして、以下に示すフローティング ラベルが使用されます。

ソースコード

ソースコード

上記のヒントを実証するプロジェクトには、いくつかの追加機能があります。

CSS のデバッグを支援する JavaScript。以下に示すコードは、ページに単純なスタイル シートを追加または削除します。

本番環境の場合は以下に示されていますが、他の環境の場合は true を渡してデバッグを有効にします。

<script src="lib/payne-debugger/debugHelper.js"></script>
<script>
    document.addEventListener('keydown', function (event) {

        if (event.key === '1' && event.altKey && event.ctrlKey) {
            $debugHelper.toggle();
        }

    });
</script>

上記のカスタム H1 スタイルは wwwrootcssheaders.css にあります

フィールドセットと凡例のスタイルは wwwrootcsssite.css にあります

まとめ

入力をラベルに関連付けずに入力の内容に関する情報を提供するためのヒントは、些細なことや不便に思えるかもしれませんが、視覚障害のある訪問者にとってはまったく簡単ではなく、訪問者や収入の損失につながる可能性があります。 .

アクセシビリティを考慮してページを最初から開発する場合、アクセシビリティのためにコードを遡って追加するよりもコストがかかりません。

?また、Web アプリケーションが州または政府機関向けの場合は、2026 年 4 月までに WCAG AA 認定を受ける必要があります。

以上がASP.NET Core の関連付けられていない入力の修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。