屏幕阅读器能看到背面可见性吗?

2024-01-07

我正在研究可访问性并发现visibility:hidden屏幕阅读器不会读取。有谁知道如果backface-visibility:hidden将被屏幕阅读器跳过,或者我可以使用它(与溢出:隐藏一起)来提供仅屏幕阅读器的文本吗?


简答

在能够使用屏幕阅读器访问文本方面,它似乎工作得很好,但我认为用例非常有限,您需要在投入生产之前对其进行广泛的测试。

我想不出它实际上有用的场景,但是我很想在我的工具包中添加另一个工具,所以如果您想到一个有用的场景,请告诉我!

更长的答案

我刚刚做了一个快速测试,Google Chrome 中的 NVDA 和 JAWS 都读取了翻转 180 度的 div 的内容,然后用backface-visibility:hidden。现在这不是一个非常广泛的测试,因此在您认为它可用之前需要进行更多的调查,测试屏幕阅读器和浏览器的多种组合以确保其一致工作。

但是,为什么要在现有方法上这样做呢?这我向大家推荐的 CSS 课程 https://stackoverflow.com/a/62109988/2702894它一直可以追溯到 IE6,除了使事物不可见之外,它还可以做很多事情。

clip-path: and clip(对于较旧的浏览器),再加上width and height of 1px作为后备措施,需要确保该项目不占用屏幕上的物理空间。我们还添加border: 0确保没有边框显示,并且边框不会增加该项目在屏幕上占用的空间,再加上padding and margin设置为 0 的原因与占用屏幕空间的原因相同。最后我们显然需要overflow: hidden为了确保没有任何内容从我们应用该类的元素中溢出,否则这一切都是毫无意义的!

我链接的答案中解释了其他属性的原因,但希望您明白仅屏幕阅读器文本背后的主要概念是确保它不占用当前屏幕上的空间,因此不会影响布局同时仍然可供屏幕阅读器访问(添加到辅助功能树中)。

任何尺寸问题都不能通过翻转项目并使用来解决backface-visibility: hidden,它仍然占用页面上相同的空间。

我还建议您必须考虑性能,因为旋转页面上的多个项目可能会导致它们必须由浏览器呈现,尽管它们是不可见的(我不知道是否是这种情况,但这只是另一个想法!) 。 200 个不可见项目可能会对速度较慢的设备的性能产生显着影响。

最后最大的问题 - 大多数屏幕阅读器仅使用文本<span>在句子、超链接等中添加额外信息的元素。它似乎不适用于<span>在我在下面进行的快速测试的一个段落中没有添加display: inline-block or display: block,两者都不是或哪个是个好主意。

body {
  padding: 50px;
  font-size: 50px;  
}

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.hide-rear {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}
<div class="flip">I am visible but reversed</div>
<hr/>
<!-- hidden -->
<div class="flip hide-rear">I am hidden but still take up space on the screen</div>
<hr/>
<p>How does it behave if I use An inline span? <span class="flip hide-rear">If you can see this then it doesn't work!</span></p>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

屏幕阅读器能看到背面可见性吗? 的相关文章

  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 使用 实现可访问性的更好做法是什么?

    我有一个下载链接 但我找不到任何良好的可访问解决方案来说明如何处理这种情况 我遵循一个共同的经验法则 按钮做事 链接去地方 我的情况是 我有一个触发文档下载的按钮 同一页面 我相信这应该是一个具有按钮角色的锚点 因为它明确不触发重定向或导航
  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch
  • 如何更改文本选择背景颜色

    我的意思是 当您选择一些 HTML 文本时 背景中会有一种颜色告诉您选择了哪个文本 怎么可能通过CSS来改变它呢 我需要它是白色的 透明的 我已经看到这样做了 您可以使用某些 CSS 选择器来更改所选文本的 CSS 属性 我对此进行了测试
  • 单击时更改 CSS 属性

    我试图在单击另一个元素时更改一个元素的 CSS 我进行了很多搜索 但没有任何效果是完美的 目前我正在使用下面的代码 但它不起作用 谁能告诉我我错过了什么 div hello world div img src zoom png functi
  • 禁用单一样式的 CSS 转换?

    为单个样式启用 CSS 过渡非常容易 但是是否可以为单个样式禁用它们 单一样式过渡的常用方法是 div transition opacity 0 5s 但我想做的是设置一个全局转换 然后为单个属性禁用它 也许是这样的 div transit
  • 弯曲方向等高行:列

    我有一个带有两个弹性项目的弹性布局 显示为行 flex direction column 这些物品应该有一个最小高度 但它们应该保持其中一个物品生长所需的相同高度 看这个 JSFiddle https jsfiddle net 958vxh
  • 更改链接悬停时的正文背景颜色

    当鼠标悬停在页面上时如何更改页面背景a 我正在寻找仅 css 的解决方案 我知道你可以通过 css 到达子元素 但我不知道如何 是否可以到达主体 看看这个DEMO http jsfiddle net bhavuksuthar bjsvhze
  • 在 TCPDF 中设置背景颜色

    我已经手动设置了第一页的背景颜色 如下所示 pdf gt AddPage pdf gt SetFillColor 52 21 0 76 pdf gt Rect 0 0 pdf gt getPageWidth pdf gt getPageHe
  • HTML 覆盖高度覆盖整个可见页面

    我有一个使用 AJAX 加载一些内容的网页 我想在加载过程中显示带有加载指示器的覆盖层 以便用户无法与页面的大部分内容交互 除了顶部的菜单 我正在使用 jQuery 和jQuery BlockUI 插件 http malsup com jq
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne

