首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在VoiceOver Safari浏览器中,“aria-label”下的文本被读取两次

在VoiceOver Safari浏览器中,当页面中的元素有设置"aria-label"属性时,VoiceOver会读取该属性的文本两次。这是因为VoiceOver将"aria-label"属性视为元素的附加文本描述,用于提供更多的可访问性信息。

"aria-label"是一种用于定义元素的可访问名称的属性。它通常用于替代元素的可见文本或图标,为屏幕阅读器用户提供更准确和有意义的信息。通过设置"aria-label"属性,开发者可以确保屏幕阅读器正确地读取元素的名称,提高用户对页面内容的理解和导航。

由于VoiceOver将"aria-label"属性视为元素的附加文本描述,它会将该属性的文本读取两次。第一次读取是作为元素的可访问名称,用于告诉用户该元素的身份和作用。第二次读取是作为元素的附加描述,用于提供更详细的信息或上下文。

"aria-label"属性的使用可以改善网页的可访问性,特别是在无法使用常规文本或图标进行描述的情况下。它在以下场景中非常有用:

  1. 图标按钮:当一个按钮只有一个图标而没有可见文本时,可以使用"aria-label"来定义按钮的名称,使屏幕阅读器用户知道按钮的作用。
  2. 图片链接:对于没有文本描述的图片链接,可以使用"aria-label"属性为链接提供可访问名称,让屏幕阅读器用户了解链接目标。
  3. 动态内容:当网页中的内容是通过JavaScript动态生成或更新的时候,可以使用"aria-label"属性为动态内容提供可访问名称,确保屏幕阅读器能够读取到最新的信息。

腾讯云提供的相关产品中,可用于云计算和可访问性的包括:

  1. Serverless Cloud Function(SCF):SCF是一种事件驱动的无服务器计算服务,可用于构建和运行云端应用程序。它可以与Web应用程序结合使用,通过后端逻辑处理来改善可访问性和用户体验。 产品介绍链接:Serverless Cloud Function (SCF)
  2. Web应用防火墙(WAF):WAF是一种用于保护Web应用程序免受恶意攻击的云安全服务。它可以检测和阻止攻击者对Web应用程序的无效访问,并提供身份验证和访问控制功能,从而提高可访问性和用户数据的安全性。 产品介绍链接:Web应用防火墙 (WAF)

通过使用这些腾讯云产品,开发者可以在云计算环境中实现可访问性功能,并提供更好的用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

京喜小程序首页无障碍优化实践

安卓的 TalkBack 手势与 VoiceOver 有一些差异,后面还会提到…… WAI-ARIA WAI-ARIA 通过浏览器把信息暴露给 accessibility APIs (无障碍API),作为读屏软件的信息源...非文本元素增加描述和角色属性 通过给非文本元素增加描述和角色属性,元素的内容就可以被读屏软件清晰准确地朗读。...整块元素读取 一个元素可能由很多子元素组成。在无障碍模式下,读屏软件只能分别聚焦子元素,单独将每个子元素信息读出来。障碍用户在读屏软件的辅助下,获取到的都是元素零零碎碎的信息,这样的体验很不友好。...隐藏元素读取 如果不希望部分内容被读出来,可以使用 aria-hidden='true' 来声明,这样读屏时就会忽略这些元素。...场景实现 非文本元素读取 首页头部中京喜 Logo 和文字是一整张图片。聚焦后,读屏软件默认会读成图像,无法将图片中的文字朗读出来。这样的无障碍体验是非常差的。 ?

1.4K31

ARIA16

