html 提供语义结构，css 负责视觉呈现，二者协同的关键是保障语义与可访问性：必须正确使用语义化标签（如）、显式绑定表单标签、保留可见焦点样式、为图片提供恰当alt文本，并确保dom结构、css渲染与键盘导航顺序一致。
直接说结论：HTML 提供语义结构，CSS 负责视觉呈现，二者协同的关键不是“怎么让页面好看”，而是“不让 CSS 破坏 HTML 的语义和可访问性路径”。一旦用 CSS 隐藏了关键结构、覆盖了焦点样式、或靠视觉位置代替逻辑顺序，屏幕阅读器和键盘用户就大概率掉坑里。
用 <header></header>、<nav></nav>、<main></main> 替代无意义的 <div>
<p>纯 <code><div> 嵌套对屏幕阅读器等于“一堆没名字的盒子”。辅助技术依赖标签名判断区域功能，不是靠 class 名或 CSS 位置。
<ul>
<li>
<code><header></header> 必须包裹站点标识、主标题等全局头部内容，不是所有顶部样式容器都该用它
<nav></nav> 内必须是导航链接；多个 <nav></nav> 时建议加 aria-label="主导航" 或 aria-label="页脚导航"
<main></main> 页面有且仅有一个，不能嵌套在 <article></article> 或 <aside></aside> 里；键盘用户可用快捷键（如 Ctrl+Alt+O）直跳此处<div> —— IE11 已淘汰，现代辅助技术（NVDA、VoiceOver）完全支持这些标签
<h3>别用 CSS 隐藏 <code><label></label> 或靠 placeholder 代替标签
视觉上把 <label></label> 移出视口，或只留 placeholder，等于砍掉表单的可访问性脊椎。屏幕阅读器不会读 placeholder，聚焦 <input> 时也听不到它是“密码”还是“验证码”。
- 显式绑定最稳：
<label for="email">邮箱</label><input id="email" type="email"> - 隐式绑定更简洁：
<label>邮箱<input type="email"></label>，无需 ID，语义和关联自动成立 - 若真要视觉隐藏标签（如搜索框旁的“搜索”文字），用
class="sr-only"辅助类，而非display: none或visibility: hidden -
placeholder只是提示，不是标签；输入后消失，且很多读屏软件默认不播报
确保键盘焦点可见，别用 outline: none 一删了之
移除 outline 是最常见也最危险的“优化”。键盘用户靠焦点环定位当前操作元素，删掉它等于让他们在页面里盲摸。
- 真正该做的是定制焦点样式，比如：
button:focus { outline: 2px solid #0066cc; outline-offset: 2px; } - 别只写
a:focus，还要覆盖button:focus、input:focus、select:focus、textarea:focus - 避免用
outline: 0或outline: none—— 这会彻底禁用原生焦点指示，且无法被用户系统设置覆盖 - 深色模式下注意对比度：焦点色与背景色的亮度对比至少达 3:1，否则看不见
图片 alt 属性不是“可选补充”，而是强制识别路径
缺失 alt 的 <img> 对屏幕阅读器来说，要么读文件名（icon_menu.png），要么直接跳过——用户根本不知道那里有图、是什么图、是否重要。
-
alt=""（空字符串）明确表示“此图无额外信息，可忽略”，适用于装饰性图标、分隔线等 - 信息性图片需描述内容本身，不是“一张图”：商品图用
alt="黑色圆领针织衫，袖口有白色条纹"，而非alt="商品图片" - 图文混合按钮（如带放大镜图标的“搜索”按钮），图标用
alt=""，文字本身已承载含义 - CSS 背景图（
background-image）无法加alt，若含关键信息，必须改用<img>标签实现
最容易被忽略的一点：可访问性不是加几个属性就完事，而是整个 DOM 结构、CSS 渲染顺序、JavaScript 焦点管理三者必须对齐。比如用 CSS 的 order 打乱 Flex 容器内元素视觉顺序，但源码顺序没变——键盘 Tab 仍按源码走，用户就会在“看不见的地方”突然获得焦点。
