bootstrap使用手册
无障碍浏览
Bootstrap是一种流行的CSS框架,可以帮助开发者在网站建设、网页设计、网站开发和小程序开发中快速构建响应式、易于维护和易于访问的界面,包括无障碍浏览,以提供更好的用户体验和可访问性。
有兴趣与 DEVDIY 开发者合作吗?
Bootstrap对创建可友好访问内容的功能和限制的简要概述。
概述和限制
使用Bootstrap构建的任何项目的整体可访问性在很大程度上取决于作者的标记、额外的样式和脚本。但是,如果已经正确实现了这些功能,则完全可以使用Bootstrap创建实现Web内容无障碍指南WCAG 2.0 (A/AA/AAA)、Section 508,第508节和类似的可友好访问性标准和要求的网站和应用程序。
结构标记
Bootstrap的造型和布局可以应用于各种标记结构。本文档旨在为开发人员提供最佳实践示例,以演示使用Bootstrap本身并说明适当的语义标记,包括可以解决潜在的可访问性问题的方法。
互动组件
Bootstrap的交互式组件(如模态对话框,下拉菜单和自定义工具提示)设计用于触摸,鼠标和键盘用户。通过使用相关的 WAI-ARIA 角色和属性,这些组件也应该使用辅助技术(如屏幕阅读器)可以理解和操作。
由于Bootstrap的组件有意设计为相当通用,因此作者可能需要包含进一步的ARIA角色和属性以及JavaScript行为,以更准确地传达其组件的精确性质和功能(通常在文档中注明)。
颜色对比
目前构成Bootstrap默认调色板的大多数颜色 - 在整个框架中用于诸如按钮变化,警报变化,形式验证指示符之类的功能,导致颜色对比度不足(低于推荐的WCAG 2.0色对比度为4.5:1)光背景。作者将需要手动修改/扩展这些默认颜色以确保足够的色彩对比度。
视觉隐藏内容
支持视觉隐藏的内容、但保持可访问的辅助技术,如屏幕阅读器,可以使用.sr-only
类风格。在需要向非视觉用户传达额外的视觉信息或提示(例如通过使用颜色表示的含义)的情况下,这通常很有用。
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
减少动作
加入 DEVDIY 开发者社区
利用 DEVDIY 资源快速拓展您的业务有兴趣与 DEVDIY 开发者合作吗?