屏幕阅读器是一种软件，允许盲人或视力下降的人使用计算机。
假设我有以下 HTML 句子： 请输入您的许可证号码 屏幕阅读器将“licence”一词误读为“liss-ens”（语音拼写）。它应该...
大多数为仅屏幕阅读器元素提供 css 类的指南建议如下所示（来自 https://medium.com/web-dev-survey-from-kyoto/the-visually-hidden-technique-303f8e2bd.. .
所以这似乎是一个非常简单的问题，但我无法理解它。我有以下 HTML： 单词 1 - 单词 2 我知道这不是
在现有的 Web 应用程序中存在一些可访问性问题。某些视图表示键值对的集合，例如姓名 -> John Doe、街道 -> 对角巷。此刻...
有没有办法让链接在屏幕阅读器上显示为纯文本，但明显是一个链接？
我们正在努力减少屏幕阅读器在我们的博客文章中读出的冗余链接。目前帖子的标题是可点击的链接，“阅读更多”也是可点击的
辅助功能团队告诉我，单个页面上应该只有一个 H1。 互联网上的参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#
macOS 上的 VoiceOver + Safari 无法正确宣布 aria 扩展状态
在我们的 Angular 应用程序中，我们有一个按钮负责打开菜单。其上有一个指令，其中包含切换菜单的逻辑。在我们的例子中，菜单只是一个菜单...
在我的 Angular 项目中，我有以下代码（简化）： 在我的 Angular 项目中，我有这段代码（简化）： <mat-radio-group aria-labelledby="readingListGroupLabel" [(ngModel)]="selectedExportTo" name="exportTo"> <mat-radio-button aria-label='choose to export to reading list collection' *ngFor="let option of exportToOptions" [value]="option"> {{option}} </mat-radio-button> </mat-radio-group> 但由于某种原因，mat-radio-button“选择导出到阅读列表集合”的咏叹调标签被缩短为 30 个字符 - 在浏览器中我看到： ng-reflect-aria-label="Choose to export to reading li" 这是为什么？ 啊！这是一个奇怪的问题，但这是解决方法，我知道这不是最好的解决方案，但是是的，你可以解决这个问题 <mat-radio-group aria-labelledby="readingListGroupLabel" [(ngModel)]="selectedExportTo" name="exportTo"> <mat-radio-button *ngFor="let option of exportToOptions" [value]="option"> {{option}} </mat-radio-button> </mat-radio-group> fullLabel = 'choose to export to reading list collection' constructor(private renderer: Renderer2) @ViewChildren(MatRadioButton) radioButtons: QueryList<MatRadioButton> ngAfterViewInit(){ const radioButtonComponent = this.radioButton.first const radioButtonElement = radioButtonComponent._elementRef.nativeElement this.renderer.setAttribute(radioButtonElement, 'aria-label', this.fullLabel) } 堆栈闪电战
我有以下日期选择器。问题是，当运行屏幕阅读器（NVDA）时，当使用键盘将日期选择器网格上的选择移动到不同的单元格时，屏幕阅读器只是...
我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 标签。 这个网站... 我正在转换应用程序以符合 W3 辅助功能指南。 我需要让屏幕阅读器一起读取标题和值，仅使用 <p> 标签。 该网站有多个显示为只读的表单，如果用户希望编辑字段，则必须单击“编辑”按钮以打开模式。 我对只读字段的问题是，该网站的结构是标题显示在左侧，相应的值显示在右侧。像这样的东西： <div class="form-group" id="-serviceName"> <p id="-title" class="col-sm-4 form-control-title">Some text</p> <p id="-value" class="col-sm-8 form-control-static">Some value</p> </div> 最初我使用的是<label>，但是当我打开页面时，我的值不是输入，WAVE 评估工具向我发出警报： “孤立的表单标签：存在表单标签，但未与表单控件正确关联。” <div class="form-group" id="-serviceName"> <label class="col-sm-4 control-label" id="-label">Some text</label> <div class="col-sm-8 col-md-6 col-lg-4"> <p class="form-control-static" id="-value">Some value</p> </div> </div> 我尝试过使用aria-labeledby和aria-describedby，但是使用箭头键，屏幕阅读器始终独立地呈现信息。 首先它显示“一些文本”，然后我必须再次单击箭头键，它显示“一些值”。 我想让屏幕阅读器将两个值一起读取为：“某些文本某些值” 就屏幕阅读器的使用而言，您已有的代码不应该存在重大问题。 他们可以很好地访问键值对，并且它将按顺序读取它们，这将首先读取标题，然后读取值（向下读取时）。 当涉及到WCAG 标准信息和关系时，使用<p>可能不足以解释第二个文本是用户输入，而第一个文本是用户无法更改的静态标签。 可能有几种有效的方法可以解决这个问题。 推荐解决方案 如果这是表单数据，用户可能期望（取决于您的用例）以表单而不是阅读模式进行导航。因此，他们可能会使用 Tab 键从一个表单字段跳转到另一个表单字段。 目前“表单”中没有表单字段。我推荐的解决方案是真正的readonly形式： <form aria-labelledby="form-title"> <h2 id="form-title">Your form data</h2> <p> <label>Some text <input readonly type="text" value="Some value"> </label> </p> <p><button>Edit</button></p> </form> 这也将清楚地传达给任何辅助技术，我们正在处理表单数据，但在当前状态下无法更改。表单必须有一个可访问的名称，这就是为什么我用 aria-labelledby 来指代可见标题。 <label>元素必须与表单输入关联，可以通过for属性或通过包装输入来关联。 替代解决方案 将两篇文章放在一起<p>加强了它们的关系，并且在使用屏幕阅读器阅读时，标题和值之间的停顿更少 <p class="form-group" id="a2ba84-serviceName"> <div id="a2ba84-title" class="col-sm-4 form-control-title">Some text</div> <div id="a2ba84-value" class="col-sm-8 form-control-static">Some value</div> </p> <dl>描述列表旨在形成一组键和值，并且经常在这种情况下使用 <dl> <div class="form-group" id="a2ba84-serviceName"> <dt id="a2ba84-title" class="col-sm-4 form-control-title">Some text</dt> <dd id="a2ba84-value" class="col-sm-8 form-control-static">Some value</dd> </div> </dl> 补充说明 aria-labelledby 和 aria-describedby 不能仅用于任何元素。它们用于具有可访问名称的ARIA 角色，主要是交互式控件、地标和表格元素。
为屏幕阅读器的日期选择器上的单元格添加 aria-label 属性
我有以下日期选择器。问题是，当运行屏幕阅读器（NVDA）时，当使用键盘将日期选择器网格上的选择移动到不同的单元格时，屏幕阅读器只是...
我有以下日期选择器。问题是，当运行屏幕阅读器（NVDA）时，当将日期选择器网格上的选择移动到不同的单元格时，屏幕阅读器只会显示“空白&...
此警告不断在 Visual Code 应用程序的终端中弹出 警告：PowerShell 检测到您可能正在使用屏幕阅读器并已 出于兼容性目的禁用 PSReadLine。 ...
我有这样的 HTML 结构： 传奇 标签文本 我有这样的 HTML 结构： <fieldset> <legend>Legend</legend> <span>Labeltext</span> <button aria-pressed="false">Filter 1</button> <button aria-pressed="true">Filter 2</button> </fieldset> span-Element 的作用就像两个按钮的标签。每个按钮独立作用。由于设计已给出，因此无法更改文本结构。 据我所知，不可能为两个按钮添加一个标签。 扩展按钮的标签并向其中添加“标签”（跨度）是否足够？像这样：<button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button> 另一种方法是使用 ARIA 创作实践指南 (APG) 中的复选框模式，它将“标签”（跨度）更改为标题。但没有其他标题，所以这可能会让屏幕阅读器用户更加困惑。 从技术上讲，您只需通过aria-labelledby引用同一元素即可将其用作多个元素的标签。 这将导致两个按钮具有“相同”的可访问名称，这并不是很有帮助。因此您还需要添加自己的内容。直接在 aria-label 中提供它是最简单的： <fieldset> <legend>Legend</legend> <span>Labeltext</span> <button aria-pressed="false" aria-label="Labeltext Filter 1">Filter 1</button> <button aria-pressed="true" aria-label="Labeltext Filter 2">Filter 2</button> </fieldset> 我对实际用例很好奇，因为已经有 Legend 足以为两个按钮提供包装标签。额外的 Labeltext 似乎没有必要。 如果 Labeltext “描述或注释当前元素”，则可以使用 aria-describedby： <fieldset> <legend>Legend</legend> <span id="button-desc">Labeltext</span> <button aria-pressed="false" aria-describedby="button-desc">Filter 1</button> <button aria-pressed="true" aria-describedby="button-desc">Filter 2</button> </fieldset>
Voice Over 在 iOS Safari 上无法读取 Aria 标签，但屏幕阅读器可以在 Chrome 上读取
我有一个播放图标，我想在它聚焦时宣布该图标。但有趣的是，屏幕阅读器会读取 aria 标签。然而，对于 iOS safari，使用滑动手势播放图标并不会...
我在我的网站上实现了“跳到内容”链接并将其隐藏在屏幕之外（除非：聚焦）。但是，我注意到在某些页面上我没有明确定义元描述，Google
我有以下标记： 活跃 展开 我有以下标记： <ul role="listbox"> <li role="option"> <span>Active</span> <button>Expand</button> </li> <li role="option"> <span>A list item only</span> </li> <li role="option"> <span>Additional List</span> <button>Expand</button> </li> </ul> li 元素有一个单击处理程序，可以触发操作。列表项中的按钮还会触发展开另一组面板的操作。 但是由于 role="option"，我在按钮元素上收到 AX 错误“交互式控件不得嵌套”错误。 我们需要 ul 和 li 角色拥有适当的屏幕阅读器输出，以便需要保留。有点卡在正确的修复上，非常感谢任何想法！谢谢你。 删除 ul 和 li 中的角色解决了问题，但屏幕阅读器不再宣布跨度标签。 根据列表框模式的规范： 列表框角色向辅助技术传达的交互模型不支持与选项内的元素进行交互。由于列表框小部件的这些特征，它不提供一种可访问的方式来呈现交互式元素列表，例如链接、按钮或复选框。 这就是您收到该错误的原因。如果您需要在 options 中包含交互式元素，请考虑使用 网格图案: 要呈现交互元素列表，请参阅网格图案。 但是，如果您的目的是创建导航链接列表，则可以仅使用 nav 元素。 不过，应该提供有关您正在尝试构建的内容的更多信息。 我希望您觉得这有帮助。
屏幕阅读器会忽略空字符串吗？或者如果字符串为空，我应该避免将它们添加到元素中吗？ 作为参考，这是 React 中的一个用例，您希望默认为空
<strong>中<em>或<em>中<strong>重要吗？
这重要吗在 一些文字 还是 中的 ？ 一些... 这重要吗<strong>在<em> <p><strong><em>Some text</em></strong></p> 或 <em> 中的 <strong>？ <p><em><strong>Some text</strong></em></p> 哪个在语义上是正确的并且更容易理解？ 更新： 屏幕阅读器在这两种情况下会如何表现？ 语法正确，但语义不正确。可以说，<strong> 是 <em> 的“高阶”形式。如果您正在寻找 <b> 和 <i> 的效果，请使用 CSS。请记住，不要因为元素的外观而选择元素，而是因为它们的含义。 只要您不混淆结束标签的顺序，您列出的两种方式在标记方面都是完全正确的。这是不正确的： <p><em><strong>Some text</em></strong></p> 如果您关心语义，则应避免在元素上同时使用 em 和 strong。 Strong：渲染为强调强 文字 （通过） 如果您关心有效的 HTML，这两种解决方案都很好且有效。 根据w3strong是强烈强调。这意味着 em 和 strong 不应在语义上一起使用，因为 strong 已经是 em。 如果您认为强强调应该是粗体斜体，我认为您应该添加一个 css 声明，在其中将强强调设置为粗体斜体。 从视觉效果角度来看，这并不重要。 在语义上，这很重要，因为您在同一元素（某些文本）中使用强调和强烈强调。这与在某些地方使用 h1 是一样的，只是因为您想要大文本，而不是因为它们是标题。 EM：表示强调。 STRONG：表示更强的强调。 来源 短语元素的呈现 取决于用户代理。一般来说， 可视化用户代理呈现 EM 文本 斜体和粗体文本。 **语音合成器用户代理可能 改变合成参数，例如 相应的音量、音调和速率。 所以要小心。使用 CSS 来完成视觉效果，而不是标记。 在 (X)HTML5 中，定义/含义是： em：表示其内容的重音强调（改变句子的含义）； strong：代表其内容的强烈重要性（不会改变句子的含义）。 所以这些元素原则上可以一起使用。 要获得想法，请考虑大声朗读文本（不过取决于语言）：em可能会改变语调（重音），strong可能会增加响度。 我认为从语义上来说，使用 <strong><em>foo</em></strong> 或 <em><strong>foo</strong></em> 没有什么区别；至少我在规范中找不到任何相关内容。
我正在编写一个 nwjs 游戏，我想为其添加辅助功能。 我目前正在使用 aria-live 属性与屏幕阅读器进行通信。 document.getElementById("游戏").