如何正确实现符合WCAG无障碍标准的按钮转输入框功能

针对按钮切换输入框的场景，除了为输入框设置焦点，还要覆盖状态同步、键盘交互、输入收尾处理等环节，同时必须考虑屏幕阅读器的通知需求，ARIA属性的使用也要精准避免误导。以下是具体实现要点：

一、核心操作（除输入框聚焦外） #

• 状态与内容同步：切换时确保状态变量（如isOpen）和内容值双向同步——比如按钮显示的文本要同步到输入框的初始值，输入完成后要把新值回写到按钮文本。
• 键盘交互支持：为输入框添加ESC键取消编辑（恢复原内容并切回按钮）、回车键确认编辑的逻辑，符合键盘用户的操作习惯。
• 输入收尾的焦点管理：退出编辑状态时，将焦点重新设置回按钮，避免键盘用户丢失焦点位置。
• 外部点击收起：可选添加点击页面其他区域时退出编辑状态的逻辑，提升交互便捷性。

二、屏幕阅读器的通知要求 #

必须通知！动态UI切换属于屏幕阅读器默认无法自动感知的内容变化，可通过两种方式实现：

• aria-live实时区域：添加一个视觉隐藏但可访问的aria-live="polite"元素，切换状态时更新该区域的文本（如“已进入编辑模式”“已退出编辑模式”），屏幕阅读器会自动朗读。
• 输入框的明确标识：给输入框添加aria-label或关联<label>，明确其用途（如“编辑用户名”），让用户清楚输入的目标。

三、ARIA标签的注意事项 #

• 不要滥用aria-haspopup：该属性用于标识按钮触发浮层（菜单、对话框等），而此处是直接替换DOM元素，不属于弹出内容，使用会误导屏幕阅读器。
• 按钮的ARIA属性：如果是图标按钮，必须添加aria-label明确功能（如“编辑”）；若用同一容器包裹切换元素，可给容器添加aria-expanded（true表示处于编辑状态，false表示处于按钮状态）。
• 输入框的ARIA属性：根据场景添加aria-required（必填时）、aria-describedby（需要额外说明时）等属性，增强输入框的可访问性。

四、完整实现示例（React） #

import { useState, useRef, useEffect } from 'react';

function EditableText() {
  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState("点击编辑");
  const inputRef = useRef(null);
  const buttonRef = useRef(null);
  const liveRegionRef = useRef(null);

  // 切换状态时处理焦点与屏幕阅读器通知
  useEffect(() => {
    if (isEditing) {
      inputRef.current?.focus();
      liveRegionRef.current.textContent = "已进入编辑模式，请输入内容";
    } else {
      buttonRef.current?.focus();
      liveRegionRef.current.textContent = "已退出编辑模式";
    }
  }, [isEditing]);

  const handleEditClick = () => setIsEditing(true);

  const handleInputBlur = () => setIsEditing(false);

  const handleInputKeyDown = (e) => {
    if (e.key === "Enter") {
      setIsEditing(false);
    } else if (e.key === "Escape") {
      // 按ESC取消编辑，恢复原文本
      setText(text);
      setIsEditing(false);
    }
  };

  return (
    <div>
      {/* 屏幕阅读器专用通知区域，视觉隐藏 */}
      <div 
        ref={liveRegionRef} 
        aria-live="polite" 
        style={{ 
          position: 'absolute', 
          left: '-10000px', 
          top: 'auto', 
          width: '1px', 
          height: '1px', 
          overflow: 'hidden' 
        }}
      />
      
      {isEditing ? (
        <input
          ref={inputRef}
          value={text}
          onChange={(e) => setText(e.target.value)}
          onBlur={handleInputBlur}
          onKeyDown={handleInputKeyDown}
          aria-label="编辑文本内容"
        />
      ) : (
        <button ref={buttonRef} onClick={handleEditClick}>
          {text}
        </button>
      )}
    </div>
  );
}

额外测试建议 #

用NVDA、VoiceOver等主流屏幕阅读器测试交互流程，确保：

• 状态切换时的通知能被正确朗读
• 键盘操作（Tab、Enter、ESC）流畅无阻塞
• 所有元素的可访问标签清晰准确

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