Bootstrap无障碍功能

2023-11-10 55

Bootstrap是一个易于使用的框架,它包含了开箱即用的样式、布局工具和交互式组件,让开发者能够轻松创建具有视觉吸引力、功能丰富且无障碍的网站和应用程序。

一、总览/局限性

使用 Bootstrap 所构建的任何项目的总体无障碍程度大部分取决于作者所使用的标记(markup)、附加的样式以及脚本。但是,如果这些都得到了正确的实施,则完全可以基于 Bootstrap 创建符合 WCAG 2.1 (A/AA/AAA)、Section 508 以及类似无障碍标准和要求的网站及应用程序。

二、结构化标记

Bootstrap 的样式和布局能够适用于广泛的标记(markup)结构。本教程旨在为开发者提供最佳实践示例,以演示 Bootstrap 的用法并配以示例来说明语义化标记(markup),同时包含了对潜在的无障碍方面的问题的解决方法。

三、交互式组件

Bootstrap 的交互式组件(例如模态对话框、下拉菜单和自定义工具提示)都被设计为支持使用触控、鼠标和键盘的用户。通过使用相关的 WAI-ARIA 中定义的角色(roles)和属性(attributes),这些组件还能够被使用辅助技术(例如屏幕阅读器)的用户所立即并操控。

由于 Bootstrap 的组件被专门设计地相当通用,因此,开发者需要添加额外的 ARIA 中定义的角色(roles)和属性(attributes)以及 JavaScript 代码,以便更准确地传达组件的确切性质和功能。这些通常在文档中有标注。

四、色彩对比度

Bootstrap 默认调色板中所包含的大部分颜色(被用在整个框架中,例如按钮变体、警告框变体、表单校验指示器等)在浅色背景下使用时,可能会导致颜色对比度的 不足 (低于 WCAG 2.1 规定的文本颜色对比度为 4.5:1 以及 WCAG 2.1 规定的非文本的颜色对比度 3:1 的建议值)。 建议开发者针对所使用的颜色进行测试,并在必要的时候手动修改或扩展这些默认的颜色,以确保有足够的色彩对比度。

五、隐藏可见内容

在需要向非视觉用户传达额外视觉信息或线索的情况下,可以使用 “.sr-only” 类来设置样式。该类用于在视觉上隐藏内容,但仍然可以通过辅助技术(如屏幕阅读器)进行访问,从而确保网站或应用程序对所有用户都更加包容和友好。这种方法特别适用于需要通过颜色等视觉元素表达含义的情况。

<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>

对于需要在视觉上隐藏的交互式组件,例如传统的 “skip” 链接,.sr-only 可以与 .sr-only-focusable 类一起组合使用。确保该组件在获得焦点后(视觉良好但使用键盘的用户)变成可见的。

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

六、Reduced motion

Bootstrap 包含了对 prefers-reduced-motion 媒体功能的支持。在允许用户设置动画减弱(reduced motion)的浏览器/环境中,Bootstrap 中的大多数 CSS 过渡效果(例如,当模态对话框打开或关闭时,或者旋转木马(carousels)中的滑动动画)将被禁用,而有意义的动画效果(例如 spinners)将被减速。

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
Bootstrap无障碍功能
上一篇: Bootstrap Webpack
Bootstrap无障碍功能
下一篇: Bootstrap布局