可访问性旨在使每个人都可以使用应用程序或网站，包括视力，听觉，走动或认知障碍等残疾人。
我最近的辅助功能报告显示我需要将其中一个按钮的触摸目标的 dp 增加到 48dp。 与像素相比，dp 是多少？如何知道要增加多少像素？
在 Swift 中，有很多用于键盘导航辅助功能的工具，但我在 SwiftUI 中找不到很多相同的工具。主要是，我想设置辅助路径的形状...
假设我正在尝试使用复选框列表构建多选输入： 我已将复选框放在带有 标签的 内 有一个输入可以让用户Fi... 假设我正在尝试使用复选框列表构建多选输入： 我已将复选框放在带有 <fieldset> 标签的 <legend> 内 有一个输入可以让用户过滤复选框，以便轻松选择他们想要的 当选择（选中）复选框时，将向用户显示结果按钮。单击此按钮还会取消选中该复选框（取消选择）。同样，这主要是为了用户体验，因为这有助于用户查看他们已经选择的项目。 过滤器和复选框放置在 <details> 和 <summary> 内部，使其具有传统的选择框外观。 这是工作演示： ("use strict"); // Focus on the filter input when the options are expanded/opened document.querySelectorAll(".options-details").forEach(function (details) { details.addEventListener("toggle", function () { if (details.hasAttribute("open")) { details.querySelector(".filter-input").focus(); } }); }); // Filter options document.querySelectorAll(".filter-input").forEach(function (input) { input.addEventListener("input", function () { const options = input.closest("fieldset").querySelectorAll(".btn-check"); options.forEach(function (option) { option.classList.remove("d-none"); const value = option.value.toLowerCase(); if (value !== "" && !value.includes(input.value.toLowerCase().trim())) { option.classList.add("d-none"); } }); }); }); // Add option button when an option is checked document.querySelectorAll(".btn-check").forEach(function (input) { input.addEventListener("input", function () { if (input.checked === true) { const optionButtonItem = document.createElement("li"); optionButtonItem.innerHTML = `<button class="option-button btn btn-primary" type="button" id="${input.getAttribute("id")}-remove" aria-describedby="option-remove">${input.getAttribute("value")}</button>`; input.closest("fieldset").querySelector(".option-buttons-list").appendChild(optionButtonItem); // Add event listener to remove option and button and uncheck option const optionButton = document.getElementById(`${input.getAttribute("id")}-remove`); optionButton.addEventListener("click", function () { document.getElementById(optionButton.getAttribute("id").slice(0, -7)).checked = false; optionButton.closest("li").remove(); }); } else { document .getElementById(`${input.getAttribute("id")}-remove`) .closest("li") .remove(); } }); }); :root { --bs-font-size-base: 1rem; --bs-font-size-sm: 0.875rem; --bs-font-size-lg: 1.125rem; } .option-button::after { content: "\00D7"; margin-left: 12px; } .options-container { min-height: 36px; max-height: 300px; } .btn-check.d-none + .btn-secondary { display: none; } .btn-check:checked + .btn-secondary { background-color: var(--bs-primary) !important; color: var(--bs-primary-foreground) !important; } .btn-check:focus-visible + .btn-secondary { background-color: var(--bs-primary-100) !important; box-shadow: none !important; } .btn-check:checked:focus-visible + .btn-secondary { background-color: var(--bs-primary-active-bg) !important; } <link href="https://cdnjs.cloudflare.com/ajax/libs/Halfmoon/2.0.1/css/halfmoon.min.css" rel="stylesheet"/> <body class="min-vh-100 d-flex align-items-center justify-content-center"> <div class="specific-w-600 mw-100 p-5"> <fieldset> <legend class="form-label">Select the languages you want*</legend> <p class="text-body-secondary mb-4"> Let's get started with the survey. First, please choose all of the languages that you know. </p> <span id="option-remove" class="visually-hidden">remove</span> <ul id="options-selected" class="option-buttons-list list-unstyled d-flex flex-wrap gap-1 m-0" ></ul> <details class="options-details border rounded mt-2 overflow-hidden"> <summary class="px-3 py-2"> Choose one or more options </summary> <div class="border-top"> <div class="p-3 border-bottom"> <span id="filter-label" class="visually-hidden">Filter languages</span> <input type="text" class="filter-input form-control" placeholder="Filter languages" aria-autocomplete="list" aria-labelledby="filter-label options-selected" /> </div> <div class="options-container d-flex flex-column overflow-y-auto" > <input type="checkbox" class="btn-check" id="checkbox-1" value="Python" autocomplete="off" /> <label class="btn btn-secondary text-start px-3 py-2 lh-sm border-0 rounded-0" for="checkbox-1" > Python </label> <input type="checkbox" class="btn-check" id="checkbox-2" value="JavaScript" autocomplete="off" /> <label class="btn btn-secondary text-start px-3 py-2 lh-sm border-0 rounded-0" for="checkbox-2" > JavaScript </label> <input type="checkbox" class="btn-check" id="checkbox-3" value="C++" autocomplete="off" /> <label class="btn btn-secondary text-start px-3 py-2 lh-sm border-0 rounded-0" for="checkbox-3" > C++ </label> </div> </div> </details> </fieldset> </div> </body> JavaScript 执行以下操作： 打开选项后，过滤器输入自动聚焦。 在过滤器输入中键入内容，复选框将使用其值进行过滤。 选中复选框后，会添加结果按钮。当然，单击此按钮将取消选中该复选框。 我的问题是：我当前的设置有多方便？在过滤器输入、结果按钮等上使用正确的 WAI-ARIA 标签方面。此外，可以在此处使用 <details> 和 <summary> 标签来执行我想要执行的操作吗？ 我想说这已经是一个非常复杂的实现了。 但是谁能说是否可以使用 <details> 元素呢？就标准而言，没问题。最好现在就与辅助技术的用户一起测试它。 我从aria-autocomplete注意到这一段： 如果某个元素的 aria-autocomplete 设置为 list […]，作者 必须 确保满足以下两个条件： 该元素具有为 aria-controls 指定的值，该值引用包含建议值集合的元素。 该元素具有 aria-haspopup 值，该值与包含建议值集合的元素的角色相匹配。 然后，来自aria-haspopup： […] 作者必须确保充当弹出内容容器的元素的角色是menu、listbox、tree, 网格或dialog […] 反过来，listbox只能将option作为可访问子项，而不是checkbox。 所以你需要重新制定清单。请参阅我对第二个问题的回答，了解有关可访问选项列表（键盘可访问性、跳过链接）的更多详细信息。 <input aria-controls="language-list" aria-haspopup="list" /> </div> <ul id="language-list" role="listbox" aria-multiselectable="true"> <li role="option" aria-selected="false" tabindex="0">Python</li> … 这样做的好处是，屏幕阅读器可以宣布项目的数量，帮助用户决定是否过滤。 我刚刚使用 NVDA 测试了问题中的示例，我注意到这些细节： 带有删除按钮的列表缺少标签，以明确列出的语言是什么： <ul … aria-label="Selected languages"></ul> × 是一个视觉指示器，最好对辅助技术隐藏起来。通过CSS添加的content仍然是内容。该按钮的含义如下： Python 时间按钮删除 <button aria-label="Python. Remove">Python</button> 添加到搜索输入名称中的选定选项也包括“时间”，但这可以通过上述建议解决。 将选定的选项添加到输入的名称是多余的，因为选择列表在之前和之后都可用。完善的 combobox 模式也无法做到这一点。 焦点在折叠的详细信息摘要元素上不可见。 代码中的小细节： 您可以考虑使用 document.createElement() 元素，而不是使用 <template>，这会使生成的 DOM 结构难以阅读 autocomplete 在 <input type="checkbox"> 上没有用： 它可用于以文本或数值作为输入的 <input> 元素 [...]
假设我在 中有一个复选框列表。我希望用户能够过滤这个列表（考虑到这个列表相当大），也就是说，你在这个输入中键入一些内容，并且只...... 假设我在 <fieldset> 中有一个复选框列表。我希望用户能够过滤这个列表（考虑到这个列表相当大），也就是说，您在此输入中键入一些内容，并且只有与此输入匹配的复选框才会可见。此输入和/或复选框需要哪些 WAI-ARIA 标签？ 或者不需要一些好的标签？ 您可以使用 JavaScript 轻松操纵元素的可见性及其 ARIA 设置。输入字段需要 ARIA 属性，被过滤器隐藏的元素需要添加 aria-hidden 属性。 function filterCheckboxes() { const filter = document.getElementById('filter-input').value.toLowerCase() const checkboxes = document.querySelectorAll('#checkbox-list .checkbox-item') checkboxes.forEach(checkbox => { const label = checkbox.querySelector('label').textContent.toLowerCase() if (label.includes(filter)) { checkbox.style.display = 'block' checkbox.removeAttribute('aria-hidden') } else { checkbox.style.display = 'none' checkbox.setAttribute('aria-hidden', 'true') } }) } document.getElementById('filter-input').addEventListener('input', filterCheckboxes) .checkbox-item { display: block; margin-bottom: 5px; } <label for="filter-input">Filter:</label> <input type="text" id="filter-input" aria-controls="checkbox-list" aria-describedby="filter-description"> <fieldset id="checkbox-list"> <legend>Select your favorite fruits</legend> <div class="checkbox-item"> <input type="checkbox" id="apple" name="fruit" value="apple"> <label for="apple">Apple</label> </div> <div class="checkbox-item"> <input type="checkbox" id="banana" name="fruit" value="banana"> <label for="banana">Banana</label> </div> <div class="checkbox-item"> <input type="checkbox" id="orange" name="fruit" value="orange"> <label for="orange">Orange</label> </div> <div class="checkbox-item"> <input type="checkbox" id="grape" name="fruit" value="grape"> <label for="grape">Grape</label> </div> <div class="checkbox-item"> <input type="checkbox" id="peach" name="fruit" value="peach"> <label for="peach">Peach</label> </div> </fieldset>
我有一个报价列表，每个报价都有一个删除按钮，单击后会打开一个带有另外两个按钮的模式：删除和取消。 当模式打开时，我希望能够切换到这 2 个
我试图在模式打开时执行此操作，焦点应移动到模式内的第一个可聚焦元素（如关闭按钮）。此外，当模式打开时，用户应该只能导航
在 C# WPF 应用程序中，我想创建一个多行且只读的 TextBox 控件，并具有适当的屏幕阅读器可访问性，用于文本光标导航和旁白。当我创建 c...
SwiftUI - 静态方法“buildExpression”要求“ValueWidget”符合“AccessibilityRotorContent”
我是 swift 和 swiftUI 的新手，并开始尝试它。我收到以下错误： 静态方法“buildExpression”要求“ValueWidget”符合“AccessibilityRotorContent”。
在 C# WPF 应用程序中，我使用 ComboBox 控件。当我在关闭的组合框中按向下键时，将选择组合框中的下一个项目，而无需打开下拉列表。如何改为打开...
Wordpress 占位符输入与辅助功能插件上的对比度不同步
我添加了 wordpress 插件以实现辅助功能 一键辅助功能 为什么该插件不适用于占位符？ 我添加了 wordpress 插件以实现辅助功能 一键辅助功能 为什么该插件不适用于占位符？ <input type="text" class="input-box" autocomplete="off" id="test" name="test" placeholder="text not works with plugin?" readonly=""> 提前谢谢您！ 这个插件在主体上添加CSS类，然后你可以在主题的自定义CSS代码中尝试这个： .pojo-a11y-high-contrast ::placeholder { opacity : 1; }
SwiftUI 图表如何避免自动对图表上的可访问性元素进行分组
我有一个 BarMark 图表，我正在使用 .accessibilityLabel 和 .accessibilityValue 自定义每个条形的可访问性文本。由于图表上的条形数量较少，这个逻辑工作得很好，但是......
Swift4：`AXUIElementCopyAttributeValue()`返回`AXError.cannotComplete`
运行以下代码： 让 pid = getAppPid() 让 AXApp = AXUIElementCreateApplication(pid) var 孩子：CFTypeRef？ 让 returnVal = AXUIElementCopyAttributeValue(AXApp, kAXChildrenAtt...
Play 控制台辅助功能警告 android:id/content/s[1] - Flutter App
我遇到的问题是，当我将应用程序上传到游戏控制台时，在之前的报告中，我总是看到覆盖整个屏幕的辅助功能警告。我的所有应用程序都会发生这种情况，甚至
如何在 Angular Plotly 树形图中添加辅助功能和键盘导航？
我们正在使用角度绘图库来渲染树形图。图表无法访问，键盘也无法直接访问。如何使其易于访问？ 我联系了 Plotly t...
NVDA 在悬停时无法读取 aria-label / aria-labelledby
我需要向屏幕阅读器的 标签添加额外的文本。不幸的是，我发现当我将鼠标悬停在 eleme 上时，NVDA 阅读器不会读取 aria-label 或 aria-labelledby...
对于我正在开发的模组，我想合并玩家的主题颜色并使用它们来生成 UI 元素。但是，我遇到了一个问题，即并非所有颜色主题都具有可以证明的颜色...
标题已经说明了一切。 我很好奇这是否被视为嵌套列表，如果是，它是否是有效的 HTML。我也很好奇任何可访问性的影响。 我用 VoiceOver 测试过，看起来...
标记表单一部分的最佳做法是什么？ 创建 似乎不是“好”方法。 我有一个很大的表格，有不同的部分，所有东西我... 标记表单一部分的最佳做法是什么？ 创建一个<div tabindex="0">似乎不是“好”方法。 我有一个包含不同部分的大表单，所有内容都在一个站点上（没有向导或其他东西）。 我猜使用屏幕阅读器的用户只是使用 TAB 在不同的输入之间导航，一旦他们到达表单的不同区域，我想解释一下它的含义。 有点像标记一个 div，一旦他们到达该 div 中的输入 -> 读取一些内容。 只是一个简化的例子： <form> <!-- some inputs about the company --> <h2>Company</h2> <div> <label for="company-name-input">Company Name</label> <input type="text" id="company-name-input"> </div> <div> <label for="company-address-input">Company Address</label> <input type="text" id="company-address-input"> </div> <h2>Contact Partners</h2> <!-- here are inputs about important person you can contact --> <!-- how do I notify users about this fact, when they just tab thought the form I read it's no good to add a tabindex="0" to the headline --> <div> <!-- person one --> <label for="person-email-1">E-Mail</label> <!-- I could make a aria-label="Here is the email of your first person" but in case someone tabs here from below they might miss that.. and always have a "Person nr X before each input might be strange as well --> <input type="email" id="person-email-1"> <!-- all the other persons --> <button>Add Partner</button> </div> </form> 当用户将输入集中在某个区域而不在每个输入中重复该信息时，让用户意识到他们正在为联系人编辑字段的最佳实践是什么？ <fieldset>元素用于对表单中的相关数据进行分组。 <legend> 元素定义 <fieldset> 元素的标题。 <form> <!-- some inputs about the company --> <fieldset> <legend>Company</legend> <div> <label for="company-name-input">Company Name</label> <input type="text" id="company-name-input"> </div> <div> <label for="company-address-input">Company Address</label> <input type="text" id="company-address-input"> </div> </fieldset> <fieldset> <legend>Contact Partners</legend> <!-- here are inputs about important person you can contact --> <!-- how do I notify users about this fact, when they just tab thought the form I read it's no good to add a tabindex="0" to the headline --> <div> <!-- person one --> <label for="person-email-1">E-Mail</label> <!-- I could make a aria-label="Here is the email of your first person" but in case someone tabs here from below they might miss that.. and always have a "Person nr X before each input might be strange as well --> <input type="email" id="person-email-1"> <!-- all the other persons --> <button>Add Partner</button> </div> </fieldset> </form>
如何使用 aria-* 属性使屏幕阅读器可以访问 SVG 图像？
我一直在使用 Inkscape 和 Draw.io 创建图表并将其导出到 SVG 文件。我想让 SVG 文件中的文本在网页上可供选择，或者，如果做不到这一点，至少可以访问
Camb.ai 可以翻译和配音的内容范围广泛，尤其专注于体育、媒体和娱乐行业。Camb.ai 可以翻译和配音的内容范围广泛，包括 mo...