随机推荐

  • 访问 SCD 中的静态文件

    In the NET CORE应用程序 我正在使用静态文件wwwroot文件夹 运行它时dotnet run the index html文件显示流畅且正常localhost port 但在将应用程序发布为SCD独立的开发包 并运行 exe
  • Razor 智能感知不适用于自定义 ASP.NET MVC 构建

    我能够创建 ASP NET MVC 的自定义构建并在 Web 应用程序中使用它 但是 我似乎无法弄清楚如何让 Razor 智能感知正常工作 如果您按照以下步骤操作 Razor 智能感知将仅显示网页信息 而不显示其他内容 HTML 帮助程序等
  • 使用字符串的值创建新的表单对象

    我有一个已启动的主表单 然后它可以转到我创建的任何其他表单 但最重要的是 我编写了一个类 我称之为它返回一个字符串 其中包含要转到的表单名称 目前我还没有这个工作 所以我将像这样从一个表单转到另一个表单 静态编写的链接代码 this Hid
  • 在 redux 中使用不可变 js(toJS 和 from JS)的正确方法

    我想知道这是否是正确的使用方法immutable js与 redux 和reselect also redux saga 具体来说我想知道toJS 和来自fromJS 以及在哪里使用它们 我的想法是 I use toJS 向传奇发送数据时
  • 当数据更改时,如何在 DataGrid 中保持选择?

    我有一个 DataGrid 并将 DataProvider 设置为我的数据 当我的数据更改时 DataGrid 会丢失所选行 并且滚动条会跳回到顶部 如何保持选择和滚动位置 如果你只是想保住位置 在任何更改数据的函数中 首先捕获选定的索引
  • 如何让ViewSwitcher只包裹当前显示的视图高度?

    我正在使用一个视图切换器 http developer android com intl fr reference android widget ViewSwitcher html这让我可以轻松地在两个不同的内置动画的列表标题之间来回翻转
  • 通过 http 标头传递真实性令牌

    我有一个使用令牌来验证用户身份的 Rails 应用程序 目前我正在将令牌作为参数传递 我想改变这一点 我相信可以通过 html header 传递它 我不明白如何使用authenticate or request with http tok
  • React Native 应用程序的 UI(在 iOS 上)滞后并且 fps 速率定期下降

    我的 React Native 应用程序的 UI 经常下降 但仅限于 iOS 我附上了一张屏幕截图 显示 UI fps 约为 11 而且它是一个非常稳定的波 并且不断发生多次 这会导致令人烦恼的滞后 例如在过渡 动画或倒计时 如附加屏幕上
  • 未知类型名称字符串 C++

    我是 C 新手 并且在我的程序中获得了一些帮助来比较两个 XML 文件 这是我的代码 include pugixml hpp include
  • Android.mk 应该在哪里?

    在 Android NDK 的文档中 存在以下声明 Android mk 文件位于项目 jni 目录的子目录中 http developer android com ndk guides android mk html http devel
  • 如何在 jQuery.validation 中添加不等于规则

    我想知道如何制作它 以便我可以制定一个字段不等于值的规则 就像我有一个名为 姓名 的字段 所以我不希望 姓名 您的名字 有人知道如何做到这一点吗 谢谢你的帮助 您可以使用自定义方法 如下所示 jQuery validator addMeth
  • UITextField 最大长度

    当我尝试过如何使用 swift 设置可以输入 UITextField 的最大字符数 https stackoverflow com questions 24641982 how to you set the maximum number o
  • PHP ltrim 与字符列表的行为

    我试图使用 php ltrim 函数从字符串中剥离一些开始部分 它工作正常 直到它在冒号 之后得到一个 i 字符 如果它在冒号后面找到 i 它就会忽略 i 字符 我知道可以用 substr 或任何其他方式来完成 但我想知道为什么它会发生在修
  • pageAction 上的 chrome“setBadgeText”

    我正在寻找如何将文本设置为页面操作图标并找到了这个示例 window setInterval function chrome pageAction setIcon imageData draw 10 0 tabId tabId 1000 f
  • 如何删除 ASP.NET Designer.cs 文件?

    我之前参与过没有 designer cs 文件的 VS 项目 现在我在另一台计算机上开始了一个新项目 但无法删除 Designer cs 文件 这真的很烦我 我真的需要它吗 我该如何删除它 一定有某个地方的设置 是的 您可以删除它们 这是方
  • 为什么扩张卷积可以保持分辨率?

    动画来自here https github com vdumoulin conv arithmetic 我想知道为什么扩张卷积声称可以保持分辨率 显然 蓝色的输入是 7x7 绿色的输出是 3x3 EDIT 解决分辨率损失的一种方法是用当前感
  • 从非 Spring 托管 bean 中获取配置值

    我在我的应用程序中使用注释配置 而不是 XML Configuration ComponentScan basePackages com production PropertySource value classpath applicati
  • sqlite3.ProgrammingError:提供的绑定数量不正确。当前语句使用1,并且提供了5个

    我一生都无法弄清楚为什么这是失败的 我知道丑陋的代码 但我只需要把它放在一个学校项目中 def changeusername self i user self user self username str i get exec user p
  • 如何在VS2019中启用.NET Core 3预览版SDK?

    I wanted to try out Blazor I ve installed NET Core 3 0 preview 5 SDK Blazor VS extension to enable project templates I c
  • 屏幕阅读器能看到背面可见性吗?

    我正在研究可访问性并发现visibility hidden屏幕阅读器不会读取 有谁知道如果backface visibility hidden将被屏幕阅读器跳过 或者我可以使用它 与溢出 隐藏一起 来提供仅屏幕阅读器的文本吗 简答 在能够使