让屏幕阅读器阅读span文本的正确方法是什么？

让屏幕阅读器阅读span文本的正确方法是使用aria-label属性或aria-labelledby属性来提供文本的可访问名称。

aria-label属性是一种用于为元素提供可访问名称的方法，它可以直接将文本内容作为属性值，使屏幕阅读器能够正确读取该文本。例如：

示例文本

aria-labelledby属性是另一种用于为元素提供可访问名称的方法，它通过引用其他元素的ID来指定文本内容。例如：

这是一个示例文本 示例文本

在上述示例中，屏幕阅读器将读取"示例文本"作为span元素的可访问名称。

需要注意的是，使用aria-label属性或aria-labelledby属性时，应确保提供的文本是准确、简明和具有描述性的，以便用户能够理解元素的含义和功能。

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

腾讯云无障碍云服务：https://cloud.tencent.com/product/a11ys
腾讯云无障碍测试服务：https://cloud.tencent.com/product/a11ytest

相关·内容

Web Accessibility基础：构建无障碍的前端应用

文本替代（alt属性）确保所有非文本内容（如图片）都有描述性的alt属性，以便屏幕阅读器用户理解图片内容。...视觉隐藏使用visually-hidden类隐藏内容，使其仅对屏幕阅读器可见。.visually-hidden { position: absolute !...ARIA live区域使用aria-live属性通知屏幕阅读器用户关于页面动态更新的信息。...适配屏幕阅读器确保所有重要信息都能被屏幕阅读器读取，例如表格的标题和摘要。...交互元素的焦点管理确保键盘焦点在页面元素之间正确流动，避免跳过或重复。

1041 0

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

-- Path data --> Like 我们的目标是以可访问的方式隐藏文本。...Aria Hidden 当向元素添加aria-hidden属性时，它将从可访问性树中删除该元素，这可以增强屏幕阅读器用户的体验。注意，它并没有在视觉上隐藏元素，它只针对屏幕阅读器用户。...为了向屏幕阅读器隐藏图标，添加了aria-hidden。根据Mozilla Developer Network (MDN)，下面是属性的用例隐藏装饰性的内容，如图标、图像。隐藏复制文本。...隐藏屏幕外或折叠的内容。可访问性对aria-hidden="true"的影响是为屏幕阅读器设计的，因为它只对屏幕阅读器隐藏内容。然而，内容对于有视力的用户仍然是可见的，并且键盘是可聚焦的。...有一个常见的CSS类，称为sr-only或visual -hidden，它只在视觉上隐藏一个元素，并让键盘和屏幕阅读器用户可以访问它。

5K3 0

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

确保 tab 可用以及删除多余的 tab 链接可访问的图标按钮 —— 至少使用带有适当标签的焦点指示器 —— 除非有替代方案，否则不要禁用默认的焦点样式尽可能提供视觉标签描述性信息图——为屏幕阅读器提供回退文本描述...考虑一个没有 h1 页面的场景，当屏幕阅读器读到这样的页面时，用户是无法获知标题的，而页面的标题通常是用表示。...尽管用和做出来的按钮对于大多数用户来说，看起来是一模一样的，但对于使用屏幕阅读器的盲人用户来说，它看起来非常不同，屏幕阅读器甚至可能会忽略这是一个按钮。...这里也有一些注意事项：不设置按钮样式以及设置按钮样式的理想方法针对于没有任何文本、只有图片的按钮，可遵循以下三个步骤中的任何一个：使用隐藏的来指明按钮标签在上使用...为了方便他们，最好的方式是提供屏幕阅读器能够读取到信息图文本描述。

1.7K3 0

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

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

1.1K1 0

前端面试题-HTML结构语义化

二、HTML语义化的概念语义化是指根据内容的结构，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。...如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。...4.2 支持更多设备方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。...五、HTML语义化的方法（1）根据文档上下文结构合理的选用最适合表达当前语义的标签；（2）尽可少使用无语义的标签和；（3）不要使用带有样式的标签，比如：、 <u...；（6）正确使用内容容器，比如段落，列表 , , , , , ; （7）需要强调的文本，可以使用或标签（浏览器默认样式

5992 0

HTML基础标签

更容易让屏幕阅读器读出网页内容。一、p标签段落文本标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。...四、使用标签为文字设置单独样式文本五、文本引用引用文本摘要的内容是不会在浏览器中显示出来的。...它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。...-- 网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。-->

3.8K2 1

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

这可以帮助有认知障碍或学习障碍的用户。这也有助于依赖屏幕阅读器的用户。屏幕阅读器用户每秒钟听到的字数明显多于视力正常的读者。...这种速度上的差异意味着，屏幕阅读器用户需要比视力正常的用户更快地理解你的内容，所以内容越简单效果越好。使用简单的词语也意味着屏幕阅读器不容易误读。...你还应该在话题标签中使用 PascalCase 或 camelCase，这也是为了让屏幕阅读器可以识别出其中的每个单词，而不是试图将整个标签作为一个单词来读。...在添加列表时，要正确选用列表格式（无序或有序列表），而不只是使用符号或数字。屏幕阅读器可以识别列表的 HTML，并据此向用户提供列表项的数量，以及识别任何嵌套列表及其项数。...如果是用户不感兴趣的东西，那么屏幕阅读器还允许用户跳过列表，而不是强迫他们把整个列表听完。链接就像使用列表对视力正常者和屏幕阅读器用户都有好处一样，使用恰当的链接对这两个群体也都有帮助。

7102 0

译|你不知道的CSS国际化

lang 属性是一个非常重要的属性，因为它标识web上文本内容的语言，而且这种信息在许多地方都被使用。上面提到的Chrome的内置翻译，针对特定语言的内容的搜索引擎以及屏幕阅读器。...也许你没有想到屏幕阅读器，但如果你不是屏幕阅读器的用户，或者你不认识屏幕阅读器的用户，你可能不会想到屏幕阅读器。屏幕阅读器使用语言信息，因此可以以适当的口音和正确的发音读出内容。...语言相关的风格设计的关键在于在页面标记中正确使用 lang 属性,lang属性可以识别ISO 639 language codes作为值。... 在同一页面上看到不同语言的内容并不罕见。在这种情况下，您可以使用或包装该内容，并将正确的 lang 属性应用于该包装元素。...我并不是说什么都可以，因为很多时候，有无数种方法可以达到同样的结果，而且有些方法比其他方法更合适。

1.6K1 0

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

添加到原生元素上的额外的声音（屏幕阅读器能够正确的翻译原生元素）标记用户界面元素给输入控件和其他元素添加描述，供屏幕阅读器等设备可以进行朗读动效 Material design 使用动效来引导视图之间的焦点...启用焦点导航使用焦点控制导航屏幕阅读器 屏幕阅读器为用户提供了多种屏幕导航的方法，包括：屏幕阅读器的触摸界面允许用户在屏幕上移动手指，以听到手指正下方的内容。这使用户能快速了解整个界面。...使用屏幕阅读器测试你的应用，以确定那些缺失无障碍文本、或需要更好的无障碍文本的区域。保持简洁保持内容和无障碍文本简短、并切中主题。屏幕阅读器用户会听到每个 UI 元素的朗读。...文本越短，屏幕阅读器用户导航速度越快。切换到 heyfromjonathan@gmail.com 正确示例书写明确和简短的无障碍文本。账户切换器。...避免在文本中包含控件类型和状态屏幕阅读器会通过声音、或通过在无障碍文本前后说出控件名称，来自动声明控件的类型和状态。搜索正确示例使用简短的说明。搜索字段错误示例不要写控件类型。

4.8K4 0

Bootstrap 辅助类教程演示

设置元素为 display:block 并居中显示尝试一下 .clearfix 清除浮动尝试一下 .show 强制元素显示尝试一下 .hidden 强制元素隐藏尝试一下 .sr-only 除了屏幕阅读器外...使用带有 class caret 的元素得到该功能。...DA81F5;"> 向右快速浮动结果如下所示：显示和隐藏内容您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器...> 结果如下所示：屏幕阅读器 您可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。...label 标签都带有 class sr-only，因此标签将只对屏幕阅读器可见。

1.1K4 0

WordPress 6.1 新增必填字段相关函数和钩子

必填字段的标签使用wp_required_field_indicator()函数，它给出了包含必填星号的span标签添加了“required”类名。翻译人员现在可以用他们语言中更合适的字形替换星号。...对于图例（legend），还使用wp_required_field_message()在包裹“Required fields are marked *”的span元素添加一个“required-field-message...在 WordPress 5.9 和 6.0 中，屏幕阅读器不会阅读评论表单的星号或必填字段消息文本，因为它们是视觉提示。在 6.1 中，修订版恢复了这些项目，因此看到文本的屏幕阅读器用户也能听到它。...wpdocs_use_nonbreaking_space_in_required_fields_message( $message ) { $message = str_replace( ' <span...class="required"', ' <span class="required"', $message ); return $message; } add_filter( 'wp_required_field_message

6731 0

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

一、为链接增加辅助信息为链接增加合适的辅助信息可以让低视力用户更容易理解链接的目的，跳到正确的页面。...以下是一些CSS实践方法： 1、使用高对比度的颜色来支持低视力用户，同样也可以提高其他用户的可阅读性。...@media screen and (max-width: 768px) { body { font-size: 14px; } } 四、使用适当的语言声明在HTML文档中添加正确的语言声明可以让屏幕阅读器更容易识别文本内容和发音... 五、避免使用纯图片的文本内容使用纯图片的文本内容可以导致无法进行文本搜索和屏幕阅读器无法读取文本内容，这会影响网站的可访问性。...aria-hidden：用于指定元素是否应该被屏幕阅读器忽略。以上是一些使用 CSS 来提高网站可访问性的实践方法。通过合理地运用这些方法，可以让网站更加易于阅读和访问，从而提高用户体验和网站质量。

2103 0

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

AI科技评论按：Automatic Alt-Text (AAT) 的发布让盲人（或使用屏幕阅读器的用户）更好地读懂新闻推送 (News Feeds) 里的照片的内容。...为了让更多的人参与图片社交，Facebook推出了AAT技术，希望屏幕阅读器用户也能够理解新闻推送中大部分图像的内容（有望很快覆盖所有图像！）。前世今生该从哪里开始克服这个挑战？...由于alt-text具有HTML属性的这个设计，可作为图像的替换文本，网页的图像内容管理员可以轻松把图像更换为alt-text，并且采用W3C可访问性标准，当用户把屏幕阅读器软件的光标移动到任一图像上，...前者有时在HTML侧不会被正确地标记，也就不可能分辨矩阵中的应答者在哪，而后者应该被替换为非图形HTML元素，使不同的屏幕阅读器能通用地访问。...•避免给屏幕阅读器提供返回功能，否则误触导致的错误会频频发生。 •相比调查使用鼠标操作系统的视力正常用户，在屏幕阅读器上进行调查所花的时间更长。

7429 0

你所不知道的html5与html中的那些事（三）

，需要什么功能就去加div标签就可以了；而div是什么呢？...功能中的一部分，他们没有任何的默认样式，除了会让文本另起一行外；第二这几个标签的语意与用法： nav:标记导航（对应网页中重要的链接群就需要用这个标签）包含的他中间的通常是无序列表；当然如果是面包屑链接就需用到...那么怎么的开发中正确的应用他们呢？...因为现在一些SEO与浏览器或是屏幕阅读器（一个给残障人士用的文章阅读器）都在根据HTML5的新标准做一些新的功能；他们会很具新的语意直接与自身的功能相对应；如果网页的开发者也是这么做的那么你的网站的应用性会大大的曾加...（地址：www.w3.org/TR/wai-aria/ ） 2)将屏幕阅读器测试列入你的日常开发中；（因为他是最能直接反映出你的网站语意写的好不好的东西） 3)正确的为标签制定id与类（语意性一定要明显

