React中如何用屏幕阅读器读取文件上传控件的增删文件

要实现这个需求，核心是利用ARIA实时区域（aria-live）——屏幕阅读器会自动监听这个区域的内容变化并朗读出来。结合React的状态管理，就能在文件添加或移除时同步更新提示文本，让辅助技术感知到变化。

实现步骤及代码示例 #

1. 状态管理
   用useState维护文件列表和屏幕阅读器的提示文本：

import { useState } from 'react';

function FileUploader() {
  const [files, setFiles] = useState([]);
  // 用于屏幕阅读器朗读的提示文本
  const [announcement, setAnnouncement] = useState('');

2. 创建视觉隐藏的ARIA实时区域
   这个区域仅对屏幕阅读器可见，设置aria-live="polite"表示会在合适时机朗读内容，不会打断用户当前操作：

// 视觉隐藏样式，确保屏幕阅读器能读取但不显示在页面上
  const visuallyHiddenStyle = {
    position: 'absolute',
    width: '1px',
    height: '1px',
    padding: '0',
    margin: '-1px',
    overflow: 'hidden',
    clip: 'rect(0, 0, 0, 0)',
    border: '0'
  };

  return (
    <div>
      {/* ARIA实时区域 */}
      <div 
        aria-live="polite"
        style={visuallyHiddenStyle}
      >
        {announcement}
      </div>

3. 处理文件选择事件
   当用户选择文件后，更新文件列表并生成对应的提示文本：

<input
        type="file"
        multiple
        onChange={(e) => {
          const selectedFiles = Array.from(e.target.files);
          // 合并已有文件和新选文件（可选，根据需求覆盖或合并）
          const updatedFiles = [...files, ...selectedFiles];
          setFiles(updatedFiles);

          // 根据文件数量生成提示文本
          if (selectedFiles.length === 1) {
            setAnnouncement(`已添加文件：${selectedFiles[0].name}`);
          } else {
            const fileNames = selectedFiles.map(f => f.name).join('，');
            setAnnouncement(`已添加${selectedFiles.length}个文件：${fileNames}`);
          }
        }}
      />

4. 实现文件移除及提示
   展示已选文件，并添加移除按钮，点击后更新状态和提示：

<div>
        <h3>已选文件</h3>
        {files.length === 0 ? (
          <p>暂无文件</p>
        ) : (
          <ul>
            {files.map((file, index) => (
              <li key={index}>
                {file.name}
                <button
                  onClick={() => {
                    const updatedFiles = files.filter((_, i) => i !== index);
                    setFiles(updatedFiles);
                    setAnnouncement(`已移除文件：${file.name}`);
                  }}
                >
                  移除
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default FileUploader;

关键注意事项 #

• aria-live区域不要用display: none或visibility: hidden，这会导致屏幕阅读器忽略该区域，用上述的视觉隐藏样式更可靠。
• 提示文本要简洁明确，包含操作类型（添加/移除）、文件数量和文件名，让用户清晰感知变化。
• 如果需要覆盖已选文件而非合并，只需把updatedFiles改为selectedFiles即可。

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