ASP.NET Core 未关联输入修复-css教程-PHP中文网

ASP.NET Core 未关联输入修复

DDD

发布： 2024-10-07 11:28:01

原创

350 人浏览过

介绍

在开发网页来多次收集用户信息时，团队领导或开发人员都没有考虑到网站的视力受损访问者，如下所示。

ASP.NET Core unassociated input fix

请注意，这不仅适用于街道辅助输入，还适用于可能需要附加信息的其他类型的输入。

为什么这很重要？因为当访客、新的潜在客户尝试输入没有标签的信息时，他们不知道输入的目的。他们可能会感到沮丧并在没有填写表格的情况下离开。

创建任何网页时的一个可靠建议是不断使用辅助工具来查看页面是否符合 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