可访问性旨在使每个人都可以使用应用程序或网站，包括视力，听觉，走动或认知障碍等残疾人。
编写我的第一个 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...
如果卡片也具有某种“状态”，我正在努力理解哪些内容应该属于标题。 这种情况发生在带有生成
我需要有用于以角度跳过导航面板的链接，移动到内容部分工作正常，但不遵循选项卡顺序。问题是当用户激活跳到主要内容链接时...
我正在使用 Vue 和多选来获得国家/地区下拉列表。当下拉列表预先填充了某些值并被禁用时，就会出现问题。我有一个要求，这个值应该仍然是