HTML语义化不提升视觉辨识，但决定辅助技术能否准确提取内容；达标需满足结构可识别、焦点可抵达、状态可感知三指标。
HTML语义化本身不直接提升低视力人群的视觉辨识能力，但它决定了屏幕阅读器、放大器、语音导航等辅助技术能否准确提取、组织和播报内容——这是低视力用户获取信息的底层通道。代码质量是否达标，关键看三个硬指标：结构可识别、焦点可抵达、状态可感知。
screen reader 能否正确识别 nav、main、section 等区域角色
低视力用户常依赖屏幕阅读器的“地标导航”（Landmark Navigation）快速跳转，比如按 D 键跳到下一个 nav，按 M 键进入 main。如果用 div class="header" 替代 header，或把整个页面塞进一个 div id="app"，这些快捷键就完全失效。
实操建议：
- 每个页面必须有且仅有一个
main，且不能嵌套在article或section内部 -
nav应带aria-label（如aria-label="主导航"），避免多个nav时无法区分 - 禁用
role="banner"或role="main"等 ARIA 角色去“模拟”语义标签——原生标签自带隐式 ARIA role，覆盖反而破坏兼容性 - 用浏览器开发者工具的“Accessibility”面板检查元素的
Role值，确认不是generic
tabindex 和键盘焦点是否真实可控
很多低视力用户不依赖鼠标，而是靠键盘 Tab 导航+屏幕阅读器同步播报。但若交互元素是 div + onclick，或表单控件没关联 label，焦点就会跳过、卡死，甚至播报为“未命名元素”。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
- 所有可交互元素必须是原生语义标签：
button、a、input、select等；禁用div+role="button"除非万不得已 -
tabindex="0"只能用于确实需要键盘聚焦的非交互语义元素（如details的 summary），tabindex="1"及以上值禁止使用——它会打乱自然顺序，导致跳转混乱 - 确保
:focus-visible样式可见（不要用outline: none全局清除） - 用键盘逐 Tab 测试：能否抵达所有按钮/链接/输入框？焦点顺序是否符合视觉流？是否出现“跳空”或“死区”？
alt、aria-label、标题层级是否提供有效上下文
低视力用户可能同时使用屏幕阅读器+高倍放大，此时冗余、模糊或缺失的文本描述会极大增加认知负担。例如 alt="图片" 或 aria-label="点击" 这类无效值，等于告诉辅助技术“这里有个东西，但我不知道是什么”。
实操建议：
-
img的alt必须描述功能或信息目的，而非外观：“公司Logo”优于“蓝色图标”，“柱状图：2025年Q1销售额增长12%”优于“图表” - 纯装饰性图片写
alt=""，不要留空格或省略属性 - 标题必须严格
h1→h2→h3递进，禁止跳跃或用h2模拟副标题样式 - 避免
aria-label与可见文本重复，优先用visually-hidden类包裹补充说明，而非覆盖原文字
真正难的不是写对几个标签，而是当业务要求“快速上线”、设计师交付“视觉优先”的切图、后端返回“无结构”的富文本时，你能否守住 main 的唯一性、拒绝 div 按钮、坚持给每个 img 写有效 alt。这些选择不会被用户直接看见，但会决定他们能不能在三秒内找到登录入口，而不是在一堆“区块”里反复听“链接、链接、链接……”。
