JAWS无法读取ARIA描述——MVC4 Razor日期输入无障碍问题

问题分析 #

你遇到的核心问题有两个：一是aria-describedby指定的日期格式未被JAWS读取，二是出现了未知来源的占位符<strong>/</strong>/____被优先播报。结合代码和生成的HTML来看：

• 生成的HTML中aria-describedby属性已正确渲染，说明Razor代码的属性传递没问题；
• 页面存在hasDatepicker和ui-datepicker-trigger标识，说明使用了jQuery UI Datepicker，该组件或自定义逻辑大概率是占位符的来源；
• input类型为datetime，部分浏览器会对该类型自带默认占位符，可能干扰播报优先级。

解决方案 #

1. 定位并移除干扰占位符

• 检查jQuery UI Datepicker配置：初始化Datepicker时，确认是否有自动生成占位符的逻辑，或直接清除input的placeholder属性：

  $(function() {
    $(".date-dob").datepicker({
      dateFormat: "mm/dd/yyyy"
    }).removeAttr("placeholder"); // 强制移除占位符
  });
  

• 检查Model属性特性：查看BirthDate属性是否带有[Display(Placeholder = "...")]特性，若有则移除或修改该配置。
• 检查自定义扩展方法：LabeledDateTimeFor是项目自定义的HTML扩展方法，需确认其内部是否自动添加了占位符逻辑，如有则调整代码移除该行为。

2. 调整input类型避免浏览器干扰

将input的type从datetime改为text，避免浏览器自带的日期控件和默认占位符干扰：

@Html.LabeledDateTimeFor(model => model.BirthDate, new { @class = "date-dob", aria_describedby = "dob-format", type = "text" })

jQuery UI Datepicker本身更适配text类型输入框，不会影响日历选择功能。

3. 增强无障碍播报的可靠性

如果aria-describedby仍不生效，可直接将格式说明整合到标签内，确保屏幕阅读器优先读取：

@Html.LabelFor(model => model.BirthDate, "Birth Date <span id='dob-format'><strong>Format:</strong> mm/dd/yyyy</span>", new { @class = "control-label" })
@Html.TextBoxFor(model => model.BirthDate, new { @class = "date-dob", aria_required = "true" })

这种方式无需依赖aria-describedby，标签内的所有文本都会被屏幕阅读器连贯读取。

4. 验证JAWS播报

调整后测试聚焦输入框时的播报逻辑：正常应先读取标签文本（如"Birth Date"），再读取格式说明"Format: mm/dd/yyyy"。

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