如何为Rails f.select的空白选项添加label以符合VPAT合规要求

问题原因 #

你遇到的W3C检测错误提示“Element option without attribute label must not be empty”，是因为默认include_blank: true生成的<option value=""></option>既没有文本内容，也没有label属性，违反了无障碍合规要求。

解决方案 #

方案1：给空白选项添加显示文本（推荐）

直接将include_blank的值从true改为提示文本，生成的<option>会包含文本内容，无需额外label属性即可通过检测，同时对屏幕阅读器用户更友好：

<%= f.select :info, grouped_options_info(@info), include_blank: "请选择信息类型" %>

生成的HTML示例：

<option value="">请选择信息类型</option>

方案2：保留空白显示并添加label属性

如果需要选项视觉上为空，但要满足检测要求，可以通过手动添加带label属性的空白选项实现：

<%= f.select :info, grouped_options_info(@info).prepend(['', '', { label: '请选择' }]), include_blank: false %>

生成的HTML示例：

<option value="" label="请选择"></option>

说明 #

方案1更符合Web无障碍设计标准，既解决了合规问题，也提升了普通用户和辅助技术用户的体验，优先推荐使用。

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