HTML 搜索框可访问性完整指南：从键盘导航到屏幕阅读器的实现要点

将输入类型设为 type="search" 而非纯 text，可以让浏览器在部分设备上提供更友好的默认行为，例如清除按钮和搜索特定的键盘处理。

<form action="/search" method="get" role="search" aria-label="站点内搜索"><label for="site-search">搜索</label><input type="search" id="site-search" name="q" placeholder="输入关键词" autocomplete="on" /><button type="submit">搜索</button>
</form>

1.2 为搜索提供清晰的命名与描述

为输入控件提供明确的可见标签，或通过 aria-labelledby 关联标签名称。 可通过 label 元素实现天然可访问性，也可在需要时使用 aria-label 进行替代命名。

为额外的说明信息使用 aria-describedby，例如说明输入框的行为、支持的快捷键或自动完成的工作方式，并将该描述与输入框关联。

<label id="search-label" for="site-search">站点搜索</label>
<input type="search" id="site-search" name="q" aria-labelledby="search-label" aria-describedby="search-help" />
<div id="search-help">输入关键词后会显示相关建议。按 Esc 关闭，按 Enter 选择。</div>

1.3 提供可访问的错误与帮助信息

在需要时使用 aria-invalid 提示无效输入，并通过 aria-describedby 提供错误文本描述。 这样屏幕阅读器能够以明确的方式向用户报告错误状态与原因。

通过动态更新描述信息，确保变化能够被辅助技术感知，可用 aria-live="polite" 或 aria-live="assertive" 控制提示的紧急程度。

<input type="search" id="site-search" aria-invalid="true" aria-describedby="search-error">
<div id="search-error" role="alert" aria-live="polite">未找到相关结果，请尝试其他关键词。</div>

2. 键盘导航与焦点管理

2.1 实现可访问的自动完成控件

为自动完成候选项提供可聚焦的列表框（listbox）模式，使用合适的 ARIA 角色与属性。 输入框通过 aria-autocomplete、aria-controls 与 aria-expanded 等属性告知辅助技术当前的展开状态及候选项容器。

推荐的组合包括：listbox（候选项容器）、option（每一项）、aria-expanded、aria-selected 等属性。 这样屏幕阅读器能够逐项读出候选项及其当前选中状态。

<label for="site-search">站点搜索</label>
<input id="site-search" type="search" aria-autocomplete="list" aria-controls="search-suggestions" aria-expanded="false" role="textbox" />
<ul id="search-suggestions" role="listbox" aria-label="搜索建议" hidden><li role="option" aria-selected="false">示例结果 1</li><li role="option" aria-selected="false">示例结果 2</li>
</ul>

2.2 键盘交互要点：方向键与回车

通过上下方向键在候选项之间切换焦点，按 Enter 选择当前高亮项，按 Esc 关闭候选项。 这些行为是无障碍搜索体验的核心。

下面给出一个简化的实现要点：当输入框获得焦点并展开候选项时，控制焦点在 listbox 的 options 上循环移动；选中项的文本内容填充到输入框，并保持焦点在输入框。

&// 简化的键盘控制伪代码
function onKeyDown(e) {if (e.key === "ArrowDown") { moveFocus(1); }else if (e.key === "ArrowUp") { moveFocus(-1); }else if (e.key === "Enter") { selectFocusedOption(); }else if (e.key === "Escape") { collapseSuggestions(); }
}

2.3 焦点可见性与聚焦管理

在展开候选项时应保持可见焦点指示，避免用户失去对当前输入状态的感知。 当关闭候选项后，焦点通常应返回到输入框，以便继续键盘输入。

对动态显示/隐藏的区域使用 aria-expanded、aria-hidden 等属性同步状态。这让屏幕阅读器知道哪些元素对当前操作可见。

<input id="site-search" type="search"aria-expanded="true" aria-controls="search-suggestions" />
<ul id="search-suggestions" role="listbox" aria-hidden="false">...</ul>

3. 屏幕阅读器友好实现

3.1 ARIA 属性的正确使用与标签语义

充分利用 aria-label、aria-labelledby、aria-describedby 等属性来明确控件的命名与描述。 避免只使用占位文本作为可访问性名称，因为占位文本不会被屏幕阅读器读取。

避免冗余角色与嵌套冲突。 例如不要把输入框误设为多重角色导致屏幕阅读器混淆。

<input type="search" id="site-search" aria-labelledby="search-label" aria-describedby="search-help" />
<span id="search-label" class="sr-only">站点搜索</span>
<span id="search-help" class="sr-only">在此输入关键词并查看自动完成建议。</span>

3.2 兼容多屏幕阅读器与模式切换

在高对比度模式或大字体模式下保持可读性，确保文本对比度≥4.5:1（文本）以及合适的焦点样式。 使用 CSS 提供对焦点外观的可访问性保障，例如使用明确的轮廓或阴影来凸显焦点。

通过 aria-live 的增量更新把动态内容传达给屏幕阅读器，对于搜索建议的出现、更新或消失，通知用户当前状态。

<div id="search-suggestions" role="listbox" aria-label="搜索建议" aria-live="polite" aria-atomic="true">...</div>

4. 实践与测试要点

4.1 可访问性测试清单

进行键盘导航测试，确保所有可交互控件均可通过 Tab 键访问并可通过 Enter、Space、箭头等键完成操作。 不要仅以鼠标为主进行测试，键盘优先的测试能发现常见的无障碍障碍。

在不同屏幕阅读器环境下测试：如 NVDA、VoiceOver、JAWS 等。 验证搜索框及自动完成是否被正确读出、焦点状态是否清晰呈现。

核对标签与描述的可读性与准确性，确保 aria 属性的名称、描述文本与辅助技术的读出内容一致。

<a href="#main" class="skip-link">跳到内容</a>
<style>.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;} 
.skip-link:focus{position:static;width:auto;height:auto;overflow:visible;background:#fff;border:1px solid #000;padding:4px 8px;}</style>