HTML 结构示例：

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        第 1 节标题
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>这里是第 1 节的内容。</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        第 2 节标题
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>这里是第 2 节的内容。</p>
    </div>
  </div>
</div>

2. 用于动态内容的 ARIA 属性

ARIA 角色和状态对于告知辅助技术手风琴的行为至关重要。

• `role="button"`：在用于切换内容的交互元素（按钮）上使用。
• `aria-expanded`：当内容面板可见时设置为 `true`，隐藏时设置为 `false`。这直接向屏幕阅读器传达状态。
• `aria-controls`：在按钮上使用，引用其控制的内容面板的 `id`。这建立了一个程序化的链接。
• `aria-labelledby`：在内容面板上使用，引用控制它的按钮的 `id`。这创建了一个双向链接。
• `role="region"`：在内容面板上使用。这表明该内容是页面的一个可感知区域。
• `aria-hidden`：虽然 `aria-expanded` 是控制可见性状态的首选，但 `aria-hidden="true"` 可用于当前未显示的内容面板，以防止屏幕阅读器播报它们。然而，通过 CSS (`display: none;`) 妥善隐藏内容或将其从可访问性树中移除是更鲁棒的方法。

关于 `aria-hidden` 与 `display: none` 的说明：在 CSS 中使用 `display: none;` 会有效地将元素从可访问性树中移除。如果您在不使用 `display: none;` 的情况下通过 JavaScript 动态显示/隐藏内容，`aria-hidden` 就变得更加重要。然而，`display: none;` 通常是隐藏内容面板的首选方法。

3. 键盘可操作性

确保用户可以使用标准键盘命令与手风琴进行交互。

• Tab 键导航：手风琴标题应可聚焦，并出现在页面的自然 Tab 键顺序中。
• 激活：在聚焦的手风琴标题上按 `Enter` 或 `Spacebar` 键应能切换其内容面板的可见性。
• 方向键（可选但推荐）：为了获得更佳的体验，可以考虑实现方向键导航：
  • `向下箭头`：将焦点移至下一个手风琴标题。
  • `向上箭头`：将焦点移至上一个手风琴标题。
  • `Home` 键：将焦点移至第一个手风琴标题。
  • `End` 键：将焦点移至最后一个手风琴标题。
  • `向右箭头`（或 `Enter`/`Space`）：展开/折叠当前手风琴项。
  • `向左箭头`（或 `Enter`/`Space`）：折叠当前手风琴项并将焦点移回头标题。

4. 可视化焦点指示器

当手风琴标题获得键盘焦点时，必须有清晰的视觉指示。默认的浏览器焦点轮廓通常足够，但要确保它们没有被 CSS（例如 `outline: none;`）移除，除非提供了替代的、高度可见的焦点样式。

焦点 CSS 示例：

.accordion-button:focus {
  outline: 3px solid blue; /* 或使用满足对比度要求的颜色 */
  outline-offset: 2px;
}

5. 内容可见性与呈现

• 默认状态：决定手风琴区域默认是折叠还是展开。对于常见问题解答或信息密集的内容，初始状态为折叠通常是最佳选择。对于导航或功能摘要，默认展开一个区域可能会有所帮助。
• 视觉提示：使用清晰的视觉提示来表明一个区域是展开还是折叠。这可以是一个改变外观的图标（例如，“+”或“-”号，向上/向下箭头）。确保这些图标也是可访问的（例如，如果它们没有文本，则通过 `aria-label`）。
• 对比度：确保手风琴内的文本内容以及切换按钮满足 WCAG 的对比度要求（普通文本为 4.5:1，大号文本为 3:1）。这对低视力用户至关重要。
• 无内容丢失：当一个区域展开时，确保其内容不会溢出容器或遮挡其他关键内容。

6. 切换时管理焦点

这是一个更高级的方面，但对于无缝体验至关重要。

• 展开：当用户展开一个区域时，考虑将焦点移动到新显示内容中的第一个交互元素上。如果展开的内容包含表单字段或链接，这一点尤其重要。
• 折叠：当用户折叠一个区域时，焦点应返回到被切换的手风琴标题上。这可以防止用户不得不重新导航之前已折叠的区域。

实现焦点管理通常需要使用 JavaScript 来捕获并以编程方式设置焦点。

使用 JavaScript 实现可访问的手风琴