8766 0

这15个HTMLCSS错误我不信你没犯过(网站规范)

1.使用占位符属性而不是标签元素我经常看到的流行错误是使用占位符属性而不是标签元素。但屏幕阅读器的用户在这种情况下无法填充字段，因为屏幕读取器无法从占位符属性读取文本。...但是社交图标是一个装饰图标，它可以帮助用户更快地理解元素的含义，而无需阅读文本。如果我们删除图标，我们不会失去元素的含义，因此我们可以使用背景图像属性。...此外，最主要的是为屏幕阅读器添加文本，以便用户可以与此按钮进行交互。...当您这样做时，您忘记了标题可以帮助屏幕阅读器的用户更快地在网页上导航。如果你有标题太多，它阻止人们。因此，在需要的地方使用标题。... 11.替代属性具有不正确的值如果开发人员正确使用，alt 属性可能非常有用。不幸的是，他们中的许多人并没有试图描述图像，使视觉障碍的人能够理解图片的内容。

3.3K3 1

如何提高网站的可访问性？

更易读的简单方法是给文本和背景颜色足够的对比度，以便视力不好或光线不好的人仍然可以阅读它。出于同样的原因，排版也应该倾向于更大的尺寸，并且易于调整尺寸。...甚至可能是因为很多人试图一次阅读一个屏幕，不能太近，需要更大版面才可以一次阅读更多文章。图片：可感知图像最重要的是alt文本。...键盘导航：键盘导航涵盖了许多压力情况 - 屏幕阅读器，摇晃的运动控制，与头晕和肌肉控制相关的医疗问题，不可靠的鼠标垫，或仅仅是个人偏好。...对于网络，这意味着：语义HTML标记正确使用aria标签逻辑上排序DOM元素服务器端呈现以确保正确传递如果CSS无法加载，这使得内容对键盘导航，屏幕阅读器甚至是可用的界面都很友好，还有更多！...一些开始的建议是：使用键盘导航使用键盘和屏幕阅读器导航使用手机在强烈的阳光下使用手机减慢您的互联网连接速度打破一些或全部CSS 让不熟悉网站的人浏览并执行基本任务使用灰度滤色镜（用于色盲

