Input元素设置aria-expanded遭axe DevTools报错，求解决方法

问题根源 #

axe DevTools报错的核心原因：type="text"的原生input元素，不在WAI-ARIA规范允许使用aria-expanded属性的角色范围内。这个属性仅支持具备可展开/折叠交互能力的角色（如button、menuitem、treeitem等），普通文本输入框不属于这类角色。

可行解决方法 #

方案1：新增独立触发按钮（推荐）

给输入框搭配一个专门的触发控件（比如下拉箭头按钮），将aria-expanded和aria-controls（替代原aria-owns）移到这个按钮上，这是最符合规范的做法：

<div class="form-row">
    <label for="zip-city">Search for ZIP/City</label>
    <div class="input-wrapper">
        <input aria-autocomplete="list" id="zip-city" type="text" name="zip_city">
        <!-- 新增的触发按钮 -->
        <button type="button" id="city-toggle" aria-expanded="true" aria-controls="select-city-list">
            <span aria-hidden="true">▼</span>
            <span class="sr-only">展开/收起城市列表</span>
        </button>
        <ul id="select-city-list" role="listbox" aria-hidden="false" class="city-selector" style="display: block; opacity: 1;">
            <li role="option" id="zip_112" data-uid="112" tabindex="-1">9999 myCity</li>
        </ul>
    </div>
</div>

• 按钮是aria-expanded的合法载体，语义清晰；
• 用aria-controls关联列表ID比aria-owns更合适：aria-owns多用于动态生成或DOM结构不相邻的元素，这里列表和控件在同一容器，aria-controls更贴合“控件控制目标元素”的场景。

方案2：修改输入框角色（不推荐）

如果不想新增按钮，可以给input添加role="button"，但这会破坏输入框的原生语义，需要额外处理键盘事件（比如回车键、空格键的展开/收起逻辑），同时还要保留输入功能，容易引发可用性问题，不建议采用。

额外注意事项 #

• 保持状态同步：列表展开时，按钮的aria-expanded="true"，同时列表的aria-hidden="false"；收起时两个属性值反转；
• 保留aria-autocomplete="list"：这个属性能正确告诉辅助技术，该输入框带有列表式自动补全功能，无需修改。

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