标签: wai-aria
NVDA 忽略带有 role="alert" 的角度 *ngIf 块
我的目标是向用户提供有关输入错误的信息。在这个例子中，我可以在没有角度的情况下做到这一点。我还设法使用“innerHTML”属性重新创建了以下示例，但它也不适用于 NVDA，简而言之，它只是在发生错误时将一个节点附加到正文
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Contact form (WAI-ARIA)</title>
<script type="text/javascript">
function removeOldAlert()
{
var oldAlert = document.getElementById("alert");
if (oldAlert)
document.getElementById("error").removeChild(oldAlert);
}
function addAlert(aMsg)
{
removeOldAlert();
var newAlert = document.createElement("div");
newAlert.setAttribute("role", "alert");
newAlert.setAttribute("id", "alert");
var msg = document.createTextNode(aMsg);
newAlert.appendChild(msg);
document.getElementById("error").appendChild(newAlert);
}
function checkEntryValidity(aID, aSearchTerm, aMsg)
{
var elem = document.getElementById(aID);
var invalid = (elem.value.indexOf(aSearchTerm) < 0);
if (invalid) {
elem.setAttribute("aria-invalid", "true");
addAlert(aMsg);
} else {
elem.setAttribute("aria-invalid", "false");
removeOldAlert();
}
}
</script>
</head>
<body>
<form method="post" action="post.php">
<fieldset><legend>Please …推荐指数
解决办法
查看次数
调整大小手柄的适当可访问性或 ARIA 角色
在构建形状操作界面时
或用于调整文本框的大小
如何使这些控件易于访问？鉴于现有的WAI-ARIA 角色，我不确定这是否可能。有一些常规拖放约定的示例和规定，但没有明显与调整大小、旋转或任何类型的转换或操作相关。
推荐指数
解决办法
查看次数
<nav> 子元素的语义标记？
menu 元素具有相应的 menuitem 子元素。
nav 的子元素合适的 html 标记是什么？这些子元素对应的 Aria 角色是什么？
我阅读了规范，查看了 MDN，还阅读了一些教程。
我知道导航链接最好包装在导航容器中。我正在努力理解标记导航项目本身的最简单的方法。
推荐指数
解决办法
查看次数
aria 隐藏属性不适用于后代
Chrome 辅助功能工具抱怨覆盖框的某些子项没有正确的对比度。当覆盖层隐藏时，该工具似乎认为子项是“可见的”。
不过，当我打开/关闭它时（使用 ），我可以看到aria-hidden在检查器中正确设置了覆盖层的属性attr("aria-hidden","false");。
aria-hidden="true";通过检查员对孩子进行单独设置可以解决这个问题。
我很困惑，因为 aria-hidden 应该隐藏元素及其子元素。有谁知道我做错了什么？
推荐指数
解决办法
查看次数
NVDA 在读取模态对话框中的焦点元素后读取所有模态内容
我已经实现了聚焦第一个选项卡的要求（基本上是<a>我已经实现了关注模式对话框中存在的
当使用 NVDA 屏幕阅读器测试该功能时，我们发现在读取对话框标签和描述（由 aria-labelledby 和 aria-scribedby 指向）后，它会读取聚焦的选项卡元素。但是，之后它会继续从模态标题开始读取整个模态对话框内容。这不是我们想要的阅读行为。
如果我们将焦点放在模式对话框内的第一个输入元素上，而不是 tab( <a>) 元素上，它就可以正常工作。NVDA 在读取焦点输入元素后暂停。仅当我们使用 Tab 键导航时才会读出更多元素。这是我们想要的阅读行为，但我们不想聚焦输入元素。
演示链接可以在这里找到： https: //codepen.io/kaashan/pen/KOmGYe 。使用的代码来自 W3.org 模式对话框的可访问性指南，进行了少量修改以显示选项卡并将第一个选项卡元素集中在模式打开上。
我使用 NVDA2019.1.1 版本以及最新版本的 Chrome 和 Firefox 浏览器进行测试。
有人可以帮助解释在读取焦点 tab( <a>) 元素后应该做什么来暂停 NVDA 吗？
推荐指数
解决办法
查看次数
显示模式时出现“aria-hidden elements do not contains focusable elements”问题
我在应用程序中使用React Modal，当它打开时，运行axe 可访问性工具会出现以下错误：
这是因为 React 模态将 a 添加aria-hidden="true"到应用程序的根元素（我的所有应用程序组件都在该 div 下呈现，但不是模态），但它不会更新选项卡索引或禁用每个可聚焦元素。
然而，React 模式会捕获键盘焦点，因此用户无法跳出模式并单击背景关闭模式。
所以我的问题是：
这实际上是我需要解决的问题吗？或者这是一个误报，因为该工具不了解模态捕获焦点？
如果确实需要修复此问题，那么我唯一的选择是手动更新选项卡索引或禁用每个可聚焦元素吗？
模式打开时的 HTML 看起来有点像这样：
<div data-react-modal-body-trap="" tabindex="0" style="position: absolute; opacity: 0;"></div>
<div id="root" aria-hidden="true">application content</div>
<div class="ReactModalPortal">
<div class="ReactModal__Overlay ReactModal__Overlay--after-open modal-overlay-6fODnA">
<div tabindex="-1" role="dialog">modal content</div>
</div>
</div>
推荐指数
解决办法
查看次数
使用 javascript 在 true 和 false 之间切换 aria-expanded
我试图在单击按钮时在 true 和 false 之间切换 aria 标签。我已经尝试了几种实现，但似乎完全没有任何作用。以下是我当前正在使用的成功切换课程的内容。我如何扩展它以在 true 和 false 之间切换 aria-expanded 值？别介意，我正在从 jQuery 过渡到 ES6。
const theTrigger = document.getElementById('mobile-form-control');
const theForm = document.querySelectorAll('.l-header__mobile-form');
theTrigger.onclick = function () {
for (const x of theForm) {
x.classList.toggle('show');
}
};
推荐指数
解决办法
查看次数
找不到带有“@testing-library/cypress”的数据列表选项
我正在尝试编写一个测试，以确认 a具有使用来自 的基于角色的查询<datalist/>的元素列表。奇怪的是，当我尝试按角色查询时：<option/>@testing-library/cypressoption
cy.findByRole('option')
...我没有返回任何结果：
4000 毫秒后超时重试：无法找到具有“选项”角色的可访问元素
...尽管页面中出现内容：
<datalist id="subjects-list">
<option value="one">one</option>
<option value="two">two</option>
</datalist>
<input list="subjects-list" value=""/>
有没有办法找到这些选项@testing-library/cypress？
wai-aria html-datalist cypress testing-library cypress-testing-library
推荐指数
解决办法
查看次数
是否需要在表单提交按钮上添加aria-label？
正如标题所说,对于可访问性,我们需要在标签文本不可见或不存在的元素上放置aria-label,例如只有"X"的解除按钮.
我认为按钮有文本,然后不需要aria-label,例如:
<button>Submit</button>
但是关于:
<input type="submit" value="Submit"/>
输入提交按钮是否需要aria-label？
推荐指数
解决办法
查看次数
咏叹调标签 - 强制屏幕阅读器阅读一些文字
在我的网站上,用户可以点击"在线聊天"按钮,然后会出现一个聊天窗口.我正在寻找一些文本来读取(对于具有屏幕阅读器的辅助功能用户)
当聊天窗口出现时,焦点将转到输入文本框 - 用户可以在其中输入文本以与顾问聊天.我有一个位于屏幕之外的div - 我希望将文本读出来.我试过aria-live =断言,但没有运气 - 没有读出来.
<div id="sreader" aria-live="Assertive"> if you use a screen reader you can call this number 0800 123 456</div>
任何想法 - 如何被迫读出来？
谢谢
推荐指数
解决办法
查看次数
标签 统计
wai-aria ×10
html ×5
javascript ×3
nvda ×2
angularjs ×1
cypress ×1
frontend ×1
jquery ×1
nav ×1
reactjs ×1
typescript ×1
web-frontend ×1