[+]文章目录

可访问性

Bootstrap 遵循统一的 web 标准,另外,通过做一些少量的修改,还可以让使用 辅助设备(AT - ASSISTIVE TECHNOLOGY)上网的人群访问你的站点。

跳过导航区

如果你的导航部分包含很多链接,并且在 DOM 结构上也是排在主内容之前,那么,建议在导航前面添加一个 Skip to main content(直接进入主内容区) 的链接(这篇文章 A11Y Project article on skip navigation links给了简要的解释)。 通过使用 .sr-only 类可以让 “Skip to main content(直接进入主内容区)” 链接在视觉上是不可见的,而 .sr-only-focusable 类可以让这个链接在获得焦点的时候变为可见(对于使用键盘导航的用户)。

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content">
    <!-- The main page content -->
  </div>
</body>

 标题嵌套

当标题嵌套时 (<h1> - <h6>),你的文档的主标题应该是 <h1> 标签。随后的标题逻辑上就应该使用 <h2> - <h6> ,这样,屏幕阅读器就可以构造出页面的内容列表了。

更多信息请参考: HTML CodeSniffer and Penn State's AccessAbility.

色彩对比

当前,Bootstrap 使用的默认颜色组合的对比度(例如各种 styled button 类;一些 基本代码块高亮代码所用的颜色;.bg-primary 上下文背景色 辅助类;和白色背景下默认的链接颜色)都比较低(低于 推荐比例 4.5:1)。这会导致视力低下和色盲用户在使用时产生困难。这些默认颜色可能需要进行修改,以增强对比度和清晰度。


« 前一篇