开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让屏幕阅读器通知额外的文本

屏幕阅读器是一种辅助技术，用于帮助视觉障碍人士通过语音合成或触觉反馈等方式获取电子设备上的信息。为了让屏幕阅读器通知额外的文本，可以采取以下几种方法：

使用ARIA属性：ARIA（Accessible Rich Internet Applications）是一组用于增强Web内容可访问性的属性。通过在HTML元素中添加ARIA属性，可以向屏幕阅读器提供额外的文本信息。常用的ARIA属性包括aria-label、aria-labelledby和aria-describedby。其中，aria-label用于提供元素的简短描述，aria-labelledby用于引用其他元素作为描述，aria-describedby用于提供更详细的描述。
使用隐藏文本：可以通过CSS将额外的文本隐藏起来，但仍然对屏幕阅读器可见。这可以通过设置元素的样式为"position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;"来实现。这样，屏幕阅读器将能够读取到隐藏文本的内容。
使用aria-live属性：aria-live属性用于指定屏幕阅读器在内容更新时是否应该立即通知用户。可以将aria-live属性设置为"assertive"，以确保屏幕阅读器在内容变化时立即通知用户。例如，可以将aria-live属性应用于一个包含额外文本的元素，以便在文本更新时通知屏幕阅读器。
使用JavaScript：通过JavaScript可以动态地更新屏幕阅读器的文本内容。可以使用JavaScript监听DOM元素的变化，并在变化发生时更新屏幕阅读器的文本。例如，可以使用MutationObserver来监视DOM元素的变化，并在变化发生时触发相应的屏幕阅读器通知。

总结起来，为了让屏幕阅读器通知额外的文本，可以使用ARIA属性、隐藏文本、aria-live属性和JavaScript等方法来实现。这些方法可以提供更丰富的信息给视觉障碍人士，帮助他们更好地理解和使用电子设备上的内容。

腾讯云相关产品和产品介绍链接地址：

腾讯云无障碍云服务：https://cloud.tencent.com/product/a11ys
腾讯云Web应用防火墙（WAF）：https://cloud.tencent.com/product/waf
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn

相关搜索:HTML可访问性:让屏幕阅读器在显示隐藏文本时通知它如何告诉屏幕阅读器读取属性的值？如何确定屏幕阅读器读取文本的顺序？如何让cppyy找到额外的头文件？如何让react native中的屏幕阅读器能够读取标签？如何让屏幕阅读器在Angular或任何单页面应用程序中加载新页面时发出通知？如何让屏幕阅读器在点击时读取按钮的唱段标签如何让屏幕阅读器阅读与其包含的文本不同的内容？如何让文本在屏幕上来回移动？如何让枕头文本不会被移出屏幕

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Android 9.0 强势来袭，带来了哪些新特性？

您可以使用此额外功能预先填充应用中的文本字段，以便用户完成回复。确定对话是否是群组对话：您可以使用setGroupConversation() 有目的地将对话识别为群组或非群组对话。...引导语义 Android 9中添加的属性使我们可以更轻松地定义辅助功能服务（尤其是屏幕阅读器）如何从屏幕的一个部分导航到另一个部分。...例如，在购物应用中，屏幕阅读器可以帮助用户直接从一种类型的交易导航到下一种交易，而屏幕阅读器不必阅读类别中的所有项目，然后再转到下一个。...Google致力于改善所有Android用户的可访问性，提供增强功能，使您能够为具有辅助功能需求的用户构建服务，例如Talkback屏幕阅读器。...智能链接：Android 9增强了 TextClassifier该类，它利用机器学习识别所选文本中的某些实体并建议操作。例如，TextClassifier可以让您的应用检测用户是否选择了电话号码。

3.3K2 0

简单了解下无障碍设计模式

