屏幕阅读器是一种软件，允许盲人或视力下降的人使用计算机。
在我们正在开发的网页中，我们有一些表格，其中的列标题（用scope =“col”标记为ths）包含一个排序按钮，当浏览标题行时，该按钮会被读取...
当一个地标元素内部也有一个标题时，它应该有一个 aria 标签吗？
屏幕阅读器用户有多个选项来访问页面上的内容。 例如，所有标题的列表，还有地标的列表。 使用 aria-label，您可以标记一个地标。 考虑
在什么情况下我们应该选择而不是？ 对于屏幕阅读器用户 或 重要吗？屏幕阅读器软件是否通知用户内容位于 ... 在什么情况下我们应该选择<dl>而不是<ul>？ 对于屏幕阅读器用户 <ul> 或 <dl> 重要吗？屏幕阅读器软件是否通知用户内容位于 <ul> 或 <dl>？ A <dl> 是定义列表。它应该用在字典这样的情况下： 用例： <dl> <dt>Thesaurus</dt> <dd>A book for finding synonyms of other words, often alphabetical. Similar to a dictionary.</dd> </dl> 以上结果： 同义词库 一本用于查找其他单词同义词的书，通常按字母顺序排列。类似于字典。 这个想法是，要定义的术语保存在 <dt> 元素中，并且该术语的定义在 <dd>. 中给出 A <ul> 是一个无序列表。现在，<dl>并不意味着其内容有任何顺序，但它确实暗示了其子级之间的语义关系。然而，<ul> 可以包含任何未排序的内容。 当您使用一组定义而不仅仅是无序项目列表时。 对于像乔纳森答案评论中的示例这样的模棱两可的情况（人名然后描述，问题然后答案），为什么不安装一两个屏幕阅读器的试用版并找出最适合阅读的结构？ 这里有两个（来自这里）： 下巴 窗眼
在这个问题中，我们将考虑 2 个示例，但请注意，这个问题是关于任意加载占位符的。 以下是加载占位符的 Bootstrap 5 示例： 在这个问题中，我们将考虑 2 个示例，但请注意，这个问题是关于 任意 加载占位符。 这是加载占位符的 Bootstrap 5 示例： <div class="card" aria-hidden="true"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title placeholder-glow"> <span class="placeholder col-6"></span> </h5> <p class="card-text placeholder-glow"> <span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span> <span class="placeholder col-8"></span> </p> <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a> </div> </div> 但是仅仅aria-hidden="true"就足够了吗？ 屏幕阅读器等如何理解加载过程？ 尝试添加aria-label： <div class="card" aria-hidden="true" aria-label="Loading in progress. Please wait."> <!-- --> </div> 2024 年 9 月，HTML 验证器对此提出投诉： 可能滥用“aria-label”。 （如果您不同意此警告，请提交问题报告或发送电子邮件至 [email protected]。） 如果删除aria-hidden="true"，则相同。 再举一个例子我想考虑一下。 <article> <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> <div aria-busy="true"> <h3><a href="[…]">Glossier Roof Party</a></h3> <img src="[…]" […] alt="[…]"> <p> Gastropub sartorial venmo hashtag […] </p> </div> </article> 未准备好显示的内容已被aria-busy="true"隐藏。但是，在加载过程中从 DOM 中unmount这部分并不难。为此，将留下下面的代码： <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> Loading跨度在视觉上是隐藏的，因此屏幕阅读器可以加载。但它如何理解整个 <div class="skeleton"> 是加载占位符？ 使用 aria-hidden=true 可以完全隐藏屏幕阅读器的内容。因此，同时放置 aria 标签是完全没有用的，而且是矛盾的。 一般来说，将 aria-hidden=true 放在大代码块上并不是一个好习惯： 一旦内容准备好，您很容易忘记将它们全部删除，特别是如果您像在其中一个片段中那样随机地将 aria-hidden=true 放在任何地方 如果内容在 aria 隐藏内容中包含任何可聚焦元素（链接、表单元素等），那么您会遇到更大的问题：可以使用选项卡访问该元素，但不能使用文档导航访问该元素，并且可能无法读取该元素当对焦时。这是另外一件需要注意的事情，您一定不要忘记在删除 aria-hidden=true 的同时删除 tabindex=-1 属性 aria-hidden 应谨慎使用，仅在非常精确的情况下使用，当然不适用于大块代码。 事实上，对于当前正在加载的内容，更安全的是： 仅在内容准备好时才将内容放入 DOM，而不是在此之前 使用 CSS display:none 或 Visibility:hidden 隐藏当前正在加载的内容，这保证了无论使用何种方式读取页面，它都完全不可见、不可读和不可操作 现在关于如何告诉用户正在加载某些内容的第二个问题，当然，如果您将加载横幅放在 aria-hidden=true 下，则完全没有用。 您可以使用 aria-live=polite 将此类加载消息放置在实时区域中，这样每次内容更改时都会宣布该消息。 许多资源提供了此类加载横幅的示例。 注意：aria-live 用于加载消息，例如“正在加载，请稍候”，而不是用于当前正在加载的内容本身。
屏幕阅读器始终将列标题视为行之一。假设一个表格有 3 行和 1 列标题，那么屏幕阅读器会将其读取为 4 行；这包括列标题 +...
使用 Itext7 html pdf 在 PDF 中创建隐藏（仅限屏幕阅读器）文本
我正在尝试向我的 pdf 添加文本，该文本只能由屏幕阅读器查看。该 pdf 包含一个将负数（即 -4.565）转换为 (4.565) - 红色的表格。当我使用屏幕时...
我正在修改现有的 WPF、MVVM 应用程序（使用 .NET 8），以便它可以支持屏幕阅读器。为了方便和快速测试，我使用 Windows 11 Narrator，但也将使用 JAWS 进行测试...
电话号码通常都是数字，忽略括号、破折号、加号等，因此电话号码的输入字段通常是数字。 当屏幕阅读器遇到数字输入字段时，它会...
是否有 JavaScript API 可以查询设备的本机屏幕阅读器来启动？ 如果支持非常有限，但如果它至少是一个标准，那么更好，这样在未来，更多......
标题已经说明了一切。 我很好奇这是否被视为嵌套列表，如果是，它是否是有效的 HTML。我也很好奇任何可访问性的影响。 我用 VoiceOver 测试过，看起来...
标记表单一部分的最佳做法是什么？ 创建 似乎不是“好”方法。 我有一个很大的表格，有不同的部分，所有东西我... 标记表单一部分的最佳做法是什么？ 创建一个<div tabindex="0">似乎不是“好”方法。 我有一个包含不同部分的大表单，所有内容都在一个站点上（没有向导或其他东西）。 我猜使用屏幕阅读器的用户只是使用 TAB 在不同的输入之间导航，一旦他们到达表单的不同区域，我想解释一下它的含义。 有点像标记一个 div，一旦他们到达该 div 中的输入 -> 读取一些内容。 只是一个简化的例子： <form> <!-- some inputs about the company --> <h2>Company</h2> <div> <label for="company-name-input">Company Name</label> <input type="text" id="company-name-input"> </div> <div> <label for="company-address-input">Company Address</label> <input type="text" id="company-address-input"> </div> <h2>Contact Partners</h2> <!-- here are inputs about important person you can contact --> <!-- how do I notify users about this fact, when they just tab thought the form I read it's no good to add a tabindex="0" to the headline --> <div> <!-- person one --> <label for="person-email-1">E-Mail</label> <!-- I could make a aria-label="Here is the email of your first person" but in case someone tabs here from below they might miss that.. and always have a "Person nr X before each input might be strange as well --> <input type="email" id="person-email-1"> <!-- all the other persons --> <button>Add Partner</button> </div> </form> 当用户将输入集中在某个区域而不在每个输入中重复该信息时，让用户意识到他们正在为联系人编辑字段的最佳实践是什么？ <fieldset>元素用于对表单中的相关数据进行分组。 <legend> 元素定义 <fieldset> 元素的标题。 <form> <!-- some inputs about the company --> <fieldset> <legend>Company</legend> <div> <label for="company-name-input">Company Name</label> <input type="text" id="company-name-input"> </div> <div> <label for="company-address-input">Company Address</label> <input type="text" id="company-address-input"> </div> </fieldset> <fieldset> <legend>Contact Partners</legend> <!-- here are inputs about important person you can contact --> <!-- how do I notify users about this fact, when they just tab thought the form I read it's no good to add a tabindex="0" to the headline --> <div> <!-- person one --> <label for="person-email-1">E-Mail</label> <!-- I could make a aria-label="Here is the email of your first person" but in case someone tabs here from below they might miss that.. and always have a "Person nr X before each input might be strange as well --> <input type="email" id="person-email-1"> <!-- all the other persons --> <button>Add Partner</button> </div> </fieldset> </form>
我对自动完成有相当标准的使用，它与固定选项示例相同。当我运行 NVDA 并按 Tab 键进入它时，它不会读出已选择的标签（在上面的情况下为“低俗小说...
我的代码中有 标记，该标记附加了工具提示，并且工具提示应该由 aria-描述的读取。 Mac 上的画外音只是忽略它，只宣布链接。 协会...
是否可以使用类似于 VoiceOver 的 NVDA 在屏幕上显示说出的单词？
Apple 的 VoiceOver 在朗读时会在屏幕左下角显示语音文本。 这个选项可以在 Windows 上使用 NVDA 打开吗？
https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/table/table.html 我按照 W3C 提供的示例来创建可访问的 DIV 表。我已经添加了适当的
我正在使用 :before 伪元素绑定到特定类来在 p 标签前面添加符号，CSS 如下所示： td > p.markerclass1:之前{ 位置：绝对； 左：-1rem； c...
我正在为各种输入类型制作可重用的输入组件，并且我正在尝试找出推荐的方法来实现可访问的只读输入 - 这不应该......
我正在努力使带有 aria-label 的 div 易于访问。 标题 Lorem ipsum 我正在努力使 div 与 aria-label 易于访问。 <main> <h1>Heading</h1> <input type="text" placeholder="text"> <p>Lorem ipsum dolor sit amet labore culpa! Ipsam.</p> <div role="region" aria-label="content summary"> summary </div> <button>Go back</button> </main> 我尝试了aria-describedby和aria-labelledby，但这些也不起作用。 如果没有 tabindex 属性，<div> 元素本身就不是可聚焦的。这意味着大多数屏幕阅读器（包括 VoiceOver）可能无法导航到它。 以下是如何确保 VoiceOver 读出 div： <div role="region" aria-label="content summary" tabindex="0"> summary </div>
我试图让屏幕阅读器 (NVDA) 将我的货币价值（美元）47.49 美元读取为“47 美元 49 美分”，但屏幕阅读器将我的货币价值读取为“4749 美元”。 我试图让屏幕阅读器 (NVDA) 将我的货币价值（美元）47.49 美元读取为“47 美元 49 美分”，但屏幕阅读器将我的货币价值读取为“4749 美元”。 <div class="perVendorCarDetails"> <span class="carCurrencySymbol">$</span> <span class="carPriceDollar">38</span> <span class="carPriceDot">.</span> <span class="carPriceCents">57</span> </div> 您的示例被 NVDA/Firefox 称为“美元三十八点五十七”。这不好。 如果您只是将其编码为<p>$38.57</p>，它将被读作“美元三十八点五七”。尽管这看起来/确实令人不快，但这正是 NVDA 用户所期望的。 例如，如果我去亚马逊，我会以 1.29 美元 的价格获得“一分二九”。 Target 经历了一场广为人知的无障碍诉讼，聘请了一家无障碍咨询公司，建立了一个无障碍团队，并使用屏幕阅读器进行了广泛的测试，宣布 39.99 美元 为“三十九点九九美元” 因此，您可能想做的最重要的事情是不要在 NVDA 用户想要花钱时让他们感到困惑。以与他们预期不同的方式呈现美元价值可以做到这一点。 但是，如果您坚持这种情况必须发生，您可以使用 aria-hidden 从 NVDA 隐藏您不喜欢的值，然后您可以将您想要的短语写到其后面的页面中，将其隐藏所有其他用户通过离屏CSS技术旨在做到这一点。 您的新 HTML： <p aria-hidden="true"> $38.57 </p> <span>38 dollars and 57 cents</span> 显然，您需要将美元金额分解为两个变量并分别写入两次。 aria-hidden="true" 对屏幕阅读器隐藏了 <p> 文本，因此屏幕阅读器只会阅读 <span> 中的内容。 现在使用 CSS 对用户隐藏 <span> 的内容： p[aria-hidden=true] + span { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } 您显然需要根据您的元素、ID、类等更改选择器。 您可以使用 aria-label 属性。 <span aria-label="47 dollars and 49 cents">$47.49</span> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
假设我有以下 HTML 句子： 请输入您的许可证号码 屏幕阅读器将“licence”一词误读为“liss-ens”（语音拼写）。它应该...