使用QR码时如何提升HTML标记的语义化水平？

语义优化最佳方案 #

非常推荐将URL类型的二维码嵌套在<a>标签内，这是提升语义和可用性的最优做法之一：既满足移动端用户扫码跳转的需求，也照顾PC端用户直接点击跳转的习惯，同时辅助设备也能直接识别这是可交互的跳转链接。

alt和title属性的正确用法 #

你之前的写法符合最低规范，但可以进一步优化：

• alt是必填属性，所有<img>标签都必须携带（哪怕是空值alt=""，表示这是装饰性图片）。对于二维码来说，优先写清楚功能，而非单纯堆砌内容：比如alt="扫码跳转example.com首页"比直接放网址的可读性更好，屏幕阅读器用户也能快速理解用途。如果二维码内容不是公开可理解的信息（比如WiFi密码、加密文本），直接写清楚功能即可。
• title属性不是必填项：绝大多数移动设备无法触发悬停显示title的逻辑，屏幕阅读器默认也不会读取title内容，所以不需要把重要信息放在这里，你写的title="QR code"没有问题但实际作用有限，可加可不加。

ARIA和语义标签增强 #

不需要额外添加冗余的role属性，<a>和<img>本身已经有默认的语义角色，可通过以下方式进一步增强：

• 用<figure>+<figcaption>包裹二维码和对应的说明文字，语义上明确两者是关联的内容单元，比单独写<p>加<img>的语义度高很多。
• 可给<a>或<img>添加aria-description补充二维码的特性，比如aria-description="本图片为QR码，扫码即可获得对应内容"，供需要的辅助设备读取，不干扰普通用户。
• 给新窗口打开的链接添加rel="noopener noreferrer"保证安全。

完整示例代码 #

<!-- 带公开说明的二维码完整写法 -->
<figure class="qr-code">
  <a href="https://example.com/" target="_blank" rel="noopener noreferrer">
    <img 
      src="/generate_qr_code?value=https://example.com/" 
      alt="扫码或点击跳转example.com首页"
      aria-description="QR码，对应链接为https://example.com"
    >
  </a>
  <figcaption>扫码访问本站官方首页</figcaption>
</figure>

<!-- 无说明的精简写法 -->
<a href="https://example.com/" aria-label="跳转example.com首页，图片为对应二维码">
  <img src="/generate_qr_code?value=https://example.com/" alt="example.com首页二维码">
</a>

内容的提问来源于stack exchange，提问作者Fred