用户可能只有短暂的注意力，对你的产品不熟悉，或使用纯文本屏幕阅读器（使用语音合成器朗读文本或使用盲文显示器产生触觉）。...添加到原生元素上的额外的声音（屏幕阅读器能够正确的翻译原生元素）标记用户界面元素给输入控件和其他元素添加描述，供屏幕阅读器等设备可以进行朗读动效 Material design 使用动效来引导视图之间的焦点...标记聊天图标帮助文档任何具有特殊无障碍功能的功能都应包含在帮助文档中。确保帮助文档的相关性、可访问性和可发现性。例如，查看本指南，了解如何在 Google Drive 中使用屏幕阅读器。...屏幕阅读器会大声朗读屏幕上所有的文本，包括可见和不可见的替代文本。无障碍文本包括可见文本（包括 UI 元素中的标签、按钮中的文字、链接和表单）和不可见的描述（没有文本标签的按钮的替代文字）。...使用屏幕阅读器测试你的应用，以确定那些缺失无障碍文本、或需要更好的无障碍文本的区域。保持简洁保持内容和无障碍文本简短、并切中主题。屏幕阅读器用户会听到每个 UI 元素的朗读。

4.7K4 0

业界 | Facebook将反馈融入AI系统，视觉障碍者现在也能“读懂”照片啦

AI科技评论按：Automatic Alt-Text (AAT) 的发布让盲人（或使用屏幕阅读器的用户）更好地读懂新闻推送 (News Feeds) 里的照片的内容。...考虑到你们的关系，朋友还可能提供额外的图片信息（例如绘声绘色地进行描述或讲一个隐藏其中的玩笑）。但是如何取其精华去其糟粕地扩展这个方案？...由于alt-text具有HTML属性的这个设计，可作为图像的替换文本，网页的图像内容管理员可以轻松把图像更换为alt-text，并且采用W3C可访问性标准，当用户把屏幕阅读器软件的光标移动到任一图像上，...另一个提示是要求使用屏幕阅读器的用户将语音速率稍微降低，这样参与者才能既跟得上读音又能出声思考。出声思考在很多方面都是关于参与者究竟如何解读屏幕阅读器所读出的话。...问题：（如果在测试组）听到这个替换文本后，感觉如何？

7279 0

盲人程序员的编程生涯

让屏幕阅读器读出缩进也是可能的，我自己不用这个功能，因为Visual Studio会处理这些，并且C#中是用大括号的。但是在像Python这样空格很关键的语言中就很重要了。...我遇到的大部分障碍都是基于工具的不可访问的问题。例如所有的oracle的产品都鼓吹其访问性好多年了（鄙视他们），但在团队环境中却只搞了个在屏幕阅读器和自定义脚本之上的额外的防御层。...From Kyle Burton：可以从Blinux项目开始：http://leb.net/blinux/ 这个项目描述了如何获得Emacspeak（带文本阅读的编辑器）并且还有许多其他资源。...我曾经跟这样的一个人工作，他的视力导致他不能使用显示器，但他使用屏幕阅读器软件并花费大量时间使用基于文本的应用程序和shell也工作得很好。...对于我来说，放大工具就够了，主要问题是速度，我需要移动鼠标来确保指针跟随我所看到的文本，微软的放大镜提供了一个选项”自动跟随文本编辑光标“，这可以让我在编辑文本或编码时摆脱频繁移动鼠标的困扰。

8363 0

Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点

image.png 请注意，蓝皮书是如何从可视流中隐藏的，但是它并没有影响图书堆栈的顺序。...为了向屏幕阅读器隐藏图标，添加了aria-hidden。根据Mozilla Developer Network (MDN)，下面是属性的用例隐藏装饰性的内容，如图标、图像。隐藏复制文本。...隐藏屏幕外或折叠的内容。可访问性对aria-hidden="true"的影响是为屏幕阅读器设计的，因为它只对屏幕阅读器隐藏内容。然而，内容对于有视力的用户仍然是可见的，并且键盘是可聚焦的。...我们需要解决两个问题: 1.菜单隐藏时避免用键盘聚焦 2.当导航隐藏时，避免通过屏幕阅读器告知导航下面的屏幕截图显示了Mac OS上的VoiceOver转子是如何看到页面的。...有一个常见的CSS类，称为sr-only或visual -hidden，它只在视觉上隐藏一个元素，并让键盘和屏幕阅读器用户可以访问它。

5K3 0

如何提高 Web 可访问性，让残障人士拥有更好的体验？

