accessibility 相关问题

可访问性旨在使每个人都可以使用应用程序或网站,包括视力,听觉,走动或认知障碍等残疾人。

什么时候我不需要使用h1-h6标题来创建强调文本

我可以使用诸如 我的自定义强调txt 在不违反可访问性规则 (WCAG) 的情况下,我不希望此自定义标头成为

回答 1 投票 0

Chrome 设置后我的网站中的字体样式没有改变?

如果我将 Chrome 中的默认显示字体设置(设置 > 外观 > 自定义字体)更改为除默认值之外的任何其他内容。我的网页确实显示了字体的变化。 它应该是什么样子...

回答 2 投票 0

访问说明符和访问修饰符之间的区别

我在网上查了一下,我听人们说 访问说明符:: 访问说明符决定如何 可访问的字段是要编码的 其他课程。访问范围从...

回答 6 投票 0

如何解决因虚假陈述而导致 Google Merchant Center 暂停的问题?

梦想您的产品和品牌出现在第一个搜索结果页面上?让我们让它成为现实。雇用我进行 Google 购物广告设置和优化,提高您的广告支出回报率 (ROAS)。准备好...

回答 1 投票 0

双重关注表单元素和图标,并打开语音

虽然我的 CSS 样式成功地将焦点边框应用于表单元素,但在启用 VoiceOver 时,此行为不一致。 VoiceOver 似乎在

回答 1 投票 0

如何让 Firefox 扩展联系网页更改字体大小?

编写我的第一个 Firefox 扩展,我试图让它将网页上的字体大小更改为用户输入的字体大小。 然而我的分机目前似乎没有发出任何请求......

回答 1 投票 0

屏幕阅读器无法正确读取价格(“$47.49”)

我试图让屏幕阅读器 (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

回答 2 投票 0

在 pa11y-ci 中测试之前如何登录/验证?

我想使用 pa11y-ci 作为经过身份验证的用户测试页面。 我像这样运行 pa11y-ci: pa11y-ci --sitemap http://www.example.com/sitemap.xml --sitemap-find https --sitemap-replace http 我发现

回答 2 投票 0

解决录音时麦克风同时拾取用户语音和 NVDA(非可视桌面访问)语音输出的问题

我在我的应用程序中实现了语音转文本功能,并且我正在使用 navigator.mediaDevices.getUserMedia({audio: true}) API 利用连接的耳机麦克风进行语音输入。

回答 1 投票 0

如果 h3 或 h4 的语义意义不太重要,它是否应该高于 h2?

我有一个带有眉毛的组件,眉毛下方有一个更大的标题。标题更大,对组件的整体主题更重要。眉毛更柔顺了...

回答 1 投票 0

什么是上云,啄木鸟如何帮助企业上云?

对“云迁移”这个流行词感到困惑吗?考虑将您的业务运营迁移到云端但感到不知所措?这篇文章用简单的术语解释了云迁移以及如何迁移

回答 1 投票 0

在显示多个项目的滑块中保持 tabindex 顺序逻辑

我的网站有带有选项卡式导航的轮播/滑块面板。每个面板都显示了一条书籍封面的“河流”。一次显示 5 个封面,然后单击下一张/上一张幻灯片 3 本书出炉,3 本书新出……

回答 1 投票 0

设置accessibilityElementsHidden是否递归工作?

简单的问题:如果我在 UIViewController 上设置accessibilityElementsHidden,它会自动隐藏其所有视图及其子视图等中的所有内容吗? 我正在转向accessibilityElementsH...

回答 2 投票 0

在 NVDA 中,当使用 aria-label/aria-labelled 时,按钮在按内部图标中的 Enter/空格键时获得焦点

重现问题的步骤: 打开链接:https://nvda-test.w3spaces.com/button-accessibility-label.html 两个按钮:此页面包含两个按钮,每个按钮内部都有一个可聚焦的图标。 ARIA 属性...

回答 1 投票 0

如何更改浏览器中的“prefers-reduced-motion”设置?

有大量关于如何在CSS中使用prefers-reduced-motion媒体查询的文档。 这很棒,但现在我在 CSS 中使用了 Preferreds-reduced-motion,我希望能够测试...

回答 4 投票 0

自定义占位符元素未识别为可访问性占位符

我有一个带有普通输入字段和占位符的表单,并且它们不会被灯塔测试标记为可访问性。 此表单中还有一个使用自定义范围的多选组件

回答 1 投票 0

如何使 p5 js canvas 选项卡可访问

我正在尝试使用 p5 js 库制作游戏,我希望用户能够使用选项卡按钮进入画布。 我尝试添加 tabindex = "0" 但这不起作用。我有能力...

回答 1 投票 0

我想为我的 React 组件库添加辅助功能支持,我应该从哪里开始?

有什么文件或者例子可以参考吗?我不知道如何开始..

回答 1 投票 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。

回答 1 投票 0

“无”是有效的 Aria 角色吗?

SonarCloud 分析抱怨 元素:“具有 ARIA 角色的元素必须使用有效的非抽象 ARIA 角色。“none”不是有效的角色。&... SonarCloud 分析抱怨一个 <li role="none"> 元素:“具有 ARIA 角色的元素必须使用有效的非抽象 ARIA 角色。“none”不是有效的角色。” 我找不到任何信息解释为什么“无”会被视为无效或抽象。 为什么“无”不被视为有效? 这是一个有效的角色,具有非常明确的语义: MDN 数字11y w3.org 我认为 SonarCloud 分析在这里是错误的

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.