我们正在努力遵守我们使用 axe 的辅助功能标准 wcag21aa。为了使我们合规,我们是否需要在真实设备上测试它们,或者我们是否可以简单地使用 AX 这样的工具来确保我们合规,而无需在实时设备上进行测试?
我们的网站上有一个表单,其中包含在用户输入时使用 JavaScript 进行验证的字段(onChange 事件)。错误消息以红色文本显示在字段输入下方。
目前,我们使用 aria-descriptedby 和 aria-invalid 属性将消息呈现给 NVDA。屏幕阅读器会正确地宣布字段何时无效,但不会宣布字段何时再次有效。我们的测试团队强调这是有问题的。
我们还研究了将 role="alert" 添加到错误字段,但这似乎会在该字段无效时导致“双声” - 它会因为 role="alert" 而宣布错误一次,并再次因为咏叹调描述。
处理这个问题的正确/推荐方法是什么?
我有一个按钮,点击后会展开一张包含更多信息的卡片
我需要添加onKeyDown以button确保可访问性合规性吗?
或者这是多余的,因为该元素已经是 a button?
我还缺少其他需要遵守的内容WCAG 2.0吗?
这是我的可折叠按钮代码react
const ariaPressed = checked ? "true" : "false";
return (
<button
tabIndex={0}
role="button"
component="button"
aria-pressed={ariaPressed}
aria-expanded={ariaPressed}
onClick={toggleChecked}
>
{checked ? "Hide Versions" : "View Versions"}
</button>
);
Run Code Online (Sandbox Code Playgroud)
我目前正在尝试在 Bootstrap 5 中创建一个仅包含表单的页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control" id="staticEmail2" value="email@example.com">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
问题是当我在 Edge/chrome 中打开网页时,电子邮件标签尽管有sr-only类,但仍然可见。
我搜索了很多,但没有找到任何答案。
jetpack compose 中是否有任何替代方案announceForAccessibility可以自动宣布事件的文本。
我正在努力提高网站的可访问性,并且对ARIAHTML 中标签的放置有疑问。当使用像或 这样ARIA的属性时,将它们放置在它们所标记的元素内部还是外部是否被认为是最佳实践?例如,以下哪一种是推荐的方法:aria-labelaria-labelledby
<div class="container" aria-label="testing">
<input type="text" />
</div>
Run Code Online (Sandbox Code Playgroud)
或者
<div class="container">
<input type="text" aria-label="testing" />
</div>
Run Code Online (Sandbox Code Playgroud)
谢谢
如何给键盘导航的不同风格,颜色到虚线边框?风格应该会出现只有当用户使用键盘来浏览不mouse over和:active.
alt text http://easycaptures.com/fs/uploaded/234/9318036912.png
并且样式应该适用于具有有效css的所有主流浏览器.
有没有人知道如何只使用键盘在Visual Studio的C#项目设置编辑器中切换主要选项卡/页面?我在谈论左侧的东西,标记为应用程序,构建,调试,资源,设置等.它可以在当前所选页面上的控件之间的Tab中正常工作,但我还没弄清楚如何切换在页面之间,我希望避免尽可能多地离开键盘.
我最常访问的页面是Debug页面,因此即使没有通用方法,直接转到该页面的快捷方式也没问题.我尝试了Project.StartOptions命令,但似乎不是这样.
accessibility keyboard-shortcuts visual-studio-2010 visual-studio
是否存在可访问性或语义目的,以在输入[type ="reset"]中包含tabindex属性?或者是否应该避免这种形式不是偶然的并经常重置?
我正在开发一个需要遵守WCAG 2.0 AA的网站,但是虽然我们尝试在我们的网站上使用标签导航,但由于点击可聚焦元素时会出现奇怪的边框和轮廓,因此会严重影响设计.
我的想法是,隐藏所有焦点状态,直到实际按下Tab键.
所以,我的问题是,这是否会给网络的可访问性技术带来任何潜在的问题?