ASP.NET Core 未關聯輸入修復

介紹

在開發網頁來多次收集使用者資訊時，團隊領導或開發人員都沒有考慮到網站的視力受損訪客，如下所示。

請注意，這不僅適用於街道輔助輸入，也適用於可能需要附加資訊的其他類型的輸入。

為什麼這很重要？因為當訪客、新的潛在客戶嘗試輸入沒有標籤的資訊時，他們不知道輸入的目的。他們可能會感到沮喪並在沒有填寫表格的情況下離開。

創建任何網頁時的一個可靠建議是不斷使用輔助工具來查看頁面是否符合 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

概括

在不將輸入與標籤關聯的情況下提供有關輸入用途的信息的提示可能看起來微不足道和/或不便，但對於視力受損的訪問者來說根本不是微不足道的，並且可能會導致訪問者或收入的損失.

在從一開始開發頁面時就考慮可訪問性，比必須返回並添加可訪問性代碼的成本要低。

？如果網路應用程式面向州或政府實體，則它們必須在 2026 年 4 月之前獲得 WCAG AA 認證。

以上是ASP.NET Core 未關聯輸入修復的詳細內容。更多資訊請關注PHP中文網其他相關文章！