这可以帮助有认知障碍或学习障碍的用户。这也有助于依赖屏幕阅读器的用户。屏幕阅读器用户每秒钟听到的字数明显多于视力正常的读者。...这种速度上的差异意味着，屏幕阅读器用户需要比视力正常的用户更快地理解你的内容，所以内容越简单效果越好。使用简单的词语也意味着屏幕阅读器不容易误读。...你还应该在话题标签中使用 PascalCase 或 camelCase，这也是为了让屏幕阅读器可以识别出其中的每个单词，而不是试图将整个标签作为一个单词来读。...列表当你要列举的内容超过 3 项，可以考虑把这些项做成一个列表。除了可以吸引视力正常的用户的注意，列表还为屏幕阅读器用户提供了有关列表的信息，帮助他们决定如何继续。...链接就像使用列表对视力正常者和屏幕阅读器用户都有好处一样，使用恰当的链接对这两个群体也都有帮助。链接可以吸引视力正常的用户的注意，而屏幕阅读器用户可以只使用页面上的链接来浏览页面。

6872 0

自动增长Textareas的最干净技巧「心得分享」

; /* 隐藏在视图，点击和屏幕阅读器中 */ visibility: hidden; }.grow-wrap > textarea { /* 您可以保留此设置，但是在用户调整大小后，它将破坏自动调整大小...我不确定这是否是最好的方法。对我来说感觉很干净，但是我想知道使用对于屏幕阅读器是否更安全？或 visibility: hidden; 够了吗？...无论如何，那不是奇怪的部分。...这是奇怪的部分： content: attr(data-replicated-value) " ";复制代码因为我使用的是伪元素，伪元素是将 data 属性从元素中取出并以额外的空间将内容呈现到页面的行...如果你不这样做，最终的结果会让人感觉 "跳脱"。我不能说我完全理解它，但它似乎更好地尊重了跨textarea和文本元素的换行行为。如果你不想使用伪元素，嘿嘿，我没意见，只要注意跳动的行为即可。

1.2K1 0

一位盲人程序员的感悟：闭上双眼感受代码的美

我将尝试撰文给大家展示一下“盲人编程可行性”，以及“二十一世纪的盲人如何使用电脑进行编码和工作”。你怎么读取屏幕中的信息呢？...我所做的只是安装一个名为NVDA的开源屏幕阅读器。屏幕阅读器会告诉你屏幕的文本内容，具有类似Siri一样智能朗读的功能。...屏幕阅读器还可以使用盲文显示器，后者是由一系列可刷新盲文单元组成的，可根据屏幕上突出显示的内容形成相应的字母。...在学习联合国大会定义的著名Dash教程时，我遇到了麻烦。这些教程无疑是好的，但对于我来说，无法提取。因为他们选择将所有文本嵌入图片幻灯片，没有任何文字描述或内容供屏幕阅读器使用。...这是Java-ish编程语言中典型的if-block如何读取，不过还是相当冗长的。我倾向于关闭括号和括号之间的通知，不过其他人通过将默认的“左括号”替换为“花边 lace”或“开始”。

1.1K7 0

文本溢出，HTML页面如何让多出的文字显示省略号

在html页面中经常会遇到文本显示框太小，无法显示出全部文字，但如果直接切掉又会很难看，这里教大家使用text-overflow: ellipsis的属性解决文本溢出问题。...overflow: hidden; text-overflow: ellipsis; } text-overflow 属性以下两段包含不适合其框的长文本... text-overflow: clip: 这里有一些无法容纳在框中的长文本 text-overflow: ellipsis...: 这里有一些无法容纳在框中的长文本

2.5K5 0

译|你不知道的CSS国际化

lang 属性是一个非常重要的属性，因为它标识web上文本内容的语言，而且这种信息在许多地方都被使用。上面提到的Chrome的内置翻译，针对特定语言的内容的搜索引擎以及屏幕阅读器。...也许你没有想到屏幕阅读器，但如果你不是屏幕阅读器的用户，或者你不认识屏幕阅读器的用户，你可能不会想到屏幕阅读器。屏幕阅读器使用语言信息，因此可以以适当的口音和正确的发音读出内容。...首先，我们可以使用以下语法完全匹配 lang 属性值： [lang="zh"] /* 只匹配zh */ 我在前面提到过，中文被认为是一种宏语言，这意味着它的语言标签可以用额外的特殊性来组成，比如说文字子标签...每个Unicode字符都有一个垂直方向属性，该属性会通知渲染引擎默认情况下字形的方向。我们可以使用 text-orientation 属性更改字符的方向。...为了使CSS属性更具通用性，在CSS文本装饰模块 Level 3)中引入了文本强调样式，文本强调位置和文本强调颜色。