兴趣是最好的老师,其次是耻辱——胖子邓 ARIA16技术:使用aria-label增强Web可访问性 在现代Web开发中,可访问性(Accessibility)是提升用户体验的关键因素之一。...实现ARIA16非常简单,只需在相关元素上添加aria-label属性并提供适当的描述文本。...另一个示例:动态生成的控件 1 aria-label="提交表单" tabindex="0"> 这里的div元素被赋予按钮的角色,aria-label...实践指南 避免冗余:如果元素已经包含可见文本,尽量使用aria-labelledby而不是aria-label。 保持简洁:aria-label的文本描述应尽量简短明了,确保屏幕阅读器快速朗读。...测试工具:使用屏幕阅读器(如NVDA或VoiceOver)测试实现效果,确保描述符合预期。 局限性 尽管aria-label是一个强大的工具,但它也有一些局限性: 依赖开发者提供准确的描述文本。

6110
  • Safari 18.0 WebKit 新特性介绍

    现在,当你点击该链接时,它将会在 MDN Web Docs Web 应用中打开,而不是在默认浏览器中。 在浏览器中点击链接将保持当前行为。此功能仅影响在其他地方打开的链接。...默认情况下,浏览器在状态之间应用交叉淡入淡出。 调用document.startViewTransition()方法来启动捕捉。...虽然内联预测文本提供了极佳的个性化用户体验,但在某些特定情况下,网页上可能不需要预测功能。...默认情况下,书写建议是启用的。你可以在任何类型的文本输入字段上包含 writingsuggestions="false" 属性来关闭此功能。 在 这个演示 中试试有无书写建议的区别。...在极少数情况下,你可能需要覆盖 aria-label 或 aria-roledescription,为盲文提供不同的名称或描述。

    37110

    泛在可用媒体播放器

    来源:Demuxed 2021 主讲人:Christian Pillsbury 内容整理:付一兵 在本次演讲中,作者概述了制作一个基于浏览器的泛在可用媒体播放器的主要考虑因素。...目录 什么是泛在可用媒体播放器 键盘交互 Accessible Rich Internet Applications(ARIA) 播放器设计与细节 后续探索 什么是泛在可用媒体播放器 我们期望的媒体播放器应该是能被尽可能多的用户使用...苹果公司的 Voiceover screen reader 就是一个很好的实际例子。 当你解决以上两步时,应该用一些内置或第三方的工具来测试。...使用苹果的 Voiceover screen reader 同样可以展示如何通过 Media Chrome使用标签和键盘交互,并获得一系列反馈。...瞬时按钮 在播放器中,当你向前或向后搜索时,它们是瞬时按钮,因为你点击它们,一个动作发生,再次点击它们,同样的动作发生。

    1.2K10

    iOS 12 安全更新 | 一个月内安装率超 50%,越狱和漏洞一个也没少

    减少广告追踪:iOS 12 版本下的 Safari 在默认情况下会屏蔽评论框和社交媒体共享图标,避免在用户未交互的情况下被识别身份。...此外,iOS 12 中还设置了 Safari 中“指纹识别”屏蔽,阻止广告跟踪器发现并识别设备; 更强的密码保护:当用户在 Safari 中保存的两个或多个登录地址使用相同的密码时,会出现提醒;同时,依旧可以通过...聊天加密:不论是iMessage 发送的文本聊天还是应用程序记录的位置数据亦或是 FaceTime 的视频电话,只要没有授权密码或指纹或面部解锁,都无法被他人读取; 5....锁屏超过一小时后,屏蔽 USB 接入;避免物理接触导致的恶意数据读取; 设置方法:在设置中找到 Touch ID(Face ID)或密码选项,将 USB 访问的按钮关闭。...这个过程中,需要骗过 Siri,并修改 iOS 中的 VoiceOver 功能,绕过验证过程。

    1K50

    iOS最新更新修复了多个安全问题,包括KRACK漏洞

    除此之外,苹果今天还发布了tvOS, watchOS, Safari, iTunes和iCloud的更新。 其中比较关键的一个漏洞修复针对的是WPA2协议中的KRACK漏洞。...10月中旬时,Wifi WPA2安全协议被曝高危漏洞,几乎涉及所有WiFi设备 攻击者可以利用 KRACK 攻击读取先前认为是安全的敏感信息,如信用卡号,密码,聊天信息,电子邮件,照片等。...照片 修复导致部分照片显示模糊的Bug 修复Live Photo效果播放缓慢的Bug 修复从iCloud恢复后的某些照片不出现在人物相册中的Bug 修复在截屏间滑动时影响性能的情况 辅助功能 改善了对...2 级盲文输入的支持 改善了 VoiceOver 对多页 PDF 的访问 改善了 VoiceOver 转子播报所收到通知的操作 改善了从应用切换器移除应用时的 VoiceOver 转子操作菜单 修复了部分用户在使用...VoiceOver 进行触摸键入时备选按键无法显示的问题 修复了 VoiceOver 转子始终返回至“邮件”中默认操作的问题 修复了 VoiceOver 转子不会删除信息的问题 其他改进和修复 功能回归

    94890

    专属| 加密货币挖矿攻击急剧上升

    浏览器设备的加密挖矿恶意软件数量出现了近400%的增长。...Check Point表示:“加密挖矿仍旧是全球组织面临的主要威胁。在9月最后两周,针对iPhone和Safari浏览器的攻击增加了四倍。”...据了解,所有针对运行iOS和Safari设备的攻击都使用了JavaScript挖矿程序–Coinhive,它能非常容易地被集成到任何web应用程序中以此来窃取程序打开时的处理能力。...Mozilla 现在宣布它的最新版 Firefox Nightly 加入了对加密 SNI 的支持,在该功能启用之后浏览器访问任何支持加密 SNI 网站将不会泄漏域名。...这一漏洞在最新发布的iOS12.0.1系统中尚未被修复,不止iPhoneX,连最新上市的iPhoneXS也如此。

    1.2K20

    现代图片性能优化及体验优化指南 - 图片资源的容错及可访问性处理

    有一个非常基础的知识,简单过一下,也就是图片元素中,alt 与 title 的差异: 图片中的 alt 属性是在图片不能正常显示时出现的文本提示。...图片中的 title 属性是在鼠标在移动到元素上的文本提示。...正确使用 alt 属性 对于使用屏幕阅读器的用户而言,图片是无法正常展示或者被的浏览的,基于此,我们需要利用好 alt 属性,或者是上述的aria-label 和 aria-labelledby 属性。...但是,如果使用文本图像,替代文本应包含与图像中相同的词。 图形和图表等复杂图像:为了传达数据或详细信息,提供与图像中提供的数据或信息等效的完整文本作为替代文本。...Safari 仍不支持这个特性,所以,在 Safari 下,我们可能得到如下的结果: 效果仍然还是 OK 的,只是没有了兜底图的展示,在实际使用过程中,需要知道这一点。

    72610

    如何在 SwiftUI 中使用 AccessibilityCustomContentKey 修饰符

    本篇文章来聊聊另一个新的 API,我们可以使用 SwiftUI 中的新 accessibilityCustomContent 视图修饰符提供自定义的辅助功能内容。...不需要执行任何操作即可使你的 UserView 可访问。UserView 内的每个文本片段都对辅助技术(如VoiceOver和Switch Control)可访问。...通常,我们使用不同的字体和颜色在视觉上为文本设置优先级,但是如何在辅助技术中实现相同的影响呢?...你的自定义内容的重要性级别。它可以是默认或高。VoiceOver 会立即读取具有高重要性的内容,而具有默认重要性的内容仅在用户使用垂直滑动访问更多数据时以冗长模式朗读。...例如,VoiceOver会立即读取具有高重要性的数据,并允许用户使用垂直滑动根据需要访问具有默认重要性的数据。

    11010

    苹果发布OS X 10.9.2更新,修复SSL漏洞

    苹果近日发布OS X 10.9.2更新修复近期的SSL漏洞,用户可以通过Mac应用商店下载更新。同时这一更新还加入了几个新的特性,比如FaceTime语音通话和iMessage的用户屏蔽。...这次的漏洞可以让黑客在与用户接入同一网络时绕过认证系统,窃取用户与银行等在线服务机构的全部沟通记录。苹果已于2月22日发布了ios 7.0.6更新,来修复iOS上的安全漏洞。...对iMessages的信息用户也可以选择屏蔽。...最新版本的功能包括:    - 添加了屏蔽个别发件人传入即时信息的能力    - 提高了未读邮件计数的准确度    - 解决阻止邮件从特定供应商接收新邮件的问题    - 改善了Safari浏览器自动填充功能的兼容性...   - 修正了可能导致某些Mac电脑音频失真的问题    - 加强使用SMB2连接到文件服务器时的可靠性    - 修正了可能导致V**连接断开的问题    - 改善了邮件和搜索中的VoiceOver

    93560

    SVG fallback 及可读性

    (线上有很多成熟的库可以用,比如Modernizr, 是一个开源的功能检测类JS库,可允许基于用户不同UA,开发不同的体验,即在支持HTML5和CSS3的浏览器中利用这些特性开发,又不会牺牲其他不支持这些特性的浏览器的支持...graph-medium.png 400, graph-large.png 800" alt=“qcloud-logo”> 虽然这种写法简单易行,然而ie至今也不支持元素,那会牺牲掉ie9/10/11下高清屏的体验效果...SVG的可读性 由于SVG采用的是XML的语法,图形的里的文本内容可以被浏览器,搜索引擎和读屏软件读取,所以本身具有可读性好,有利于SEO,对无障碍友好等特点。...aria-describedby 用于较长的文字描述 这里要注意的是,aria-label与aria-labelledby是一对相爱相杀的怨侣,在W3C中,对他们两个的适用范围有着严格的规定: If...Alt标签置空,即 alt="" A选项无法描述照片内容,B选项的文字与下面标题重复,C选项是在与规范作对,D选项是最好的选择 ---- Example3: 如上图,照片是可点的,页面中要对照片alt标签设置文字

    70830

    如何在 SwiftUI 视图中显示应用图标和版本

    前言在应用中显示应用图标和版本是为用户提供快速识别应用版本和变体的好方法,无论是内部用户(如测试人员或利益相关者)还是外部用户。...在本文中,我将展示如何创建一个可访问的 SwiftUI 视图,既能显示应用图标和版本,又能在各种文本大小和外观下看起来都很好:获取应用图标构建视图的第一步是从主包中获取应用图标。...这些值通过我们之前创建的提供者传递给视图。我们在一个水平堆栈中显示应用图标和版本,间距为12点。我们在 Image 视图中显示应用图标。...最终结果是一个在各种文本大小下都看起来很好的视图:在应用中显示版本信息视图Copy codeContentView.swiftimport SwiftUIstruct ContentView: View...接着,我们采用类似的方法,通过读取 Info.plist 文件中的 CFBundleShortVersionString 键的值,获取应用版本信息。

    20122

    如何测试你做的项目的可访问性

    可以将它合并到自动化测试套件中,在命令行中运行 浏览器扩展 aXe(https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd...一般情况,表单控件需要有以下信息: Role 角色,比如是编辑文本、单选框、复选框、还是按钮 Name/Label 名字,用来说明字段的含义。...比如 Mac 上的 VoiceOver(https://webaim.org/articles/voiceover/),在“系统偏好设置/辅助功能/VoiceOver” 中启用它。 ?...首先简单介绍下它的键盘操作,更多信息可查看上面截图里的“使用指南”。 在运行 VoiceOver 时,普通的键盘操作保持不变。...缩放功能 对于视觉障碍的用户,有时需要使用放大镜来阅读页面。这里介绍两种: 页面缩放:浏览器自带的缩放功能 设置大字体:浏览器里设置字号。

    1.9K10

    WWDC 2022:哪些是前端开发者要关注的信息?

    在过去的一年,Safari 的浏览器内核 WebKit 发布了超过 162 项新功能和改进点,包括新的 dialog 元素、懒加载、:has() 伪类、Web Locks API、File System...容器查询 在响应式布局布局中,经常使用媒体查询(Media Queries)检测视窗的宽高,实现自元素样式的自动调整。但是在一些页面设计中,元素的容器尺寸发生变化时,元素的样式也需要随之变化。...然后,系统会提示他们授予你的网站或应用发送通知的权限。用户能够在通知中心查看和管理通知,并在通知设置中自定义样式并关闭每个网站的通知。...Safari 中的 Web Push 会使用和 Apple 推送相同的通知服务,该服务支持所有 Mac 和 iOS 设备上的本地推送。...这一改进允许 WebKit 在比以前更短的时间内为来自客户端(如 VoiceOver )的更多可访问性请求提供服务。在一些复杂的网页上,大量的无障碍请求耗时减少了 25%。

    1.8K10

    PlayWright VS Porsche实战 - 启坑

    而起这个坑的关键是工作中遇到了React开发的组件需要规划自动化的方案选型,考虑到团队的小伙伴都很忙,作为SM的我还是自己先踩一下坑然后给团队分享下这个可行性吧。...能搜索到的中文介绍有一般如下: Playwright 支持当前所有主流浏览器,包括 Chrome 和 Edge(基于 Chromium)、Firefox、Safari(基于 WebKit) ,提供完善的自动化控制的...Playwright 支持移动端页面测试,使用设备模拟技术可以使我们在移动 Web 浏览器中测试响应式 Web 应用程序。...*注意,这里不需要配置任何浏览器,在第一次使用的时候,会自动下载所有浏览器的支持组件,包括Chrome体系、Firefox和WebKit三种。...这个定位一看就是CSS的选择ID,对应代码如下 在解决了浏览器启动,对象选择,调试功能后,最后就是断言的支持,在Playwright中提供了属性操作的诸多选择,例如基本的getAttribute,

    1.4K40

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    在 DOM 中最先出现的元素会被绘制在第一位,随后的每个元素都在前一个元素之上,而 DOM 中的最后一个元素则被绘制在最后,位于最上面。...注意 :aria-modal 在 IE11 上不支持 (您的用户可能仍在使用该浏览器),在 VoiceOver 中存在 aria-modal 问题,并且在 Narrator 中似乎不支持它。...您也可以使用 aria-label,但与可见文本相关联是理想的,因为它创造了人们看到和辅助技术称为事物的一致性。...浏览器会自动为s 执行此操作。对于弹出窗口,它只在“有意义的地方”的情况下执行(请参阅弹出窗口解释器)。如果用户没有触发它,将它移动到 DOM 中较早的适当位置。...浏览器会对自动执行此操作。对于 popover,只有在“有意义”的情况下才会执行 (请参考 popover 解释器)。如果用户没有触发它,将焦点移动到 DOM 中适当的位置。

    4K00

    【译】W3C WAI-ARIA最佳实践 -- 表单

    例如,当在编辑文本时按下快捷键时,一个富文本编辑器的菜单栏可能会获得焦点,例如alt + F10。在这种情况下,点击Escape 或从菜单中激活一个命令可能会将焦点返回给编辑器。 4....NOTE 如果在菜单容器上设置aria-owns ,来包含不是该容器DOM子元素的元素,那么这些元素将按照它们被引用的顺序出现在读取顺序中,并且在所有DOM子元素之后。...在某些浏览器中,如果没有选中任何一个单选按钮,使用 Shift+ Tab 将焦点移动到单选按钮组,焦点将会被放置在最后一个单选按钮,而不是第一个单选按钮。...如果数值编辑按钮的文本框允许直接编辑其值,支持以下键。 适用于设备平台的标准单行文本编辑键(请参阅下面的注释)。 可打印字符: 在文本框中输入字符。...用于编辑功能的标准键分配依赖于操作系统。 提供文本编辑功能的最强大的方法需要依靠浏览器,浏览器为HTML文本输入类型的组件和具有 contenteditable HTML属性的元素支持文本编辑功能。

    8.3K30
    领券