语义是基础，可访问性还要补齐关系、状态和反馈
左侧不是“样式不好”，而是用户和辅助技术拿不到完整信息。右侧在使用原生元素的基础上，补齐可访问名称、错误提示关联、控件状态和键盘焦点。
不推荐写法
看起来能用，但名称、状态或反馈没有正确暴露。
表单错误提示
邮箱请输入有效邮箱地址。
错误文字只是视觉上靠近输入框，控件本身没有声明“无效”，也没有关联错误说明。
<span>邮箱</span> <input value="abc"> <p>请输入有效邮箱地址。</p>
图标按钮
视觉上是关闭按钮，但没有按钮语义和可访问名称。
<div onclick="close()">×</div>
展开状态
这里是订单配送详情。
视觉可以展开收起，但控件没有暴露 expanded/collapsed 状态。
<div onclick="toggle()">展开详情</div>
推荐写法
同样的 UI，HTML 暴露了名称、关系、状态和键盘行为。
表单错误提示
请输入有效邮箱地址。
label 提供名称，aria-invalid 暴露错误状态，aria-describedby 关联错误说明。
<label for="email">邮箱</label> <input id="email" aria-invalid="true" aria-describedby="email-error"> <p id="email-error">请输入有效邮箱地址。</p>
图标按钮
图标不用可见文字时，按钮本身要提供可访问名称。
<button aria-label="关闭弹窗">×</button>
展开状态
这里是订单配送详情。
按钮语义负责键盘行为，aria-expanded 和 aria-controls 暴露当前状态与控制关系。
<button aria-expanded="true" aria-controls="panel">展开详情</button> <div id="panel">这里是订单配送详情。</div>