6.2 无障碍访问 (Accessibility)

`) 与模态框本身关联起来，屏幕阅读器在聚焦到模态框时会首先朗读标题。 * **`aria-hidden="true"` (初始状态)：** 初始状态下，`aria-hidden="true"` 属性隐藏模态框内容，防止屏幕阅读器在模态框未打开时读取其内容。当模态框打开时，Bootstrap 的 JavaScript 会移除或设置为 `aria-hidden="false"`。 * **`tabindex="-1"`：** 阻止模态框在页面初始加载时被 Tab 键选中，直到模态框被触发打开。 * **关闭按钮的 `aria-label="Close"`：** 为模态框的关闭按钮提供描述性文本，屏幕阅读器用户可以理解按钮的功能。 * **关闭按钮的 `span aria-hidden="true">×`：** 使用 `aria-hidden="true"` 隐藏关闭按钮的视觉图标 (×)，因为 `aria-label="Close"` 已经提供了足够的信息，无需重复朗读图标。 **Graph TD 图示：模态框 ARIA 属性** ```mermaid graph TD A[div.modal] --> B[role="dialog"]; A --> C[aria-labelledby="exampleModalLabel"]; A --> D[aria-hidden="true"]; A --> E[tabindex="-1"]; F[button.close] --> G[aria-label="Close"]; F --> H[span aria-hidden="true"] style A fill:#f9f,stroke:#333,stroke-width:2px style F fill:#ccf,stroke:#333,stroke-width:2px linkStyle 0,1,2,3,4 stroke:#999,stroke-width:1px; linkStyle 5,6 stroke:#999,stroke-width:1px; ``` **常用的 ARIA 属性类型及其在 Bootstrap 中的应用：** * **Roles (角色)：** 定义元素的语义角色，例如 `role="button"`、`role="dialog"`、`role="navigation"` 等。 * **States (状态)：** 描述元素的当前状态，例如 `aria-expanded="true"` (展开状态)、`aria-disabled="true"` (禁用状态)、`aria-checked="true"` (选中状态) 等。 * **Properties (属性)：** 描述元素的特性或与其他元素的关系，例如 `aria-label` (标签)、`aria-labelledby` (标签关联)、`aria-describedby` (描述关联)、`aria-controls` (控制元素)、`aria-owns` (拥有元素) 等。 #### 3. 键盘导航 Bootstrap 组件设计时就考虑了键盘导航的易用性。 **关键点：** * **Tab 键顺序：** 确保页面元素的 Tab 键顺序逻辑清晰，符合用户从上到下、从左到右的阅读习惯。 * **焦点指示器：** Bootstrap 默认提供清晰的焦点指示器 (focus outline)，当用户使用键盘导航时，可以明确看到当前聚焦的元素。 * **组件的键盘操作：** 例如，导航菜单可以使用方向键展开子菜单，模态框可以使用 Esc 键关闭，轮播图可以使用左右箭头键切换图片等。 **实践建议：** * **避免使用 `tabindex="-1"` 过度：** `tabindex="-1"` 可以将元素从 Tab 键顺序中移除，但应谨慎使用，避免破坏键盘导航的流畅性。通常用于程序化控制焦点或移除非交互元素的焦点。 * **测试键盘导航：** 在开发过程中，务必使用键盘（Tab 键、方向键、Enter 键、Space 键等）测试所有交互组件，确保操作流畅且符合预期。 #### 4. 颜色对比度 Bootstrap 的默认配色方案和颜色工具类旨在提供足够的颜色对比度，符合 WCAG (Web Content Accessibility Guidelines) 的要求。 **关键点：** * **文本与背景对比度：** 确保文本颜色和背景颜色之间有足够的对比度，通常建议达到 4.5:1 (AA 级) 或更高 (AAA 级)。 * **非文本内容对比度：** 对于图标、图形等非文本内容，也应保证与背景的对比度，通常建议达到 3:1。 * **颜色工具类：** Bootstrap 提供了丰富的颜色工具类 (如 `.text-primary`, `.bg-success` 等)，可以方便地调整文本和背景颜色。 **实践建议：** * **使用颜色对比度检查工具：** 可以使用在线工具 (如 WebAIM Contrast Checker) 或浏览器插件 (如 WCAG Color Contrast Analyzer) 检查颜色对比度。 * **自定义颜色方案时注意对比度：** 如果需要自定义 Bootstrap 的颜色方案，务必考虑颜色对比度，并进行测试。 * **避免仅使用颜色传递信息：** 不要仅仅依靠颜色来传递重要信息，例如错误提示或状态指示，应同时使用文本或其他视觉元素。 #### 5. 表单无障碍 Bootstrap 提供了强大的表单组件和工具类，方便开发者创建无障碍表单。 **关键点：** * **`` 元素：** 使用 `` 元素为每个表单控件添加清晰的标签，并使用 `for` 属性将标签与对应的表单控件关联起来。 * **错误提示：** 当表单验证失败时，提供清晰的错误提示信息，并使用 ARIA 属性 (如 `aria-describedby` 或 `aria-live`) 将错误信息与表单控件关联起来。 * **提示信息：** 为表单控件提供必要的提示信息 (如输入格式、要求等)，可以使用 `aria-describedby` 属性将提示信息与表单控件关联起来。 * **`required` 属性：** 使用 HTML5 的 `required` 属性标记必填字段，浏览器和辅助技术可以识别并提示用户。 **示例：无障碍表单** ```html

