.NET MVC项目中NVDA/JAWS读自动补全下拉框异常问题求助

1. 移除干扰性的无障碍属性 #

首先删除input标签上的aria-hidden="true"，这个属性会破坏屏幕阅读器对输入框和下拉选项的正常识别逻辑，是导致“首字母+完整值”重复读取的关键原因。修改后的CSHTML代码：

<input id="client" type="text" class="form-control" data-html="true" placeholder="Enter @Model.ClientTitle">

2. 优化Autocomplete配置，修复读取逻辑 #

通过调整jQuery UI Autocomplete的配置和自定义渲染逻辑，消除重复读取和字符拆分问题：

$('#client').autocomplete({
    source: function (request, response) {
        response($.map(clients, function (item, key) {
            return {
                label: `${item.Name} (${item.ClientId})`,
                value: item.Name,
                clientId: item.ClientId
            }
        }));
    },
    select: function (event, ui) {
        event.preventDefault();
        if (!ui.item.value) {
            $('#client').val(null);
            return false;
        }
        $('#client').val(`${ui.item.label}`);
    },
    response: function (event, ui) {
        if (!ui.content.length) {
            ui.content.push({ 
                value: "", 
                label: "未找到匹配结果" 
            });
        }
    },
    minLength: 3,
    delay: 500,
    open: function() {
        // 给下拉列表设置明确的无障碍标签，确保阅读器正确识别
        $(this).autocomplete("widget")
            .attr("aria-label", "客户选项列表")
            .find("li").each(function() {
                // 强制每个选项以完整文本作为读取内容，避免拆分首字母
                $(this).attr("aria-label", $(this).text());
            });
    },
    // 自定义下拉项渲染，绕过默认的字符拆分逻辑
    _renderItem: function(ul, item) {
        return $("<li>")
            .append(`<div>${item.label}</div>`)
            .appendTo(ul);
    }
});

3. 额外优化建议 #

• 给输入框添加明确的无障碍标签，帮助阅读器识别输入用途：

<input id="client" type="text" class="form-control" data-html="true" 
       placeholder="Enter @Model.ClientTitle" 
       aria-label="请输入客户名称或ID">

• 使用最新版本的jQuery UI、NVDA和JAWS，旧版本可能存在无障碍兼容性问题
• 确保页面使用HTML5文档声明（<!DOCTYPE html>），这是无障碍支持的基础

内容的提问来源于stack exchange，提问作者layla