真正可用的框架默认支持键盘聚焦与屏幕阅读器：按钮等交互元素启用:focus-visible、有明确tabindex逻辑、HTML自带语义、不依赖JS渲染；Bulma和TurretCSS默认可聚焦，MVP.css依靠原生行为更可靠。
选框架前先看它是否默认支持 keyboard focus 和 screen reader
很多 CSS 框架标榜“无障碍”，但实际只加了几个 aria-label 或改了点颜色对比度，键盘 Tab 无法聚焦、focus-visible 样式被覆盖、role 缺失或错误——这些才是真实阻碍用户操作的关键点。
真正可用的框架会：在按钮、链接、表单控件上默认启用 :focus-visible；所有交互元素都有明确的 tabindex 控制逻辑；组件 HTML 结构自带语义（比如 nav 套 role="navigation"）；不依赖 JS 渲染 DOM（避免屏幕阅读器抓不到内容）。
- Bulma 和 TurretCSS 的
.button、.input类默认可键盘聚焦，且未用!important锁死outline - MVP.css 完全不干预焦点样式，靠浏览器原生行为，反而更可靠
- Blueprint 的
forms.css显式设置了outline: 2px solid #2563eb，但需确认是否被项目其他 CSS 覆盖 - Milligram 的按钮组件没内置焦点样式，必须手动补
:focus-visible规则
别信“开箱即用”，检查 color contrast 和 prefers-* 媒体查询是否真生效
WCAG AA 要求文本与背景对比度 ≥ 4.5:1，但很多框架只保证默认主题达标，深色模式或高对比度模式下就失效。更常见的是：框架声明支持 prefers-reduced-motion，但只在 demo 页里写了媒体查询，没打包进生产 CSS 文件。
实操建议直接查源码或构建产物：
立即学习“前端免费学习笔记（深入）”；
现代商业数字化服务公司网站模板是一款提供数字营销、品牌包装、内容创作和网页设计等数字化商业服务公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
- 打开框架的
screen.css或main.css，搜prefers-reduced-motion—— 如果只在注释里出现，说明没启用 - 用浏览器 DevTools 的 Accessibility 面板，选中文字元素，看 “Contrast ratio” 是否显示 ≥ 4.5（注意：要测实际渲染色值，不是 Sass 变量）
- 在 macOS 系统设置 → 辅助功能 → 显示 → 开启“减少运动”，刷新页面，观察动画是否真的停了（
reduce-motion.css必须在<head>中早于主样式加载） - Milligram 的
$color-primary在深色背景下对比度会跌破 4.5，需额外定义.high-contrast .button覆盖
表单和模态框是 A11y 最容易翻车的两个场景
表单若没正确关联 <label> 和控件，屏幕阅读器根本读不出字段用途；模态框若没限制焦点流、没自动聚焦首元素、没处理 backdrop 点击关闭，键盘用户就卡死了。
Bulma 和 Blueprint 提供了结构化表单类（.field + .label + .control），但必须手动确保：
-
<label for="email">的for值和<input id="email">严格匹配（大小写、空格都不能错） - 错误提示用
aria-live="polite"包裹，且插入 DOM 位置在对应输入之后（不能靠 JS 动态追加到页面底部） - 模态框的
.modal容器要有role="dialog"和aria-modal="true"，关闭按钮带aria-label="close" - 模态框打开时，用
document.querySelector('.modal__body').focus()主动聚焦，而非依赖autofocus（Safari 不支持）
框架只是起点，真正的 A11y 在你写的每一行 HTML 里
再好的框架也救不了 <div onclick="submit()>提交</div> 这种写法——它没有语义、不可键盘聚焦、屏幕阅读器读不出动作。MVP.css 的哲学最接近本质：<button> 就该是按钮，<h2> 就该是二级标题，框架只负责让它们看起来合理，而不是替你造轮子。
最容易被忽略的点是：
- 用
visibility:hidden或display:none隐藏辅助文本？错。该用clip-path: inset(100%)或sr-only类（Bulma 和 Blueprint 都提供） - 图标按钮只放
<i class="icon"></i>？必须加aria-hidden="true"，并用<span class="sr-only">删除</span>补充语义 - 整个页面用
font-size: 62.5%+rem？小心，某些旧版 JAWS 会把缩放计算搞错，优先用em或系统默认字体尺寸
框架能省掉重复劳动，但语义结构、焦点顺序、ARIA 属性归属，永远得你亲手决定。
