Solid设计系统中对话框组件的无障碍优化实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07045/article/details/148376718

Solid设计系统中对话框组件的无障碍优化实践

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

前言

在现代Web开发中，对话框(Dialog)组件作为重要的交互元素，其无障碍访问性(A11y)直接影响用户体验。Solid设计系统针对sd-dialog组件进行了一系列无障碍优化，本文将深入解析这些改进措施的技术实现细节。

核心优化点

1. 定时关闭对话框的改进

传统实现中，定时关闭对话框的按钮通常被完全禁用(disabled)，这会导致屏幕阅读器无法聚焦该按钮，用户无法获知倒计时信息。优化方案采用以下技术手段：

<div id="countdown">
  4秒后可关闭...
</div>

<button aria-disabled="true" aria-describedby="countdown">
  关闭
</button>

关键技术点：

使用aria-disabled而非disabled属性，保持按钮可聚焦
通过aria-describedby关联倒计时提示文本
视觉上仍呈现禁用状态，保持UI一致性

2. 标题属性的智能处理

对话框标题的无障碍处理优化包括：

当设置headline属性时，自动生成适当的ARIA标签
未设置headline时，优先使用aria-labelledby进行标注
确保aria-label不会意外覆盖aria-labelledby的声明

3. 焦点管理优化

虽然原始需求中提到要移除相关说明，但实际上良好的焦点管理仍是对话框无障碍的核心：

打开时焦点自动移至第一个可交互元素（通常是关闭按钮）
使用JavaScript监听Tab键，保持焦点在对话框内循环
关闭后将焦点返回到触发元素

实现细节

定时关闭对话框的实现

对于需要倒计时关闭的对话框，推荐采用以下结构：

class SdDialog extends HTMLElement {
  constructor() {
    super();
    // 初始化倒计时
    this.countdown = 5;
    this.countdownElement = document.createElement('div');
    this.countdownElement.id = 'countdown-' + this.id;
    this.updateCountdownText();
  }

  updateCountdownText() {
    this.countdownElement.textContent = 
      `${this.countdown}秒后可关闭...`;
  }

  startCountdown() {
    const timer = setInterval(() => {
      this.countdown--;
      this.updateCountdownText();
      if (this.countdown <= 0) {
        clearInterval(timer);
        this.closeButton.removeAttribute('aria-disabled');
        // 更新样式和交互状态
      }
    }, 1000);
  }
}

ARIA属性动态管理

通过观察器动态管理ARIA属性：

static get observedAttributes() {
  return ['headline'];
}

attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'headline') {
    if (newValue) {
      this.setAttribute('aria-label', newValue);
    } else {
      this.removeAttribute('aria-label');
      // 确保aria-labelledby生效
    }
  }
}