Solid Design System 中 sd-scrollable 组件的无障碍优化实践

原创于 2025-06-02 09:13:50 发布 · 303 阅读

CC 4.0 BY-SA版权

Solid Design System 中 sd-scrollable 组件的无障碍优化实践

solid Monorepo for Union Investment's Solid Design System. 项目地址: https://gitcode.com/gh_mirrors/solid8/solid

背景概述

在现代化前端开发中，滚动容器是用户界面中最常见的交互元素之一。Solid Design System 作为一套优秀的设计系统，其 sd-scrollable 组件负责处理各种滚动场景。然而在最新的无障碍(A11y)审计中发现，该组件在屏幕阅读器支持方面存在明显不足，特别是在滚动操作反馈方面需要重大改进。

核心问题分析

当前 sd-scrollable 组件面临的主要无障碍问题是：屏幕阅读器用户无法感知滚动操作的结果。当用户使用滚动按钮时，没有任何语音反馈告知用户操作是否成功或当前滚动位置状态。

更具体的技术问题表现在：

滚动操作缺乏 ARIA 实时区域(live region)支持
Safari 18.2(macOS)环境下需要双击按钮才能触发滚动
键盘导航体验有待优化

技术解决方案

实时区域反馈机制

实现滚动状态语音反馈的核心技术是使用 ARIA 的 aria-live 属性。我们可以在组件中添加一个隐藏的实时区域元素：

<div 
  aria-live="polite"
  class="sr-only"
  id="scroll-announcement"
>
  <!-- 动态更新的反馈信息将插入这里 -->
</div>

当滚动发生时，JavaScript 将根据滚动方向和位置更新这个区域的内容，屏幕阅读器会自动播报这些变化。反馈信息应当包括：

"已向上滚动"
"已向下滚动"
"已滚动到顶部"
"已滚动到底部"

Safari 兼容性处理

针对 Safari 18.2 的双击问题，我们需要在事件处理逻辑中添加额外的检测机制。可能的解决方案包括：

监听 mousedown 和 click 事件的组合
增加滚动状态检测，确保第一次点击后确实触发了滚动
必要时使用 preventDefault() 控制事件传播

键盘导航增强

虽然原始问题描述中提到要移除某些键盘导航建议，但良好的键盘支持仍然是无障碍的基本要求。我们应当：

确保滚动容器本身可通过 Tab 键聚焦
支持方向键控制滚动
实现 PageUp/PageDown 等标准键盘滚动操作

实现细节

组件结构优化

建议的组件 DOM 结构：

<div class="sd-scrollable">
  <!-- 滚动按钮 -->
  <button class="scroll-up" aria-label="向上滚动">
    <svg>...</svg>
  </button>
  
  <!-- 内容容器 -->
  <div class="scroll-container" tabindex="0">
    <!-- 可滚动内容 -->
  </div>
  
  <!-- 滚动按钮 -->
  <button class="scroll-down" aria-label="向下滚动">
    <svg>...</svg>
  </button>
  
  <!-- 实时反馈区域 -->
  <div aria-live="polite" class="sr-only" id="scroll-feedback"></div>
</div>

JavaScript 事件处理

核心的事件处理逻辑应包括：

// 处理滚动按钮点击
function handleScroll(direction) {
  const container = scrollContainerRef.current;
  const feedbackEl = feedbackRef.current;
  
  // 执行滚动
  const scrollAmount = 100; // 可配置
  if (direction === 'up') {
    container.scrollBy(0, -scrollAmount);
  } else {
    container.scrollBy(0, scrollAmount);
  }
  
  // 更新反馈信息
  updateScrollFeedback(container, feedbackEl);
}

// 更新实时反馈
function updateScrollFeedback(container, feedbackEl) {
  const { scrollTop, scrollHeight, clientHeight } = container;
  
  if (scrollTop === 0) {
    feedbackEl.textContent = '已滚动到顶部';
  } else if (scrollTop + clientHeight >= scrollHeight) {
    feedbackEl.textContent = '已滚动到底部';
  } else {
    feedbackEl.textContent = `已${direction === 'up' ? '向上' : '向下'}滚动`;
  }
}