辅助功能:在CSS中隐藏内容

作者: xusx 分类: Web 发布时间: 2019-12-03 20:26

Web开发中,可以安全地假设不可避免地要隐藏某些元素或部分内容。 仅使用一种隐藏内容的方式会损害可访问性,因为使用辅助技术的用户将无法像普通屏幕用户那样获得页面的完整上下文。 在本文中,我们将根据可访问性介绍几种隐藏元素的方法。

隐藏所有设备中的内容

使用CSS规则,例如display:none;visibility:hidden;或HTML hidden属性是隐藏元素或部分内容时首先想到的。使用这两个CSS属性将使显示设备和辅助技术(如屏幕阅读器)完全忽略该元素,而不将其呈现给用户。

当然,在某些情况下,我们希望对所有设备隐藏内容。例如,我们可以在手风琴,制表符或其他可切换元素中的元素上使用这些CSS规则。

隐藏屏幕设备中的内容

在某些情况下,我们希望从显示中隐藏一些元素,但是我们希望让辅助技术向用户显示视觉上隐藏的内容。无标签输入就是这种情况的一个例子。标签通常用display:none;来隐藏,但是我们希望辅助技术可以访问标签以便为用户提供更多上下文。

如果我们只想隐藏屏幕设备中的内容,则此解决方案有点笨拙,但非常有效。我们可以使用以下CSS规则:

.hidden--visually {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

隐藏辅助设备中的内容

在某些情况下,我们希望对屏幕阅读器和其他辅助技术隐藏内容。 例如,如果我们有一个图像轮播,在其开头有“上一个”按钮,在中间有一个轮播图像,在结尾有“下一个”按钮,则我们不希望屏幕阅读器按此顺序读出它。 我们可以提供单独的,更易于访问的控件,这些控件在视觉上是隐藏的,但在辅助设备中隐藏了“上一个”和“下一个”按钮。

如果要隐藏辅助设备中的内容,可以使用aria-hidden="true"HTML属性。

注: aria代表无障碍富互联网应用程序。aria隐藏的属性表明元素及其所有后代在浏览器中仍然可见,但对辅助工具(如屏幕阅读器)不可见。

覆盖怪异

重要的是要注意CSS规则,例如display:none;将覆盖aria-hidden="false",并且辅助技术将忽略该内容。

原文:https://dev.to/adrianbdesigns/accessibility-hiding-content-30of

扩展阅读:AngularJS使用ngAria为指令注入共同的可达性属性和提高残疾人用户体验。

https://github.com/angular/angular.js/blob/master/src/ngAria/aria.js

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注