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中文网其他相关文章！