1.5K1 0

提升网站可访问性的CSS实践方法

随着互联网的不断发展，越来越多的人开始依赖于网络，如何让网站更加易于访问、易于阅读是一个至关重要的问题。本文将从多个方面介绍如何使用CSS来提升网站的可访问性。...一、为链接增加辅助信息为链接增加合适的辅助信息可以让低视力用户更容易理解链接的目的，跳到正确的页面。...@media screen and (max-width: 768px) { body { font-size: 14px; } } 四、使用适当的语言声明在HTML文档中添加正确的语言声明可以让屏幕阅读器更容易识别文本内容和发音... 五、避免使用纯图片的文本内容使用纯图片的文本内容可以导致无法进行文本搜索和屏幕阅读器无法读取文本内容，这会影响网站的可访问性。...aria-hidden：用于指定元素是否应该被屏幕阅读器忽略。以上是一些使用 CSS 来提高网站可访问性的实践方法。通过合理地运用这些方法，可以让网站更加易于阅读和访问，从而提高用户体验和网站质量。

1933 0

做了七年前端开发，我最近才意识到可访问性的必要......

确保 tab 可用以及删除多余的 tab 链接可访问的图标按钮 —— 至少使用带有适当标签的焦点指示器 —— 除非有替代方案，否则不要禁用默认的焦点样式尽可能提供视觉标签描述性信息图——为屏幕阅读器提供回退文本描述...考虑一个没有 h1 页面的场景，当屏幕阅读器读到这样的页面时，用户是无法获知标题的，而页面的标题通常是用表示。...尽管用和做出来的按钮对于大多数用户来说，看起来是一模一样的，但对于使用屏幕阅读器的盲人用户来说，它看起来非常不同，屏幕阅读器甚至可能会忽略这是一个按钮。...但是如果按钮只有一个图标，而没有“发送”标签，你要如何告诉 Siri 点击哪个按钮呢? 因此，尽可能提供视觉标签，如果不行，那至少让它可通过 tab 使用。...7 描述性信息图当 SVG 用于图表等信息图或其它类型的数据表示时，通常不会为可访问用户提供任何信息。为了方便他们，最好的方式是提供屏幕阅读器能够读取到信息图文本描述。

1.7K3 0

Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意

尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。为什么需要ARIA？...回答标题问题前我先问其他几个问题如何让盲人用户知道当前浏览区域就是网站主导航？如果让盲人用户知道点击某个按钮后出来的是弹框？如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？...如何让盲人用户知道您使用了li标签是用来模拟标准select控件呢？如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢？在你现有的知识范围内，您有办法解决上面的问题吗？...ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。...role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。

7432 1

谈谈对 html 语义化的理解

便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的 html 结构，减少差异化。方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。...尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。...而 HTML5 无障碍属性就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！...是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。...关于 WAI-ARIA 属性重要的一点是它不会对 Web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)，这也是屏幕阅读器这一类软件的信息源。

1.1K1 0

HTML的讲解

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言我们来看看百度百科对HTML的定义：HTML的全称为超文本标记语言，是一种标记语言。...HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等用我自己的一句话来说就是：HTML是用来描述网页的标记语言那我们为什么要学HTML呢？...有利于设备解析，让不同的设备（如屏幕阅读器、盲人阅读器、移动设备）更好的渲染网页来反馈给不同的人群去理解网页内容有利于SEO,和搜索引擎建立良好沟通,让搜索系统更好的理解网页，然反馈给搜索的用户，提高网页的搜索权重当网页加载慢导致...CSS文件还未加载时（没有CSS），可以让页面仍然清晰、可读、好看，优化用户体验。...那接下来就让我来学习HTML，首先我们先来了解页面的整体一、HTML的基本语法规则文档的扩展名为.html或.htmHTML标签不区分大小写,推荐小写元素可嵌套，可以包括属性的额外信息标签和属性不区分大小写

