目录搜索
Getting startedAccessibility(无障碍)Browsers and devices(浏览器和设备)Build tools(构建工具)Contents(内容)Download(下载)JavaScriptTheming Bootstrap(主题Bootstrap)WebpackComponents: AlertsAlerts(警报)Components: BadgesBadges(徽章)Components: BreadcrumbBreadcrumbComponents: Button groupButton group(按钮组)Components: ButtonsButtons(按钮)Components: CardsComponents: CarouselCards(卡)Carousel(圆盘传送带)Components: CollapseCollapse(折叠)Components: DropdownsDropdowns(下拉菜单)Components: FormsForms(表单)Components: Input groupInput group(输入群组)Components: Input groupJumbotron(广告大屏幕)Components: List groupList group(列表组)Components: ModalModal(互动视窗)Components: NavbarNavbar(导航栏)Components: NavsNavs(导航栏)Components: PaginationPagination(分页)Components: PopoversPopovers(弹出框)Components: ProgressProgress(进度条)Components: ScrollspyScrollspy(滚动监听)Components: TooltipsTooltips(提示工具)ContentCode(代码)Figures(图片区)Images(图片)Reboot(重置)Tables(表格)Typography(排版)LayoutGrid(网格)Layout(布局)Media object(多媒体对象)Utilities for layout(排版通用类别)MigrationMigrating to v4(迁移到v4)UtilitiesBorders(边框)Clearfix(清除浮动)Close icon(关闭图标)Colors(颜色)Display property(显示属性)Embeds(内嵌)Flex(弹性)Float(浮动)Image replacement(图像替换)Position(位置)Screenreaders(荧幕阅读器)Sizing(尺寸)Spacing(间隔)Text(文本)Vertical alignment(垂直对齐)Visibility(能见度)
文字

对创建可访问内容的 Bootstrap 功能和局限性的简要概述。

引导提供了一个易于使用的框架,现成的样式,布局工具,和交互式组件,允许开发人员创建的网站和应用程序是视觉上有吸引力,功能丰富,并可直接访问。

概述和局限性

使用 Bootstrap 构建的任何项目的整体可访问性在很大程度上取决于作者的标记,额外样式以及他们包含的脚本。但是,如果这些已正确实施,则完全可以使用 Bootstrap 创建满足WCAG 2.0(A / AA / AAA),第508节和类似辅助功能标准和要求的网站和应用程序。

结构标记

引导的样式和布局可以应用于广泛的标记结构。本文档旨在为开发人员提供最佳实践示例,以演示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>

对于视觉隐藏的交互式控件,例如传统的“跳过”链接,.sr-only可以与.sr-only-focusable课程相结合。这将确保一旦关注控件(对于有视力的键盘用户),控件就会变得可见。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>


上一篇:下一篇: