必须全局唯一且只包核心内容，因屏幕阅读器按m键跳转仅识别第一个合法main；多main或main含广告/侧边栏会导致跳过或定位错误，用户需手动听全页才能找正文。
为什么必须全局唯一且只包核心内容
屏幕阅读器按 M 键跳转时，只识别第一个合法的 <main></main>；若页面中存在多个，或它包裹了广告、侧边栏、弹窗等非主内容，读屏工具要么跳过、要么定位错误，用户得手动听完整页才能找到正文。
常见错误包括：Next.js 布局组件里写一个 <main></main>，子页面又渲染一个；<main></main> 里塞了顶部 banner + 左侧菜单 + 内容区。
- 全 DOM 中仅一个
<main></main>，且只包含用户真正要操作/阅读的部分（如商品列表、表单主体、文章正文） - 不能嵌套在
<article></article>或<section></section>内——否则屏幕阅读器会误判内容层级 - 冗余
<main></main>不增加字节大小，但会让辅助技术多做无效 DOM 遍历，拖慢语音导航响应
图片 alt 属性怎么写才真正有效
alt="" 是合法且必要的，但仅限纯装饰图；任何承载信息的图片，alt 必须准确传达其功能或内容，而非描述文件名或绕开问题。
图标按钮（如放大镜搜索）：写 alt="搜索"，不是 alt="search-icon.png"；数据图表：用简明、可读、不含冗余修饰的文本概括关键信息。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 纯装饰图：
alt=""（空字符串），明确告诉辅助技术忽略 - 功能图标：
alt="提交表单"、alt="关闭弹窗"，不写“×图标”或“叉形按钮” - 信息图表：
alt="2025年Q3用户留存率上升12%，达84%"，避免“柱状图显示增长”这类模糊描述 - 复杂图表/流程图：仍需提供有意义的
alt概括结论，并用<figure></figure>+<figcaption></figcaption>补充细节
表单控件没绑定
仅靠 CSS 视觉对齐（文字挨着输入框）对键盘聚焦毫无意义。屏幕阅读器聚焦 <input> 时，若无显式关联，用户完全不知道这是邮箱、密码还是验证码。
错误示例：<div>邮箱<input type="email">
</div> —— 无任何可访问性保障。
- 推荐写法一：
<label for="email">邮箱</label><input id="email" type="email"> - 推荐写法二（模板限制时）：
<label>邮箱<input type="email"></label> - 禁用
title替代label：部分读屏不支持title，且它不参与焦点逻辑 - 自定义复选框/单选按钮必须同步处理
aria-checked和焦点管理，否则键盘用户无法操作
iframe 缺少 title 是高危疏漏
未设 title 的 <iframe></iframe> 在 VoiceOver/NVDA 中只会报“框架”或“无标题框架”，用户无法预判内容类型，极易跳过关键交互区域（如嵌入的登录弹窗、地图、视频）。
第三方嵌入代码常默认不带 title，务必手动补全；若内容动态变化，需用 JavaScript 同步更新。
-
title值必须具体：title="嵌入式客服聊天窗口"，而非title="内容"或title="" - 配合
sandbox和loading="lazy"使用时，title仍是第一优先级 - 含交互的
iframe（如支付弹窗）还应确保内部页面也符合可访问性规范，外部title只是入口提示
<nav></nav> 却没确保其中每个链接都可键盘聚焦，或写了 <details></details> 却没测试 Enter/Space 是否能展开。可访问性不是单点合规，而是整条交互链路的连贯支撑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