1701 0

Flutter 中渲染3D 模型

该小部件可将Google的Web部件插入WebView中。3D模型显示3D图片。该演示视频展示了如何在Flutter中创建模型查看器。...它显示了如何在flutter应用程序中使用model_viewer包来运行模型查看器。它以glTF和GLB格式显示3D模型，并通过鼠标，手触摸和自动旋转将其旋转360度。...**alt：**此参数用于设计具有自定义内容的模型，该内容将利用使用屏幕阅读器或在任何情况下都依赖于额外的语义设置来理解他们所看到内容的观察者来描绘模型。...，该文本将向使用屏幕阅读器的观看者描述该模型；自动播放是指如果设置为true并且模型具有动画，则设置此属性后，动画将自动开始播放。...当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。

24.9K2 0

Android 如何从零开始写一款书籍阅读器的示例

一款书籍阅读器，需要以下功能才能说的上比较完整：文字页面展示，即书页；页面之间的跳转动画，即翻页动作；能够在每一页上记录阅读进度，即书签；能够自由选择文字并标注，即笔记；能够设置一些属性，如屏幕亮度...书籍阅读器 这篇文章带来的就是如何打造这么一款阅读器。（由于整体代码量比较大，所以我只能说说我的实现思路再加上部分的核心代码来说明，不会有太多的代码展示。）...，目的是为了能够让 view 检测到翻页动作。...书签书签的本质就是记录当前页的第一个文字在整章文本的位置，然后再加上书籍的id,章节的id（或序号）就能准确定位。 ?...这里我是通过一个辅助类贯穿整个阅读器来帮助更新各个模块，该类记录了阅读器内部所有可设置的属性，当各个模块被通知需要更新时重新从该类中读取参数并设置（比如画笔的颜色，页面的间距，字体的大小等）。

5482 0

Android P专区免费开放 -- 同样的Android，不同的体验

通过这些标题，用户就可以从一个标题导航到下一个标题，群组导航和输出针对屏幕阅读器，Android P对View提供了新的属性android:screenReaderFocusable代替原有的android...:focusable来做标记，来解决在一些场景下为了使屏幕阅读器工作而设置View为可获取焦点的操作。...这时，屏幕阅读器需要同时关注android:screenReaderFocusable和android:focusable设置为ture的View。...便捷操作 tooltips交互 Android P中，可以使用getTooltipText()去读取tooltips的文本内容。...六、新的Rotation方案 -------------- 旋转屏幕，是一些游戏、视频等场景必要的操作，但有一些场景，用户旋转屏幕并不是为了让应用显示从竖屏变成横屏或反过来。

4.3K3 0

Android P专区免费开放 -- 同样的Android，不同的体验

通过这些标题，用户就可以从一个标题导航到下一个标题，群组导航和输出针对屏幕阅读器，Android P对View提供了新的属性android:screenReaderFocusable代替原有的android...:focusable来做标记，来解决在一些场景下为了使屏幕阅读器工作而设置View为可获取焦点的操作。...这时，屏幕阅读器需要同时关注android:screenReaderFocusable和android:focusable设置为ture的View。...便捷操作 tooltips交互 Android P中，可以使用getTooltipText()去读取tooltips的文本内容。...六、新的Rotation方案旋转屏幕，是一些游戏、视频等场景必要的操作，但有一些场景，用户旋转屏幕并不是为了让应用显示从竖屏变成横屏或反过来。

1.1K1 0

bootstrap里的sr-only是什么属性？用途是什么？

全称是 screen reader only，意为：（仅供）屏幕阅读器，这个 class 主要用于增强 accessbility（可访问性）。...有时候 UI 上会出现一些仅供视觉识别的元素，比如说“菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。...他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？...因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现。

1.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