outline 属性不直接提升无障碍性，但为键盘聚焦提供必要视觉反馈；应禁用默认 outline 后用 focus-visible 和 box-shadow 等可访问方式重定义，确保对比度≥3:1、宽度≥2px，并兼容高对比度模式与自定义控件。
outline 属性本身不直接提升无障碍性，但它在键盘导航时为聚焦元素提供视觉反馈，这对屏幕阅读器用户和键盘操作者至关重要。关键不是“禁用 outline”，而是“用可访问的方式重定义它”。
聚焦轮廓必须可见且符合 WCAG 标准
默认 outline（如蓝色虚线）虽丑但功能完整。随意 outline: none 会切断键盘用户的焦点路径，违反 WCAG 2.4.7（焦点可见性）。真正可访问的做法是：保留 outline 或用 box-shadow + focus-visible 精准替换。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 确保轮廓宽度 ≥ 2px、对比度 ≥ 3:1（相对于背景）
- 避免仅靠颜色区分（例如纯红色轮廓），需配合形状或亮度变化
- 不要依赖 :focus 无条件覆盖 outline —— 这会影响所有聚焦方式（包括鼠标点击后 Tab 继续导航）
推荐写法：用 :focus-visible 实现智能轮廓
:focus-visible 是现代浏览器支持的伪类，只在真正由键盘触发聚焦时生效，兼顾鼠标用户视觉简洁与键盘用户可访问性。
button {
outline: none; /* 先清除默认 */
}
<p>button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}</p>
- Chrome、Firefox、Safari（v15.4+）均支持，旧版 Safari 可加
@supports selector(:focus-visible)降级处理 - 搭配
outline-offset避免遮挡边框或圆角，提升视觉清晰度 - 不建议用
box-shadow替代 outline —— 它不被所有辅助技术识别为“焦点指示器”，且无法通过系统高对比度模式自动适配
高对比度模式下必须保持轮廓可用
Windows 和 macOS 的高对比度设置会强制重绘 focus outline。若用 outline: none 且未提供替代方案，轮廓将彻底消失。
- 使用
forced-colors: active媒体查询做兜底：
@media (forced-colors: active) {
button:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}
- Highlight 是系统高对比主题下的标准强调色，能自动适配深色/浅色/自定义主题
- 避免在 forced-colors 模式下设死颜色值（如 #000），否则可能与系统冲突或不可见
自定义组件中务必手动添加 focus-visible 支持
按钮、卡片、自定义 <div role="button"> 等非原生控件，默认不触发 <code>:focus-visible，需显式添加 tabindex="0" 并确保语义正确。
- 示例：
<div role="button" tabindex="0" class="card">查看详情</div>
<p>.card:focus-visible {
outline: 2px solid #2e74b5;
outline-offset: 3px;
}</p>
- 同时检查是否已设置
role和 ARIA 属性（如aria-label），否则即使有轮廓，屏幕阅读器也无法正确播报 - 移动端 Safari 对
tabindex和:focus-visible支持有限，必要时回退到:focus+ 清晰视觉样式