虽然语义化 HTML 和 ARIA 是第一步，但通常需要 JavaScript 来处理动态切换和可能的焦点管理。以下是一个概念性的 JavaScript 方法：

// 手风琴功能的概念性 JavaScript

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // 切换 aria-expanded 状态
      button.setAttribute('aria-expanded', !isExpanded);

      // 切换内容可见性（为可访问性使用 CSS）
      content.style.display = isExpanded ? 'none' : 'block'; // 或使用类切换

      // 可选：展开时的焦点管理
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // 可选：键盘导航（方向键等）也可以在这里实现。
  // 例如，处理 'keydown' 事件。
});

// 初始设置：默认隐藏内容并将 aria-expanded 设置为 false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // 初始隐藏内容
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

JavaScript 的重要注意事项：

• 用于隐藏的 CSS：最佳实践是使用 CSS（例如 `display: none;` 或设置 `height: 0; overflow: hidden;` 以实现更平滑的过渡）来隐藏内容。这确保了内容在不可见时从可访问性树中移除。
• 优雅降级：确保即使 JavaScript 加载或执行失败，手风琴内容仍然是可访问的（尽管可能无法折叠）。语义化的 HTML 应该仍然能提供一定的结构。
• 框架和库：如果使用 JavaScript 框架（React、Vue、Angular）或 UI 库，请查阅其可访问性文档。许多框架都提供了开箱即用或带有特定属性的可访问手风琴组件。

进行可访问性测试

彻底的测试对于确保您的手风琴小部件真正可访问至关重要。

• 自动化工具：使用浏览器扩展（如 Axe、WAVE）或在线检查工具来识别常见的可访问性问题。
• 键盘测试：仅使用键盘（Tab、Shift+Tab、Enter、Spacebar、方向键）来导航和操作手风琴。确保所有交互元素都可访问和可操作。
• 屏幕阅读器测试：使用流行的屏幕阅读器（NVDA、JAWS、VoiceOver）进行测试。听取手风琴的结构和状态变化是如何被播报的。这是否合理？`aria-expanded` 状态是否被正确传达？
• 用户测试：如果可能，让残障用户参与您的测试过程。他们的反馈对于识别实际使用中的问题非常有价值。
• 浏览器和设备测试：在不同的浏览器和设备上进行测试，因为渲染和 JavaScript 的行为可能会有所不同。

全球化视角与本地化

在为全球受众设计时，请考虑以下因素：

• 语言：确保所有文本，包括按钮标签和内容，都清晰、简洁且易于翻译。避免使用习语或具有特定文化背景的引用。
• 内容长度：内容展开会显著影响页面布局。请注意，翻译后的内容可能比原文更长或更短。测试您的手风琴如何处理不同长度的内容。
• 文化 UI 惯例：虽然手风琴的核心功能是通用的，但细微的设计元素在不同文化中可能会有不同的理解。坚持使用成熟的模式和清晰的示能。
• 性能：对于互联网连接较慢地区的用户，请确保您的 JavaScript 经过优化，并且手风琴内的内容不会过度影响初始页面加载时间。

可访问手风琴的示例

许多信誉良好的组织都展示了可访问的手风琴模式：

• GOV.UK 设计系统：GOV.UK 因其对可访问性的承诺而经常被引用，它提供了文档齐全的组件，包括手风琴，这些组件都遵循 WCAG。
• MDN Web Docs：Mozilla 开发者网络提供了关于创建可访问小部件（包括手风琴）的详细指南和示例，并清楚地解释了 ARIA 的用法。
• 大型科技公司的设计系统：像谷歌 (Material Design)、微软 (Fluent UI) 和苹果这样的公司提供的设计系统组件通常会优先考虑可访问性。参考这些可以提供鲁棒的实现模式。

结论

手风琴小部件是组织内容和增强用户体验的强大工具。然而，其动态特性要求在可访问性方面采取认真的方法。通过遵守 WCAG 指南、利用语义化 HTML、正确实现 ARIA、确保鲁棒的键盘导航以及进行彻底的测试，您可以创建出对全球所有人都可用且愉悦的手风琴组件。从一开始就优先考虑可访问性不仅能确保合规性，还能为所有用户带来更具包容性和用户友好性的产品。

请记住，可访问性设计不是事后诸葛，而是优秀设计不可或缺的一部分。通过掌握可访问手风琴小部件的实现，您将为所有用户构建一个更公平、更可用的网络做出贡献。