轮播图的无障碍性挑战
在网页设计中，轮播图（carousel）是一种常见的组件，用于水平展示有限数量的内容项，并通过点击按钮进行切换。然而，当轮播图采用 overflow: hidden 等css属性来隐藏非可见内容时，会给屏幕阅读器用户带来无障碍性问题。屏幕阅读器通常会读取dom中所有可访问的内容，即使这些内容在视觉上被隐藏。这意味着，一个只显示三项的轮播图，如果背后有六项内容，屏幕阅读器可能会一次性读出全部六项，导致用户混淆，无法判断当前可见的内容。
屏幕阅读器与隐藏内容的冲突
overflow: hidden 的局限性
单纯使用 overflow: hidden 来视觉上裁剪内容，并不能阻止屏幕阅读器访问这些内容。屏幕阅读器会遍历整个文档对象模型（DOM），并朗读所有非 aria-hidden 或 display: none 的元素。因此，即使内容在屏幕上不可见，屏幕阅读器依然会将其朗读出来。
aria-hidden 的副作用：列表总数误报
为了解决上述问题，开发者可能会尝试为非可见的轮播项动态添加 aria-hidden="true" 属性。这种方法确实能阻止屏幕阅读器朗读被隐藏的内容。然而，它引入了一个新的问题：当屏幕阅读器遇到一个列表（
- ）时，它会报告列表中实际可访问的项数。如果一个包含六项的列表，通过 aria-hidden 隐藏了三项，屏幕阅读器将报告“列表 3 项”，而非“列表 6 项”。
对于屏幕阅读器用户而言，如果轮播图当前只显示三项，那么屏幕阅读器报告“列表 3 项”是符合逻辑且正确的。试图“欺骗”屏幕阅读器报告一个不准确的总数（例如，当只显示三项时报告六项）反而会造成更大的困惑。因此，关键在于如何清晰地向用户传达当前可见内容在整个序列中的位置和总数。
方案一：将轮播图视为分页列表（推荐）
将轮播图设计为分页列表是处理无障碍性问题的推荐方法。这意味着屏幕阅读器只会访问当前可见的“页”中的内容，同时通过其他机制告知用户总页数或总项目数。
核心理念：屏幕阅读器应只报告可见项目
当轮播图只显示三项时，屏幕阅读器应该报告“列表 3 项”。这是符合用户预期的。为了提供完整的上下文，我们需要额外地向用户告知“这3项是总共6项中的一部分”，或者“这是第1页，总共2页”。
关键实现细节
- 明确的可见范围指示： 在轮播图附近添加一个视觉上可能隐藏但对屏幕阅读器可见的元素（使用 aria-live 区域），明确告知用户当前显示的项目范围和总数，例如：“当前显示第 1 到 3 项，共 6 项。”或“当前是第 1 页，共 2 页。”
- 可访问的导航按钮： “上一页”和“下一页”按钮必须是可聚焦的，并且具有清晰的 aria-label 属性，以便屏幕阅读器用户理解其功能。
- 禁止自动轮播： 避免内容在用户未干预的情况下自动切换。自动轮播对于屏幕阅读器用户而言极具干扰性，可能导致他们在阅读时内容突然消失或改变。
- 整页式内容切换： 理想情况下，点击导航按钮应切换一整页的内容（例如，一次切换三项），而非一次只切换一项。这样能更好地模拟分页体验，避免用户混淆。
- 技术隐藏：优先使用 display: none： 为了确保被隐藏的内容完全从无障碍树中移除，最佳实践是使用 display: none CSS属性，而非 overflow: hidden 或单独的 aria-hidden。display: none 会将元素从渲染树和无障碍树中移除，确保屏幕阅读器不会访问它。
React 代码示例：实现分页逻辑与 display: none
以下是一个React组件示例，演示如何将轮播图实现为分页列表，并确保其无障碍性：
import React, { useState } from 'react';
const Carousel = () => {
const itemsPerPage = 3; // 每页显示的项目数量
const allItems = [
{ id: 1, text: '项目 1：这是轮播图中的第一个长文本内容。' },
{ id: 2, text: '项目 2：这是轮播图中的第二个长文本内容。' },
{ id: 3, text: '项目 3：这是轮播图中的第三个长文本内容。' },
{ id: 4, text: '项目 4：这是轮播图中的第四个长文本内容。' },
{ id: 5, text: '项目 5：这是轮播图中的第五个长文本内容。' },
{ id: 6, text: '项目 6：这是轮播图中的第六个长文本内容。' },
{ id: 7, text: '项目 7：这是轮播图中的第七个长文本内容。' },
{ id: 8, text: '项目 8：这是轮播图中的第八个长文本内容。' },
];
const [currentStartIndex, setCurrentStartIndex] = useState(0); // 当前页第一个项目的索引
const totalItems = allItems.length;
const totalPages = Math.ceil(totalItems / itemsPerPage);
const currentPage = Math.floor(currentStartIndex / itemsPerPage) + 1;
const handleLeftClick = () => {
setCurrentStartIndex(prevIndex => Math.max(0, prevIndex - itemsPerPage));
};
const handleRightClick = () => {
// 确保不会超出总项目数，且最后一页可能不满 itemsPerPage
setCurrentStartIndex(prevIndex =>
Math.min(totalItems - (totalItems % itemsPerPage === 0 ? itemsPerPage : totalItems % itemsPerPage), prevIndex + itemsPerPage)
);
};
return (
{/*
使用 aria-live 区域向屏幕阅读器用户动态宣布当前可见的项目范围。
visually-hidden 类用于在视觉上隐藏此文本，但保持其对屏幕阅读器可见。
*/}
{`当前显示第 ${currentStartIndex + 1} 到 ${Math.min(currentStartIndex + itemsPerPage, totalItems)} 项，共 ${totalItems} 项。`}
{allItems.map((item, index) => {
const isVisible = index >= currentStartIndex && index < currentStartIndex + itemsPerPage;
return (
);
})}
{/* 为视觉用户显示页码，但对屏幕阅读器隐藏，因为 aria-live 区域已提供信息 */}
);
};
export default Carousel;
/*
以下是 .visually-hidden CSS 类的定义，用于在视觉上隐藏元素，但保持其对屏幕阅读器可见。
通常将其放置在全局 CSS 文件中。
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap; // 防止文本换行
}
*/代码说明：
- itemsPerPage 控制每页显示的项目数量。
- currentStartIndex 跟踪当前可见页的起始索引。
- handleLeftClick 和 handleRightClick 函数实现整页切换逻辑。
- 每个
- 元素根据 isVisible 状态动态应用 display: none 样式，确保非可见项从无障碍树中移除。
- aria-live="polite" 的 div 用于在页面切换时，以非紧急方式向屏幕阅读器用户宣布当前页码和总数。aria-atomic="true" 确保整个区域的内容被整体朗读。
- 导航按钮添加了 aria-label 属性和 disabled 状态，提升了可访问性和用户体验。
- .visually-hidden 类是一个常用的无障碍模式，用于在视觉上隐藏元素但仍使其可被屏幕阅读器访问。
方案二：允许屏幕阅读器读取所有内容
尽管不推荐，但在某些特定场景下，可以考虑让屏幕阅读器始终读取轮播图中的所有内容。这种方法通常会简化开发，但需要在其他方面进行仔细考虑，以避免无障碍性问题。
适用场景与潜在问题
如果轮播图的内容数量不多，或者其主要功能并非“分页浏览”，而是提供一个可滚动的区域，那么这种方式可能适用。然而，它可能导致屏幕阅读器用户需要听完所有内容才能到达轮播图之外的元素，从而降低效率。
注意事项
- 跳过机制的重要性： 如果轮播图内容较多，必须确保用户能够轻松跳过整个轮播图或其中的单个项目。良好的页面结构（如使用标题、地标等）有助于屏幕阅读器用户快速导航。
-
导航按钮的处理： 在这种模式下，左右导航按钮对屏幕阅读器用户而言可能变得多余。可以考虑：
- 从无障碍树中隐藏： 使用 aria-hidden="true" 隐藏按钮，但需注意这会使语音控制用户也无法使用。
