如何使用 React 和语义 HTML 来构建响应式且易于访问的用户界面设计

为什么这种设计是正确的：

• 它遵循标准的网页设计模式，而不是应用程序风格的菜单结构。

• 它避免了滥用诸如role="menu"这样的ARIA角色，因为这些角色需要复杂的键盘操作才能正确使用。

• 即使不添加额外的ARIA属性，屏幕阅读器也能准确理解页面的结构。

• 这种设计使得实现方式更加简单、易于访问且便于维护。

如果你需要更复杂的菜单功能（比如使用箭头键进行导航），那么ARIA的菜单相关角色可能比较适用——但前提是必须严格按照ARIA的编写规范来实施这些功能。

注意：在网页应用程序中，大多数下拉列表并不符合ARIA规范中对“菜单”的定义。除非你需要实现完整的键盘导航功能（如方向键操作、焦点控制等），否则应避免使用`role="menu"`属性。

键盘导航

键盘导航能够确保用户仅通过键盘即可与应用程序进行交互，而无需使用鼠标。这对于有运动障碍的用户来说至关重要，同时也能让那些更喜欢使用键盘进行工作的高级用户和开发者受益。

在一个设计良好的界面中，用户应该能够：

• 使用Tab键在交互元素之间切换

• 使用Enter或Space键激活按钮和链接

• 清楚地看到当前哪个元素处于焦点状态

在下面的例子中，我们将探讨一些常见的键盘操作错误，以及为什么依赖原生的HTML元素通常是更好的选择。

示例：

请避免为像``这样的原生元素添加自定义的键盘事件处理程序，因为这些元素本身就已经支持键盘交互功能了。

例如，你只需要这样做即可：

<button type="button" onClick={handleClick}>>提交</button>

这样就能自动实现以下功能：

• 通过Enter和Space键激活元素

• 焦点控制

• 屏幕阅读器能够正确读取相关信息

在这里添加额外的手动键盘事件处理程序是多余的，而且可能会导致错误或行为不一致的问题。

这个示例说明了什么：

对于像`

`这样的原生交互元素，请避免手动处理键盘事件。这些元素本身就已经具备了内置的键盘交互支持和无障碍功能。

例如：

<button type="button" onClick={handleClick}>>提交</button>

这样做的原因如下：

• 默认支持通过Enter和Space键激活元素

• 可以被设置为焦点对象，并且会遵循自然的Tab键导航顺序

• 内置了无障碍功能及屏幕阅读器提示信息

• 减少了额外逻辑代码或ARIA属性的需求

为原生元素添加自定义的键盘事件处理程序（如`onKeydown`）是多余的，而且可能会导致错误或行为不一致的问题。在可能的情况下，始终优先使用原生的HTML交互元素。

避免常见的键盘操作陷阱

最常见的键盘无障碍问题之一就是“将用户困在某些交互式组件中”，比如模态窗口或自定义下拉列表。当焦点被移到这些组件上后，用户无法通过Tab键、Shift+Tab键或其他键盘操作跳出这些组件，从而导致他们无法导航到页面的其他部分。

在下面的例子中，你会看到一个简单的模态窗口——它试图将焦点设置到该窗口上，但却无法正确处理使用“Tab”键切换页面的行为。

function Modal({ isOpen }) {
  const ref = React.useRef();

  React.useEffect(() => {
    if (isOpen) ref.current?.focus();
  }, [isOpen]);

  return (
    
关闭

这段代码的作用是：

• 当模态窗打开时，会通过ref.current.focus()将焦点移到“关闭”按钮上。

• 模态窗使用role="dialog"来表明其用途。

不过这段代码也存在一些问题需要注意。首先，如果在模态窗内部存在其他可聚焦元素，使用Tab键切换时焦点可能会跳出模态窗范围；其次，当模态窗关闭时，如果没有机制将焦点返回到触发该模态窗的元素上，用户可能会遇到使用不便的情况；此外，这段代码也没有处理Shift+Tab键的组合按键或循环聚焦的功能。

目前这种焦点管理方式还属于部分可访问的状态，还需要进一步优化。为了改善焦点管理效果，可以确保Tab键和Shift+Tab键仅能在模态窗内部的元素之间切换焦点；同时，在模态窗关闭时，应该将焦点返回到触发它的元素上。

改进示例（概念性说明）：

function Modal({ isOpen, onClose, triggerRef }) {
  const modalRef = React.useRef();

  React.useEffect(() => {
    if (isOpen) {
      modalref.current?.focus();
      // 在这里添加焦点锁定逻辑
    } else {
      triggerref.current?.focus();
    }
  }, [isOpen]);

  return (
    
关闭
    

需要强调的是，如果不使用焦点锁定机制，这种模态窗结构是无法实现完全可访问性的。在实际开发中，建议使用focus-trap-react、react-aria或Radix UI这类库来帮助解决这些问题。

关键点：

• tabIndex={-1}这个属性可以让模态窗元素获得程序控制的焦点。

• 焦点锁定机制可以防止用户无意中切换出模态窗范围。

• 将焦点返回到触发模态窗的元素上，可以帮助用户保持操作连贯性。

最佳实践：

• 在打开模态窗时，一定要将其设置为可接收焦点的状态。

• 模态窗关闭后，应将焦点返回到触发它的元素上。

• 要确保使用Tab键时焦点能够正确地在模态窗内部元素之间切换。

一般来说，对于交互功能来说，优先使用原生的HTML元素会更加合适。只有当需要实现一些标准元素无法完成的高级交互效果时，才应该考虑编写自定义的键盘处理逻辑。

焦点管理

焦点管理是指在用户与模态窗、表单或交互式组件进行交互时，控制键盘焦点的移动方向。正确的焦点管理能够确保：

• 依赖键盘或辅助技术的用户可以顺畅地进行导航。

• 焦点不会丢失，也不会出现在意想不到的地方。

• 即使内容动态更新，用户也能保持对当前上下文的了解。

下面的例子展示了一种常见的处理方式，但这种方式只能部分解决焦点管理的问题：

不良示例：

// 不良示例：在没有任何上下文提示的情况下自动将焦点设置到输入框上
const ref = React.useRef();
React.useEffect(() => {
  ref.current?.focus();
}, []);

在上述代码中，当组件被渲染出来时，输入框会立即获得焦点；但当用户离开该组件时，焦点并没有被释放回来。

如果这个输入框位于模态窗口或动态生成的内容内部，用户可能会迷失方向。此外，也没有任何提示元素来帮助辅助技术用户理解当前的界面状态。

这种简单的处理方式在实际应用中很容易导致使用上的混乱。

改进后的示例：

// 改进后的示例：在模态窗口环境中正确管理焦点
function Modal({ isOpen, onClose, triggerRef }) {  
  const dialogRef = React.useRef();

  React.useEffect(() => {
    if (isOpen) {
      dialogRef.current?.focus();
    } else if (triggerRef?.current) {
      triggerref.current?.focus();
    }
  }, [isOpen]);

  React.useEffect(() => {
    function handleKeyDown(e) {
      if (e.key === 'Escape') {
        onClose();
      }
    }

    if (isOpen) {
      document.addEventListener('keydown', handleKeyDown);
    }

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    

      
模态窗口标题
      

关闭