键盘、触控与不同显示偏好下的网页使用

键盘访问：焦点位置必须看得见

桌面浏览器中可以使用 Tab 在链接、按钮和可操作控件之间移动。当前焦点如果没有清晰边框，用户就很难判断下一次按下 Enter 会触发什么。本网站保留 :focus-visible 样式，并让移动菜单支持 Escape 关闭与焦点返回。

正文信息不会被隐藏在只能通过鼠标悬停才能出现的区域中。即使不使用鼠标，主要导航、主题链接、FAQ 与文章页面仍可直接访问。

页面缩放：放大后不应丢失正文

浏览器自带缩放是常见阅读辅助方式。页面在高缩放比例下会逐渐采用更窄的布局，原本横向排列的内容可以变成纵向排列，从而减少横向滚动。表格等天然较宽的内容会保留独立滚动区域，而不是把整个页面撑出屏幕。

如果用户需要更大文字，优先使用浏览器缩放通常比依赖页面内部临时字号开关更稳定，因为它能同时调整正文、按钮和导航。

减少动态效果：内容不依赖动画才能理解

部分操作系统提供“减少动态效果”偏好。网站通过 prefers-reduced-motion 媒体特性缩短非必要动画和过渡，避免持续移动影响阅读。减少动画不会删除正文、导航或交互功能。

核心内容全部由 PHP 服务端直接输出。即使 JavaScript 没有执行，页面主体仍然存在，主要页面也可以通过普通链接继续浏览。

图片替代文本：说明内容而不是重复文件名

承担信息表达的图片使用自然中文 alt，描述它在当前页面中的作用。纯装饰图片更适合空 alt，避免屏幕阅读器重复朗读没有意义的视觉元素。图片文件名本身只是资源标识，不应直接成为替代文本。

移动触控：按钮大小与间距同样重要

手机上没有鼠标悬停，所有主要操作都应能够直接点击。导航按钮、主题入口和正文链接需要足够的点击区域，同时避免固定元素遮挡页面底部或首屏内容。窄屏布局会重新组织内容顺序，而不是简单缩小桌面页面。

语义结构：标题和区域帮助理解页面

页面使用 header、nav、main、article、section、footer 等语义标签，并保持每个正常页面只有一个 H1。H2 与 H3 用于表达实际内容层级，而不是为了制造视觉样式重复关键词。这样的结构既便于屏幕阅读器浏览，也让普通用户更容易快速扫读。