巅峰霸主 > 在线帮助文档 > bootstrap4.5文档 > Accessibility辅助功能

bootstrap Accessibility辅助功能详细介绍

时间:2020-04-06 14:15:41  来源:bootstrap  作者:烈火大地 点击:
摘要:使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者的标记,其他样式以及所包含的脚本。但是,只要正确执行了这些操作……

辅助功能

简要介绍Bootstrap的功能和创建可访问内容的局限性。

Bootstrap提供了易于使用的现成样式,布局工具和交互式组件的框架,从而使开发人员可以创建视觉上吸引人,功能丰富并且可以直接使用的网站和应用程序。

概述和局限性

使用Bootstrap构建的任何项目的总体可访问性在很大程度上取决于作者的标记,其他样式以及所包含的脚本。但是,只要正确执行了这些操作,就完全有可能使用Bootstrap创建满足WCAG 2.0(A / AA / AAA),第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>

对于视觉上隐藏的交互式控件,例如传统的“跳过”链接,.sr-only可以与.sr-only-focusable该类结合使用。这样可以确保控件一旦聚焦(对于有视力的键盘用户)就变得可见。

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

减少偏移

Bootstrap包括对prefers-reduced-motion媒体功能的支持。在允许用户指定减少运动偏好的浏览器/环境中,Bootstrap中的大多数CSS过渡效果(例如,当打开或关闭模式对话框时或旋转木马中的滑动动画时)都将被禁用。

额外资源

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部