directory search
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
characters

对创建可访问内容的 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>


Previous article: Next article: