:required伪类可精准选中带required属性的原生表单元素，但必须配合aria-required="true"或文字说明才能被屏幕阅读器识别，仅视觉样式无效。
用 [required] 区分必填项，但别只靠视觉提示
仅给必填字段加红色边框或星号，对屏幕阅读器用户无效。:required 伪类能精准匹配带 required 属性的元素，但它本身不传递语义——必须配合 aria-required="true" 或显式文字说明（如“（必填）”）才能被读屏软件识别。常见错误是写了 input:required { border-left: 3px solid #e74c3c; } 却漏掉 aria-required，导致视障用户无法感知该字段强制性。
[type="checkbox"] 和 [type="radio"] 的隐藏与重构需保留可访问性链路
直接 display: none 或 visibility: hidden 会切断屏幕阅读器对复选框/单选按钮的读取。正确做法是用 position: absolute; clip: rect(0 0 0 0); 将原生控件移出可视区域，再用 ::before 或 ::after 伪元素绘制自定义外观。关键点在于：原生 <input> 必须保留在 DOM 中、保持 tabindex 可聚焦、且其 id 仍被 <label for="xxx"></label> 正确关联。否则键盘用户无法操作，读屏软件也无法同步状态。
[disabled] 和 :disabled 的样式差异影响键盘导航体验
input[disabled] 选择器匹配有 disabled 属性的元素，而 input:disabled 还包括被父级 fieldset[disabled] 禁用的子元素。两者渲染结果一致，但后者更全面。容易忽略的是：禁用态必须降低对比度（如文本色设为 #999），且不能移除 tabindex="-1"——否则键盘用户仍会聚焦到它，却无法操作，造成困惑。建议统一用 :disabled 并配 cursor: not-allowed 和适当透明度。
[aria-invalid="true"] 比 :invalid 更可控
:invalid 依赖浏览器原生验证逻辑（如邮箱格式、必填未填），触发时机不可控，且部分旧浏览器不支持。而 [aria-invalid="true"] 是开发者主动控制的语义标记，可在 JS 验证失败后手动添加，配合 aria-describedby 指向错误提示文案，确保读屏软件准确播报。示例：input[data-validate="email"][aria-invalid="true"] { border-color: #d32f2f; } —— 这里 data-validate 用于 JS 分类，aria-invalid 才是可访问性核心。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对选择器，而是让每个属性变更都同步更新 ARIA 状态、焦点管理、和视觉反馈三者的一致性。漏掉任意一环，可访问性就断了。
