草庐IT

关于 html：如何防止屏幕阅读器在阅读此 div 标签的文本时说”组”？

codeneng 2023-03-28 原文

How do I prevent the screen reader from saying "group" when reading this div tag's text?

在我的网页上，我有一个 div(如下所示)，其中包含我希望屏幕阅读器阅读的文本。

HTML

1
   "text needs to be read"

即使没有提供 aria-label，我也能听到文本被阅读。但是，我听说"文本需要阅读组"。我想知道如何避免它说"组"？我没有为 div 标签设置组角色。

另一个例子

这是另一个更清晰地描述问题的示例

1
<span class="jw-icon jw-icon-inline jw-button-color jw-reset jw-text-live" tabindex="-1" data-clicked="true">Live</span>

在任何浏览器中运行上述代码段。它使屏幕阅读器将其宣布为"Live, group"。
有什么办法可以减轻这种行为。预期的行为应该就像屏幕阅读器应该将其读取为"实时"

  • 哪个屏幕阅读器软件

  • 这里发生了很多事情。

    首先，网页上的所有文本都可供屏幕阅读器使用，并且不需要 tabindex="0" 即可使其可供阅读。屏幕阅读器提供了许多快捷键来导航到不同类型的元素(标题、表格、列表等)。对于没有直接导航键的元素，屏幕阅读器用户可以使用向上/向下箭头键浏览可访问性树(类似于 DOM)。

    其次，关于tabindex="0"，它应该只设置在交互元素上。 tabindex 规范说：

    authors should only make elements focusable if they act as interactive controls or widgets. In addition, authors should ensure that these focusable elements have an appropriate ARIA role attribute.

    关于规范引用第二句中的 ARIA 角色，如果您的元素确实获得焦点，如果它不是本机可聚焦的元素(例如 或 <button> 或 <input>)，那么它需要有一个适当的角色，以便屏幕阅读器用户知道如何与之交互。

    与此相关，您提到了aria-label。 aria-label 仅适用于具有适当角色的元素。请参阅"2.10 实用支持：aria-label、aria-labelledby 和 aria- describeby"。

    鉴于所有这些，回答您的问题有点困难，因为您的简单示例不够具体。没有角色的 不应读作"组"。组通常是 role="region"(或 <section>)。您听到的行为可能取决于您使用的浏览器、屏幕阅读器、屏幕阅读器的导航方式(tab 或 arrow 或 quicknav 键)。

这里发生了很多事情。

首先，网页上的所有文本都可供屏幕阅读器使用，并且不需要 tabindex="0" 即可使其可供阅读。屏幕阅读器提供了许多快捷键来导航到不同类型的元素(标题、表格、列表等)。对于没有直接导航键的元素，屏幕阅读器用户可以使用向上/向下箭头键浏览可访问性树(类似于 DOM)。

其次，关于tabindex="0"，它应该只设置在交互元素上。 tabindex 规范说：

authors should only make elements focusable if they act as interactive controls or widgets. In addition, authors should ensure that these focusable elements have an appropriate ARIA role attribute.

关于规范引用第二句中的 ARIA 角色，如果您的元素确实获得焦点，如果它不是本机可聚焦的元素(例如 或 <button> 或 <input>)，那么它需要有一个适当的角色，以便屏幕阅读器用户知道如何与之交互。

与此相关，您提到了aria-label。 aria-label 仅适用于具有适当角色的元素。请参阅"2.10 实用支持：aria-label、aria-labelledby 和 aria- describeby"。

鉴于所有这些，回答您的问题有点困难，因为您的简单示例不够具体。没有角色的 不应读作"组"。组通常是 role="region"(或 <section>)。您听到的行为可能取决于您使用的浏览器、屏幕阅读器、屏幕阅读器的导航方式(tab 或 arrow 或 quicknav 键)。

  • 我知道了。我删除了 tabIndex，我对它使用 NVDA 和 Chrome 没有任何问题。但是，如果我使用 Edge Narrator，如果我使用选项卡或箭头，屏幕阅读器将无法读取 div 中的文本。我应该赋予 div 什么样的角色，以便叙述者可以阅读它？ div 仅包含 Web 应用程序标头中的一些信息。
  • 一个更完整的代码示例会有所帮助。如果嵌入在 <header> 中(它有一个隐含的 role="banner")，你不应该需要任何其他东西。您正在使用 narrator 中的向下箭头来遍历 DOM？它跳过了 ?你在任何地方都有 aria-hidden="true" 吗？

8221阅读器sectionwynaccessibilityhtmlscreen-readers

有关关于 html：如何防止屏幕阅读器在阅读此 div 标签的文本时说”组”？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  4. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  5. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  6. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  9. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  10. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

随机推荐