17c网站：冷门但重要：多数人忽略的那条规则
在做网站时，人们通常把注意力放在外观、加载速度和SEO上。但有一条看起来不起眼、却能显著影响用户体验、可访问性和搜索表现的规则，常常被忽视：语义化结构与键盘可访问性（也就是合理的焦点顺序与可被键盘操作的页面元素）。把它做好，能让网站更专业、更稳当；忽略它，很多访客根本无法顺利使用你的网站，搜索引擎也会因为结构混乱而降低抓取效率。
这条规则到底是什么？
- 语义化结构：使用正确的标题层级（H1、H2、H3）、列表、段落和语义标签，让页面的内容有清晰、逻辑化的层次。对屏幕阅读器和搜索引擎都很友好。
- 键盘可访问性与焦点管理：确保所有可交互元素（链接、按钮、表单控件、下拉、模态等）可以通过键盘操作，焦点顺序合乎阅读逻辑，模态窗口打开后焦点被限制在模态内并能正确回到触发元素。
为什么多数人忽略？
- 外观优先：设计稿看起来完整，但没把交互状态（聚焦样式、键盘导航）纳入验收。
- 模板依赖：套用模板或可视化建站工具时，默认生成的代码可能缺少语义化或正确的焦点管理，使用者又不知所措。
- 测试不足：很多人只用鼠标或触屏测试，没做键盘或无障碍工具测试。
忽视后的具体影响
- 访问受限：视障、肢体障碍或仅用键盘的用户无法访问关键功能。
- 流失用户：购买流程、表单提交或导航混乱直接导致转化率下降。
- SEO与合规风险：结构混乱会降低搜索引擎理解页面内容的能力；在某些地区还可能触及无障碍合规要求。
实用检查清单（给17c网站或任何站点都适用）
- 标题层级清晰：每页只有一个H1，后续用H2/H3表达逻辑层次。
- 图片都有替代文本（alt）：描述性简洁，不要堆关键字。
- 链接文本语义化：避免“点击这里”，用能说明目的的短语（例如“下载产品手册”）。
- 所有交互元素可通过Tab键访问，Tab顺序与视觉顺序一致。
- 可见的聚焦样式：当用键盘导航时，用户能看见当前焦点。
- 弹窗／模态窗口：打开时将焦点限制在模态内，关闭后把焦点返回触发控件。
- 表单标签与控件关联正确（label for / id）。
- 使用语义标签（header、nav、main、footer、article、section）改善结构。
- 在移动端也检查触控目标大小和次序。
- 用自动化工具和真实键盘测试结合验证。
在Google Sites上如何着手（实操提示）
- 标题与段落：使用站点编辑器提供的文本样式，确保层级不要跳跃。
- 图片alt文字：插入图片后，点击设置，填写替代文本。
- 链接文本：编辑链接时把文本写成描述性短语，不要只粘URL。
- 插入“跳转到内容”链接（skip link）：可以在页面顶部用“嵌入 > 嵌入代码”加入一段HTML（注意：新版Google Sites对HTML支持有限，效果视模板而定）： 跳到主要内容 并在主内容区或文本块顶部加一个id="main-content"的锚点。
- 键盘测试：关闭鼠标，按Tab键逐项检查可到达与聚焦样式。
- Lighthouse与无障碍检查：打开Chrome开发者工具中的Lighthouse，运行Accessibility审计，查看建议并逐项修复。
常见的坏习惯与改正
- “所有交互都用div” → 改用
- “通过颜色区分必填/错误” → 同时提供文本或图标提示，避免色盲问题。
- “模态打开只是display:block” → 使用aria-hidden、焦点陷阱等方法管理可访问性。
