可访问性旨在使每个人都可以使用应用程序或网站,包括视力,听觉,走动或认知障碍等残疾人。
如何解决因虚假陈述而导致 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 分析在这里是错误的
以下 HTML 可以访问吗? 惊人的生活窍门!医生讨厌他! 以下 HTML 是否可以访问? <a id="myClickbaitArticlePreview" href="someUrl"> <h3>Amazing lifehack! Doctors hate him!</h3> <img alt="doctor is staring down a patient" src="procativeThumbnail"> <p>Compelling copy</p> </a> 我知道它是有效,基于这个答案。但它可访问吗?因为我正在使用屏幕阅读器 (JAWS) 审核具有类似文章结构的网站。读者一口气读完所有内容,这很令人困惑(但我不是盲人,所以我不知道你是否习惯了)。它还会在标题之后读取替代项,这在许多情况下可能会重复内容。 简短回答 从最宽松的意义上来说,它既有效又“可访问”,对于屏幕阅读器用户来说是良好的体验 - 可能不是。 它将通过所有 WCAG 指导,这么说吧。 更长的答案 如果没有在页面上下文中看到它,则很难告诉您这是否是最佳实践。需要考虑的一些事项:- 这些大型“链接卡”周围是否有足够的空白,供行动不便/准确性/灵巧性有问题的人安全地放置手指在移动设备上滚动页面。 如果链接卡已聚焦,则焦点指示器易于查看和足够的对比度等(要检查的标准内容,但在卡类型链接上经常被遗忘) 如果屏幕阅读器用户通过标题循环页面,那么无论是在标题层次结构还是页面层次结构方面,卡片中都有 <h3> 是否符合逻辑。 alt 描述在其上下文中是否正确?如果图像不直接相关,则最好使用 aria-hidden 或空(非空)alt 属性(alt="" NOT alt)对屏幕阅读器用户隐藏它们。我几乎肯定会说情况会是这样,但这又是你的判断。 alt 与 <h3> 标题相同 - 这几乎肯定是一个大禁忌。 alt 属性应该在上下文中描述图像。如果 alt 文本与标题相同,则使图像呈现/对屏幕阅读器隐藏,如上一点所述。 这些元素应该是 <article> 才能在语义上正确吗? 它们是否包含在 <ul> 中,以便屏幕阅读器用户知道有多少个项目? 超链接上的 aria-label 以及文本的压缩版本是否合适(覆盖超链接内的文本)?这取决于内容,因此请使用最佳判断。 在每篇文章末尾设置一个看起来像按钮的超链接会更好吗?如果是这样,请确保它不只是说“阅读更多”(尽管在按下按钮时,您可以将“阅读更多”作为按钮文本,并在之前有一些视觉上隐藏的文本,上面写着“惊人的生活窍门!医生讨厌他!”它)。 正如您所知,如果没有在上下文中看到它们,我们无法告诉您很多事情,但希望以上内容可以给您一些需要思考的事情。 至于屏幕阅读器一口气读完所有内容,这是预期的行为,你只需要习惯它!当您习惯时,您可以随时放慢设置中的语速或增加播音员的冗长程度(这样它可以更详细地说明您相对于其他元素所处的元素)。 根据 HTML 标准,a 元素具有透明的内容模型,唯一的例外是它不能包含交互式元素。 标题不是交互元素。所以根据标准来说这很好。 关于可访问性,文本链接未优化。 2.4.4 中的 WCAG:链接目的(在上下文中) 期望“有意义的链接”。拥有太多信息并不是一个好的做法。更好的替代方案是在 <div> 上提供 javascript 单击处理程序,同时仅在 h3 上提供 HTML 链接元素。 在您的示例中“医生正在盯着病人”没有描述链接目的地,不应成为链接文本替代的一部分。 您所需要做的就是向完全描述链接目的/目的地的标签添加一个 aria-label 。当焦点切换到链接上时,这将覆盖嵌套的 H3 文本以及嵌套的 alt 属性,但仍然让屏幕阅读器用户可以自由地按标题导航且仅听到标题文本,以及按图形导航且仅听到alt 属性。
input type="submit" 与按钮标签可以互换吗? [重复]
input type="submit" 和按钮标签可以互换吗?或者如果有什么区别那么何时使用 input type="submit" 和何时使用按钮? 如果没有区别那为什么我们有 2 t...
如果卡片也具有某种“状态”,我正在努力理解哪些内容应该属于标题。 这种情况发生在带有生成