邮箱地址 我们绝不会与任何人分享您的邮箱。

密码

记住我

提交 ``` **详解：** * **``：** 使用 `` 元素，`for` 属性值与输入框的 `id` 属性值 (`exampleInputEmail1`) 匹配，将标签与输入框关联。 * **`aria-describedby="emailHelp"`：** 使用 `aria-describedby` 属性将提示信息 `` 与邮箱输入框关联，屏幕阅读器在聚焦到输入框时会朗读提示信息。 **Graph TD 图示：表单无障碍属性** ```mermaid graph TD A[label for="email"] --> B[input id="email"]; C[small id="emailHelp"] --> D[input aria-describedby="emailHelp"]; style A fill:#f9f,stroke:#333,stroke-width:2px style D fill:#ccf,stroke:#333,stroke-width:2px linkStyle 0 stroke:#999,stroke-width:1px; linkStyle 1 stroke:#999,stroke-width:1px; ``` #### 6. 图片和媒体的无障碍 **图片 (Images):** * **`alt` 属性：** 为 `` 标签添加 `alt` 属性，提供图片的文本替代描述。 * **信息性图片：** `alt` 属性应简洁准确地描述图片内容和功能。 * **装饰性图片：** 如果图片仅为装饰目的，可以将 `alt` 属性设置为空字符串 (`alt=""`)，告知屏幕阅读器忽略该图片。 **媒体 (Media - 音频/视频):** * **字幕 (Captions/Subtitles)：** 为视频提供字幕，可以使用 `` 元素或外部字幕文件。 * **音频描述 (Audio Descriptions)：** 为视频的关键视觉信息提供音频描述，可以使用独立的音频描述轨道或集成到主音频轨道中。 * **文本稿 (Transcripts)：** 为音频和视频提供完整的文本稿，方便听觉障碍用户阅读。 **示例：图片 `alt` 属性** ```html ``` **示例：视频字幕** ```html 您的浏览器不支持 HTML5 视频标签。 ``` ### 6.2.4 无障碍访问测试与验证 完成网站开发后，进行无障碍访问测试和验证至关重要。 **常用的测试方法和工具：** * **自动化测试工具：** * **WAVE (Web Accessibility Evaluation Tool):** 在线工具和浏览器插件，可以自动检测页面中的无障碍问题。 * **Axe (Deque Systems):** 浏览器插件和 JavaScript 库，功能强大，可以检测多种无障碍问题。 * **Google Lighthouse:** Chrome 开发者工具的一部分，可以进行性能、PWA、SEO 和无障碍访问的审计。 * **人工测试：** * **键盘导航测试：** 使用键盘 (Tab 键、方向键等) 浏览和操作网站，检查导航顺序和焦点指示是否清晰。 * **屏幕阅读器测试：** 使用屏幕阅读器 (如 NVDA, JAWS, VoiceOver) 浏览网站，检查内容是否可访问，语义是否正确，交互是否流畅。 * **颜色对比度检查：** 使用颜色对比度检查工具检查文本和背景颜色、非文本内容的对比度是否符合 WCAG 要求。 * **表单测试：** 测试表单的标签、错误提示、提示信息是否清晰易懂，是否与表单控件正确关联。 **持续改进：** 无障碍访问不是一次性的任务，而是一个持续改进的过程。建议在网站开发的每个阶段都进行无障碍访问的考虑和测试，并根据测试结果不断优化和改进。 ### 6.2.5 总结 Bootstrap 框架为开发者提供了强大的工具和组件，可以帮助构建更加无障碍的 Web 应用。通过深入理解无障碍访问的原则，并结合 Bootstrap 的特性和最佳实践，开发者可以有效地提升网站的包容性，让所有用户都能平等地访问和使用 Web 内容。 **关键要点回顾：** * **语义化 HTML 结构是基础。** * **ARIA 属性增强动态内容和自定义组件的可访问性。** * **键盘导航的易用性至关重要。** * **颜色对比度应符合 WCAG 标准。** * **表单需要清晰的标签、提示和错误提示。** * **图片和媒体需要提供文本替代、字幕、音频描述等。** * **持续进行无障碍访问测试和验证。** 希望本文能够帮助您更好地理解和实践 Bootstrap 的无障碍访问特性，构建更加普惠和友好的 Web 体验。