ASP.NET Core の関連付けられていない入力の修正-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-10-07 11:28:01

オリジナル

350 人が閲覧しました

導入

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

ASP.NET Core unassociated input fix

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

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

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

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

ヒント

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

ASP.NET Core unassociated input fix

代替

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

ASP.NET Core unassociated input fix

ソースコード

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

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>

ログイン後にコピー

ASP.NET Core unassociated input fix