1.5K1 0

CSS——图片替换方法比较

经典的替换方法： Fahrner图片替换法（FIR）源码： Html： Fahrner Image Replacement CSS： #fir...缺点：（1）需要一组不具备任何语义的标签才能运作（2）display属性影响屏幕阅读器使用者（3）关闭浏览器显示图片，同时启用CSS支持时，文字图片均不可显示。　　2. ...优点：（1）去掉冗余的标签（2）不影响屏幕阅读器使用者缺点：（1）关闭浏览器显示图片，同时启用CSS支持时，文字图片均不可显示（2）要为IE5 for Windows使用盒模型Hack。...，将文字显示在屏幕之外，达到隐藏的效果。...优点：（1）不需要额外标签（2）不影响屏幕阅读器使用者缺点：关闭浏览器显示图片，同时启用CSS支持时，文字图片均不可显示

2.4K10 0

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

尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。为什么需要ARIA？...有人会说，我使用HTML5, 恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。...ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。...role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。...状态值，是在用户交互时必然要修改的属性值，是不太可能修改的ARIA的规则当你特别想去用的时候

7982 1

10条提高网站可访问性的建议

如果一个图像是装饰性的或者跟页面主题思想没有强关联，你可以简单的使用alt =“”。屏幕阅读器告诉用户，一个标签是一个图像，所以没有必要说明这是XX的图片，可以直奔主题。...当您通过或选择标签时，您是在有意识的更改元素的含义，提供层次结构，并构建页面信息的树结构。屏幕阅读器不会忘记这一点。事实上，语义是其最有用的武器之一。...7、必要时使用roles 为了告诉屏幕阅读器用户我们的链接触发一个动作，实际上并不是一个普通的a标签，我们必须添加一个值为“button”的roles属性。但要小心！...，但仍然让屏幕读者知道他们，那么最后一个选项是最好的。...以下是审核网站可访问性的最佳工具列表： ChromeVox：适用于Mac和Windows用户，此Chrome扩展程序是可用于测试网站的屏幕阅读器。

9681 0

前端无障碍开发指南

未定义标签的alt属性，影响辅助技术（Assistive technologies, ATs) 如屏幕阅读器等设备获取图片信息。 3....不同的语言类型在屏幕阅读器中的发音是不同的，比如six单词在法语和英文两种类型的屏幕阅读器中的发音就非常的不同。...但我们在开发时往往会忽略 HTML 元素的实际语意，而更多采用无语意的和标签（和之外的近 104 个 HTML 标签都具有语义信息）。...ARIA 允许 Web 开发者创建只有 ATs 技术（比如屏幕阅读器）可以看到的内容（属性），用以实现 HTML 无法达成的无障碍功能，比如：增强交互式控件的可访问性，比如下拉菜单、弹窗，滑块等为页面结构定义有用的地标...与标签类似，读屏软件对于和标签的信息获取，依赖于标签包裹的文本。使用”阅读更多“，甚至图片作为这类标签的包裹内容，并不能为用户提供足够的信息。

9392 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云