Accessibility 人机交互入门指南：从基础概念到实战避坑

1次阅读

共计 3201 个字符，预计需要花费 9 分钟才能阅读完成。

许多开发者可能没有意识到，我们日常开发的 Web 应用对某些用户群体来说可能是完全不可用的。比如：

色盲用户无法区分红色和绿色的状态提示（约占男性人口的 8%）。
仅使用键盘导航的用户无法访问某些下拉菜单（常见于运动障碍人群）。
屏幕阅读器用户听到的是混乱的标签顺序（视障用户的主要痛点）。

这些问题不仅仅关乎道德责任，在许多国家和地区（如欧盟 EN 301 549 标准、美国 Section 508），无障碍访问是法律强制要求。更重要的是，良好的无障碍设计往往能提升所有用户的体验。

等级	达标要求	典型场景示例
A	基本无障碍	为图片添加 alt 文本
AA	主流合规标准	颜色对比度≥4.5:1
AAA	最高标准	颜色对比度≥7:1

AA 级关键要求（建议作为最低目标）：

文本与背景对比度至少 4.5:1（大号文字可放宽至 3:1）
所有功能均可通过键盘操作
表单错误有文字说明
标题和标签描述准确

// 为图标按钮添加说明
<button 
  aria-label="关闭弹窗"
  onClick={handleClose}
>
  <CloseIcon />
</button>

// 用 aria-live 声明动态更新区域
<div 
  aria-live="polite"
  aria-atomic="true"
>
  {notificationText}
</div>
/*
  aria-live 值说明：- off: 不朗读（默认）- polite: 当前朗读完成后提示
  - assertive: 立即中断当前朗读
*/

import {useEffect, useRef} from 'react';
import PropTypes from 'prop-types';

/**
 * 可访问的模态框组件
 * @param {boolean} isOpen - 控制显示状态
 * @param {function} onClose - 关闭回调
 * @param {ReactNode} children - 子内容
 */
const AccessibleModal = ({isOpen, onClose, children}) => {const modalRef = useRef(null);

  // 自动聚焦到模态框
  useEffect(() => {if (isOpen && modalRef.current) {modalRef.current.focus();

      // 捕获焦点在模态框内
      const focusableElements = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );

      if (focusableElements.length > 0) {const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];

        const handleTabKey = (e) => {if (e.key === 'Tab') {if (e.shiftKey && document.activeElement === firstElement) {e.preventDefault();
              lastElement.focus();} else if (!e.shiftKey && document.activeElement === lastElement) {e.preventDefault();
              firstElement.focus();}
          }
        };

        modalRef.current.addEventListener('keydown', handleTabKey);
        return () => {modalRef.current?.removeEventListener('keydown', handleTabKey);
        };
      }
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div 
      className="modal-overlay" 
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      ref={modalRef}
      tabIndex="-1"
    >
      <h2 id="modal-title"> 操作确认 </h2>
      <div className="modal-content">{children}</div>
      <button 
        className="close-button"
        onClick={onClose}
        aria-label="关闭对话框"
      >
        ×
      </button>
    </div>
  );
};

AccessibleModal.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  children: PropTypes.node
};

安装依赖：

npm install axe-core react-axe --save-dev

在 React 中初始化：

if (process.env.NODE_ENV !== 'production') {const axe = require('react-axe');
  axe(React, ReactDOM, 1000); // 延迟 1 秒执行
}

控制台会输出类似这样的问题报告：

[axe]: 3 accessibility violations detected
- Buttons must have discernible text (button-name)
- Heading levels should only increase by one (heading-order)

NVDA（Windows）测试流程：

按 Insert+ Q 重置 NVDA
用 Tab 键遍历所有交互元素
验证：
每个控件的用途是否清晰
图片是否有等效文本
表单错误是否可感知

VoiceOver（Mac）快捷键：

开启 / 关闭：Command+F5
朗读当前元素：VO（Control+Option）+A
跳转到下一个标题：VO+Command+H

能不 ARIA 就不 ARIA：优先使用原生 HTML 元素（如 <button> 优于<div role="button">）
不要重复语义 ：如<button aria-label="提交"> 提交 </button> 是错误用法
动态更新要通知 ：内容变化时需设置aria-live 或触发aria-atomic

// 错误示例：直接更新内容会导致读屏中断
setState({data: newData});

// 正确做法：先提示即将更新
setState({ 
  status: '加载中...',
  isLoading: true 
});

// 使用 aria-live 区域
<div aria-live="polite">
  {isLoading ? '正在加载新数据' : <DataList items={data} />}
</div>

当我们设计以下组件时该如何取舍：