Stable Diffusion WebUI 无障碍改造：键盘导航与屏幕阅读器适配

为滑块控件添加键盘支持

原生 <input type="range"> 的键盘交互不够友好。需增强其键盘控制，监听方向键更新数值并触发 change 事件。

function enhanceSliderAccessibility(sliderId) {
  const slider = document.getElementById(sliderId);
  const valueDisplay = slider.nextElementSibling;
  if (!slider || !valueDisplay) return;

  slider.addEventListener('keydown', function(event) {
    const step = parseInt(slider.getAttribute('step')) || 1;
    let newValue = parseInt(slider.value);
    
    switch(event.key) {
      case 'ArrowRight': case 'ArrowUp':
        newValue = Math.min(max, newValue + step); break;
      case 'ArrowLeft': case 'ArrowDown':
        newValue = Math.max(min, newValue - step); break;
      // ... 其他按键处理 ...
      default: return;
    }
    
    slider.value = newValue;
    valueDisplay.textContent = newValue;
    slider.dispatchEvent(new Event('input'));
    event.preventDefault();
  });
}

添加快捷键支持

为常用操作绑定全局快捷键，如 Ctrl+Enter 生成图片，Ctrl+R 重置参数。同时需处理输入框中的按键拦截，避免冲突。

// 全局快捷键支持
document.addEventListener('keydown', function(event) {
  if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
    return;
  }
  
  if (event.ctrlKey && event.key === 'Enter') {
    event.preventDefault();
    document.getElementById('generate-btn').click();
    announceToScreenReader('开始生成图片，请稍候');
  }
  // ... 其他快捷键 ...
});

屏幕阅读器适配深度优化

屏幕阅读器用户通过'听'来浏览网页。需确保每个元素都有清晰的语义描述。

完善 ARIA 属性

重点关注主区域标记、提示词区域的语义化、参数设置的分组以及按钮的可访问名称。

<!-- 主操作区域标记 -->
<div role="main" aria-label="Stable Diffusion 图像生成主界面">
  <!-- 提示词区域 -->
  <section aria-labelledby="prompt-section-heading">
    <h2>提示词设置</h2>
    <div>
      <label for="prompt-input">
        <span>正向提示词</span>
        <span>描述你想要的图片内容，建议使用英文</span>
      </label>
      <textarea aria-describedby="prompt-help"></textarea>
    </div>
  </section>
</div>

动态内容实时播报

图像生成是异步过程。需创建隐藏的 aria-live 区域，在生成开始、进行中及完成后播报状态，确保用户知晓进度。

class AccessibleImageGenerator {
  constructor() {
    this.generateButton = document.getElementById('generate-button');
    this.statusRegion = document.getElementById('generation-status');
    this.init();
  }
  
  init() {
    this.generateButton.addEventListener('click', () => {
      this.startGeneration();
    });
    
    if (!this.statusRegion) {
      this.statusRegion = document.createElement('div');
      this.statusRegion.id = 'generation-status';
      this.statusRegion.setAttribute('aria-live', 'assertive');
      this.statusRegion.className = 'visually-hidden';
      document.body.appendChild(this.statusRegion);
    }
  }
  
  startGeneration() {
    this.generateButton.setAttribute('aria-busy', 'true');
    this.announceStatus('开始生成图片，请稍候...');
    // ... 模拟生成过程 ...
  }
  
  announceStatus(message) {
    this.statusRegion.textContent = `状态更新：${message}`;
  }
}

为图标按钮添加文本替代

WebUI 中大量使用图标按钮，这对屏幕阅读器来说是看不见的。我们需要为每个图标提供文本描述。

<!-- 改造后的可访问版本 -->
<button aria-label="下载图片">
  <svg aria-hidden="true" focusable="false">
    <!-- SVG 内容 -->
  </svg>
  <span>下载图片</span>
</button>

视觉设计与交互反馈优化

无障碍设计不仅关乎代码，视觉与交互同样重要。

高对比度与色彩安全

确保界面有足够的对比度，色弱或视力不佳用户也能清晰辨认。定义高对比度颜色变量，如深灰文字配白底。

/* 无障碍友好的颜色方案 */
:root {
  --text-primary: #000000;
  --background-primary: #ffffff;
  --focus-outline: 3px solid #0056b3;
}

.control-label {
  color: var(--text-primary);
  font-weight: 600;
}

清晰的焦点指示器

焦点指示器是键盘用户的'鼠标指针'。需自定义 :focus 样式，确保轮廓明显可见，移除默认样式并添加阴影效果。

/* 增强焦点指示器 */
*:focus {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2);
}

button:focus, input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.3);
}

操作状态反馈

为用户操作提供即时反馈，特别是异步操作。可设计 Toast 风格的反馈组件，同时配合屏幕阅读器播报。

class OperationFeedback {
  constructor() {
    this.feedbackContainer = this.createFeedbackContainer();
  }
  
  createFeedbackContainer() {
    const container = document.createElement('div');
    container.id = 'operation-feedback';
    container.setAttribute('role', 'status');
    container.setAttribute('aria-live', 'polite');
    document.body.appendChild(container);
    return container;
  }
  
  showFeedback(message, type = 'info') {
    const feedback = document.createElement('div');
    feedback.className = `feedback feedback-${type}`;
    feedback.setAttribute('role', 'alert');
    feedback.textContent = message;
    this.feedbackContainer.appendChild(feedback);
    setTimeout(() => { feedback.remove(); }, 5000);
  }
}

测试与验证

改造完成后必须进行全方位测试。

键盘导航测试清单

手动测试 Tab 键导航、反向导航、激活方式、方向键控制及快捷键冲突情况。

屏幕阅读器测试

使用主流屏幕阅读器验证图片 alt 文本、表单控件标签、按钮可访问名称及 ARIA 属性使用情况。

// 屏幕阅读器兼容性测试辅助脚本
function runScreenReaderTests() {
  const tests = [
    { name: '所有图片都有 alt 文本', test: () => { /* 检查 img 标签 */ } },
    { name: '所有表单控件都有标签', test: () => { /* 检查 label 关联 */ } },
    { name: '所有按钮都有可访问名称', test: () => { /* 检查 aria-label */ } }
  ];
  console.log('=== 屏幕阅读器兼容性测试 ===');
  tests.forEach(test => {
    const result = test.test();
    console.log(`${test.name}: ${result}`);
  });
}

自动化测试集成

将无障碍测试（如 pa11y）集成到 CI/CD 流程中，定期扫描 WCAG 标准合规性。

{
  "scripts": {
    "test:a11y": "pa11y http://localhost:7860 --reporter json"
  },
  "devDependencies": {
    "pa11y": "^6.0.0"
  }
}

真实用户测试

招募视障或运动障碍用户进行实际体验，收集反馈并持续迭代。

总结：让 AI 工具真正人人可用

通过一系列改造，Stable Diffusion WebUI 实现了从单一鼠标操作到全键盘、全语音支持的转变。核心经验在于：键盘导航是基础，屏幕阅读器兼容性是关键，反馈系统很重要，测试验证不可少。

无障碍设计不仅是道德责任，更是扩大用户群体的明智选择。好的无障碍设计，对所有人都是更好的设计。当我们为特殊需求用户优化时，往往也能让普通用户获得更好的体验。这不仅是技术的进步，更是技术的温度。