如何使Remix/React Router v6中的返回按钮符合WCAG无障碍标准？

首先明确：不要给按钮加role="link"，原生<button>本身就是符合可访问性标准的交互控件，额外添加role会混淆辅助技术对控件语义的识别，不符合WCAG规范。

以下是让这个返回按钮满足可访问性要求的正确做法：

• 保留原生按钮元素：<button>默认支持键盘交互（按Enter或空格即可触发点击），屏幕阅读器等辅助技术能正确识别为可操作控件，无需修改其角色。
• 补充精准的语义描述（可选但推荐）：如果按钮在页面中的上下文不足以清晰说明功能，可添加aria-label来明确行为，比如：

  <button onClick={goBack} aria-label="返回上一页">Go Back</button>
  

• 保证聚焦状态可见：原生按钮默认有聚焦轮廓，若通过CSS移除了默认outline，必须自定义聚焦样式（比如高亮边框），确保键盘导航用户能清晰看到当前聚焦的控件。
• 处理无历史记录的场景：当用户没有可返回的浏览历史时，应该禁用按钮，避免无效交互，示例代码如下：

  import { useNavigate, useLocation } from '@remix-run/react'
  
  const navigate = useNavigate()
  const location = useLocation()
  const goBack = () => navigate(-1)
  // 通过location.key判断是否存在可返回的历史记录
  const canGoBack = location.key !== 'default'
  
  <button onClick={goBack} disabled={!canGoBack} aria-label="返回上一页">
    Go Back
  </button>
  

为什么不能用role="link"？ #

链接（<a>）的语义是导航到特定URL，而此处的返回按钮是基于浏览器历史栈的操作，属于动作触发类控件而非导航链接。混淆语义会让屏幕阅读器用户误解控件用途，违反WCAG的语义化要求。

内容的提问来源于stack exchange，提问作者J. Hesters