医疗健康网站可访问性是服务底线，需用语义化HTML、ARIA属性和真实交互设计保障病痛、视障等用户完成问诊：医生信息须用header/h2+dl/dt/dd结构，表单须用原生input type与明确提示，模块间需状态感知过渡及PDF外链的完整标注。
医疗健康类网站的可访问性不是“加分项”，而是服务底线——当用户正经历病痛、视力受限、认知负荷高或仅用键盘操作时，一个跳过 main 直接进表单的屏幕阅读器，或一个无法识别 tel 输入类型的虚拟键盘，可能直接阻断问诊流程。
医生介绍区必须用语义化结构+可解析字段
很多团队把医生信息塞进一堆 div + CSS 样式里，结果屏幕阅读器只能读出“容器”“区域”“按钮”，完全丢失职称、科室、出诊时间这些关键信息。
- 姓名和职称必须包裹在
header内，且用h2（不能是span加粗）；否则辅助技术无法将其识别为独立导航目标 - 科室、擅长、出诊时间等字段必须用
dl/dt/dd结构，而非div堆砌——dt是“标签”，dd是“值”，这是 WCAG 明确推荐的键值对表达方式 - 头像
img的alt必须写实，如alt="张明医生头像，心内科主任医师"；空值、"图片"或纯描述性文字（如"一位戴眼镜的男医生"）都不合格 - 动态状态（如“可约”“已满”）要通过
data-availability等属性携带原始值，并配合 ARIA 状态更新（如aria-busy="false"），不能只靠颜色或图标传达
问诊表单要直击医疗场景的真实交互链
医疗表单不是通用表单：它承载的是症状描述、检查报告上传、紧急联系方式，任何设计偏差都可能延误判断。原生 HTML 能力在这里不是“可选”，而是刚需。
- 手机号输入必须用
input type="tel"，并加inputmode="tel"——iOS/Android 键盘会自动调出数字键盘，避免用户手动切换 - 多图上传不要只依赖
input type="file" multiple，必须显式标注支持格式与大小限制（如accept="image/jpeg,image/png" maxlength="5"），并在前端提示“后端将再次验证”，管理用户预期 - 提交按钮文字禁止写“确定”“提交”“发送”，必须写具体动作+上下文，如
提交图文问诊或发起急诊咨询；否则屏幕阅读器用户无法区分这是预约挂号还是上传检验单 - 表单整体必须包裹在
form元素中，且带id="consult-form"；禁用div模拟表单——否则键盘用户无法用Enter提交，label也无法正确绑定控件
医生介绍与问诊表单之间要有状态感知的过渡逻辑
这两个模块不是静态并列关系，而是服务动线：用户先看医生资质，再决定是否发起问诊。这个逻辑必须反映在 DOM 结构和 ARIA 行为上。
立即学习“前端免费学习笔记（深入）”；
- 两模块之间必须插入引导段落，如
<p class="consult-prompt">如果您有相关症状，可直接填写下方问诊表单，医生将在24小时内回复。</p>；该段落需随服务状态实时更新（如医生停诊时改为“当前暂未开通图文问诊服务”） - 当医生不提供该服务时，整个
form必须设aria-hidden="true"并加class="disabled"，同时移除tabindex和所有交互事件——不能只靠 CSS 隐藏或禁用按钮 - 禁止用视觉分隔线（如
hr）代替语义过渡；屏幕阅读器不会读hr，但会识别p中的文案和aria-live区域的动态变化
最容易被忽略的一点：医疗页面常嵌入大量 PDF 报告、检查单截图、用药说明图表，这些资源本身不具备可访问性。HTML 层面能做的，是确保每个外链明确标注类型与大小，例如 <a href="report.pdf" aria-label="张明医生出具的高血压用药说明 PDF 文件，大小2.1MB">下载用药说明</a>——而不是让屏幕阅读器只读出“点击这里”。
