1.8、Bootstrap V4自学之路------起步---易用性



易用性

Bootstrap遵循常用的Web标准——用最少的额外付出——创建出能用AT访问的网站。

组件要求

一些常见的HTML元素总是需要基本的易用性辅助增强,通过role以及Aria属性可以实现易用性辅助增强。下面列出了一些频繁使用的。

注意,v4 alpha版本还在开发中,我们将把更多的易用性注解移到这里,带着指向本文档特定章节的链接。

此处说明以后还将会有更多的新内容在此更新。多学多看多实践。

按钮组

为了使辅助技术设备——比如说屏幕阅读器——传达一系列按钮已经被分组了、需要提供适当的role属性。对于按钮组,这将是 role="group",而工具栏应该有一个role="toolbar"我没理解其中意思,mark以后回头看。

此外,组和工具栏必须给定明确的标签,因为,尽管存在正确的role属性,但是大多数辅助技术设备不会播报它们。在此处提供的示例中,我们使用aria-label标签,但是也可以使用替代品,比如说aria-labelledby

跳过导航

如果你的导航条包含有很多链接,而且在DOM中的主体内容之前显示,请在导航栏之前添加一个Skip to main content链接(这个网页A11Y Project article on skip navigation links对它有简单的讲解)。使用.sr-only类会从视觉上隐藏skip链接,而.sr-only-focusable能确保当链接获得焦点时,链接变得可见。

由于 Chrome 和 Internet Explorer 长期存在的一些错误和问题(请分别参见这两篇文章issue 262171 in the Chromium bug tracker和in-page links and focus order),如果需要保证那些被跳过的锚链接是能够得到焦点的,你只需要在代码中添加 tabindex =”-1”来实现这一点。

此外,你可能想显式地禁止一个锚链接出现一个可视的焦点迹象(特别是当前Chrome中,带有tabindex="-1"的元素,当它们被鼠标点击到了之后也会得到焦点),你只需要添加这么一个CSS样式:#content:focus {outline:none;}

请注意,这个bug将影响网页中任何其它的链接。对键盘用户而言,渲染它们没什么用。你可以考虑为所有的其它命名锚(带name的<a>)、HTML片段标识符(ID属性)添加一个类似的权宜修复。HTML片段标识符(ID属性)与命名锚(带name的<a>)有同样的效果。

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

mark一下,干嘛要跳过?

嵌套的标题

如果要使用嵌套标题(<h1> - <h6>),你的文档的主标题必须是一个<h1>。次标题必须依逻辑使用<h2> - <h6>,这样屏幕阅读器就能够为你的网页构建一个内容表。

请继续阅读HTML CodeSniffer 以及Penn State’s Accessability。

按照一个标签的逻辑使用,Bootstrap将自动构建适用于任何支持的平台的显示方式。

更多的资源

  • 针对标识易用性问题的书签”HTML Codesniffer”

  • A11Y项目

  • MDN易用性文档


你可能感兴趣的:(bootstrap,V4,V4,BootstrapV4,BootstrapV4)