可访问性旨在使每个人都可以使用应用程序或网站,包括视力,听觉,走动或认知障碍等残疾人。
我可以使用诸如 我的自定义强调txt 在不违反可访问性规则 (WCAG) 的情况下,我不希望此自定义标头成为
如果我将 Chrome 中的默认显示字体设置(设置 > 外观 > 自定义字体)更改为除默认值之外的任何其他内容。我的网页确实显示了字体的变化。 它应该是什么样子...
我在网上查了一下,我听人们说 访问说明符:: 访问说明符决定如何 可访问的字段是要编码的 其他课程。访问范围从...
如何解决因虚假陈述而导致 Google Merchant Center 暂停的问题?
梦想您的产品和品牌出现在第一个搜索结果页面上?让我们让它成为现实。雇用我进行 Google 购物广告设置和优化,提高您的广告支出回报率 (ROAS)。准备好...
虽然我的 CSS 样式成功地将焦点边框应用于表单元素,但在启用 VoiceOver 时,此行为不一致。 VoiceOver 似乎在
编写我的第一个 Firefox 扩展,我试图让它将网页上的字体大小更改为用户输入的字体大小。 然而我的分机目前似乎没有发出任何请求......
我试图让屏幕阅读器 (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
我想使用 pa11y-ci 作为经过身份验证的用户测试页面。 我像这样运行 pa11y-ci: pa11y-ci --sitemap http://www.example.com/sitemap.xml --sitemap-find https --sitemap-replace http 我发现
解决录音时麦克风同时拾取用户语音和 NVDA(非可视桌面访问)语音输出的问题
我在我的应用程序中实现了语音转文本功能,并且我正在使用 navigator.mediaDevices.getUserMedia({audio: true}) API 利用连接的耳机麦克风进行语音输入。
如果 h3 或 h4 的语义意义不太重要,它是否应该高于 h2?
我有一个带有眉毛的组件,眉毛下方有一个更大的标题。标题更大,对组件的整体主题更重要。眉毛更柔顺了...
对“云迁移”这个流行词感到困惑吗?考虑将您的业务运营迁移到云端但感到不知所措?这篇文章用简单的术语解释了云迁移以及如何迁移
我的网站有带有选项卡式导航的轮播/滑块面板。每个面板都显示了一条书籍封面的“河流”。一次显示 5 个封面,然后单击下一张/上一张幻灯片 3 本书出炉,3 本书新出……
设置accessibilityElementsHidden是否递归工作?
简单的问题:如果我在 UIViewController 上设置accessibilityElementsHidden,它会自动隐藏其所有视图及其子视图等中的所有内容吗? 我正在转向accessibilityElementsH...
在 NVDA 中,当使用 aria-label/aria-labelled 时,按钮在按内部图标中的 Enter/空格键时获得焦点
重现问题的步骤: 打开链接:https://nvda-test.w3spaces.com/button-accessibility-label.html 两个按钮:此页面包含两个按钮,每个按钮内部都有一个可聚焦的图标。 ARIA 属性...
如何更改浏览器中的“prefers-reduced-motion”设置?
有大量关于如何在CSS中使用prefers-reduced-motion媒体查询的文档。 这很棒,但现在我在 CSS 中使用了 Preferreds-reduced-motion,我希望能够测试...
我有一个带有普通输入字段和占位符的表单,并且它们不会被灯塔测试标记为可访问性。 此表单中还有一个使用自定义范围的多选组件
我正在尝试使用 p5 js 库制作游戏,我希望用户能够使用选项卡按钮进入画布。 我尝试添加 tabindex = "0" 但这不起作用。我有能力...
当标签和输入存在“for”和“id”关联时,是否需要 aria-labelledby?
以下是 Adobe Spectrum 的文本字段组件的 html 结构:https://react-spectrum.adobe.com/react-spectrum/TextField.html 上有 for 属性, 上有 id 以下是 Adobe Spectrum 的文本字段组件的 html 结构:https://react-spectrum.adobe.com/react-spectrum/TextField.html for 上有 <label> 属性,id 上有 <input> 属性,可让屏幕阅读器在输入聚焦时读出标签。那么为什么这里的 aria-labelledby 是必要的呢?根据他们的文件,它指出 “如果未指定可见标签,则必须向 TextField 提供 aria-label 以实现可访问性。如果该字段由单独的元素标记,则必须使用标签元素的 id 提供 aria-labelledby 属性。 ” 但 for 和 id 关联还不够吗? <div class="A-HlBa_spectrum-Field A-HlBa_spectrum-Field--positionTop YO3Nla_spectrum-Textfield-wrapper"> <label id="react-aria3159902326-:r2i:" class="A-HlBa_spectrum-FieldLabel" for="react-aria3159902326-:r2h:">Name</label> <div class="YO3Nla_spectrum-Textfield YO3Nla_spectrum-FocusRing YO3Nla_spectrum-FocusRing-ring A-HlBa_spectrum-Field-field"> <input type="text" id="react-aria3159902326-:r2h:" aria-labelledby="react-aria3159902326-:r2i:" class="YO3Nla_spectrum-Textfield-input YO3Nla_i18nFontFamily" value=""> </div> </div> 你是对的。当字段已经有关联标签时,不需要 aria-label 和 aria-labelledby。 按照 ARIA 规则, 除非确实需要,否则不应该使用 ARIA 你不应该用 ARIA 覆盖已经隐含的或由其他方式给出的内容 这里,aria-labelledby 显然是多余的,所以应该删除。 事实上,冗余可能是有害的。带有或不带有 ARIA 的元素有时会表现得略有不同,并且会在可访问的名称计算中调用错误或不需要的结果。 通常,ARIA 优先,但这只是标准。屏幕阅读器并不总是完全遵守标准。 他们的文档指出,当没有可见标签时,需要 aria-label 或 aria-labelledby。 这或多或少也是 WCAG 所说的。 这里所说的可见,你必须理解为屏幕阅读器可见,不一定在屏幕上可见。 作为他们自己的文档的配对,他们不应该在这里包含该咏叹调标签。 如果代码是机器生成的,他们应该改进算法,以便仅在真正必要时才包含 aria-label / aria-labelledby。
SonarCloud 分析抱怨 元素:“具有 ARIA 角色的元素必须使用有效的非抽象 ARIA 角色。“none”不是有效的角色。&... SonarCloud 分析抱怨一个 <li role="none"> 元素:“具有 ARIA 角色的元素必须使用有效的非抽象 ARIA 角色。“none”不是有效的角色。” 我找不到任何信息解释为什么“无”会被视为无效或抽象。 为什么“无”不被视为有效? 这是一个有效的角色,具有非常明确的语义: MDN 数字11y w3.org 我认为 SonarCloud 分析在这里是错误的