标签: wai-aria
JAWS 没有宣布加载 iFrame 内容？
我正在开发一个使用 iFrame 的 Web 应用程序（请不要要求我使用其他东西，而不是我的决定）。有两个框架，一个导航框架和一个内容框架（自上而下）。
导航框架始终保持不变。当用户单击链接导致内容框架内的内容发生更改时，JAWS 不执行任何操作。我想要 JAWS 做的是宣布新页面的内容（至少是标题）。
我查找了 WAI-ARIA 标签，并尝试了各种 JavaScript 技巧来将焦点集中到元素上。 唯一有效的就是执行以下操作
<iframe id="contF" aria-atomic="true" aria-live="assertive" frameborder="0" name="content" title="${ca.title}" src="${ca.src}"></iframe>
这将导致 JAWS 在首次加载框架时宣布框架的内容（因此之前从未单击过该链接）。如果是“访问过的链接”，则根本不会公布该框架的内容。
推荐指数
解决办法
查看次数
如何使用 ARIA HTML5 对屏幕阅读器和其他 AT 隐藏 ASCII 艺术？
我们正在我们的网站上添加一些可爱的 ASCII 艺术。我们担心它可能会给屏幕阅读器带来问题，所以我正在考虑添加aria-hidden="true"，role="presentation"这样屏幕阅读器就看不到 ASCII 艺术。这是正确的方法吗？我没有可以测试的屏幕阅读器，看起来可能 aria-hidden 或角色没有完全隐藏内容。
它看起来像这样：
我可以将其作为图像来实现，但是将其作为实际文本来实现会很酷，因为文本无法通过 CSS 选择。无论如何，将角色作为图像来制作对我来说感觉很奇怪。
推荐指数
解决办法
查看次数
可访问用户的链接内的图像
假设我想制作一个可点击的图像（比如站点徽标或其他），如下所示：
<a href="theblablasite.com"><img src="logo_or_whatever.png"></a>
如果我想让它可访问，我应该将aria-label链接与alt图像一起使用还是仅使用aria-label？
此外，关于是否同时使用 title 和 alt 有很多意见，正确的做法是什么，为什么？
推荐指数
解决办法
查看次数
屏幕阅读器在进入屏幕时不读取 <h1>
我的 HTML 如下（摘录部分）：
<h1><span>Main Menu</span></h1>
<div>
<button tabindex="0">New Customer</button><br>
<button tabindex="0">Existing Customer</button>
</div>
我正在使用英伟达。当用户进入屏幕时，焦点位于第一个按钮上。NVDA 读取第一个按钮（新客户）上的文本。它会跳过标题 (h1)。我认为它应该读取 h1 标签，而不读取任何 aria 标签，例如 aria-label。我的假设有错吗？我需要做什么才能使这项工作成功？
推荐指数
解决办法
查看次数
使用 bootstrap 的 glyhicons 时如何修复“空按钮”网页可访问性错误
我有一个页面，其中一个按钮标有字形（引导程序）。
我有一个新要求，即使用“Wave”工具（ https://wave.webaim.org/extension/ ）检查页面时不能出现“错误” 。
问题是 Wave 会抛出该按钮的错误，因为它是一个“空按钮”。
我尝试使用带有替代文本的图像。这修复了 Wave 错误，但它使按钮稍大一些，而且我也对为此滥用图像感到不安。
这是我的页面显示问题的最小版本：
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
</button>
</div>
<div>
<button>
<span class="glyphicon glyphicon-chevron-up"></span>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" alt="UP button">
</button>
</div>
</body>
</html>
有没有比虚拟 img 更好的方法来确保可访问性（为字形提供替代文本）？
推荐指数
解决办法
查看次数
当 aria-expanded 为 true 时，如何让屏幕阅读器正确说出“按钮已展开”
我正在努力使我们的手风琴可以通过 aria-expanded 等 aria 标签访问。当单击手风琴触发器标题或按下键盘上的“返回”按钮时，我正确地更改了 aria-expanded 的值。出于某种原因，虽然我用来测试的 ChromeVox 最初只会说“按钮折叠”，但一旦点击后值发生变化，就不会说“按钮展开”。
我查看了其他网站上的示例，例如https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html并且 ChromeVox 在那里正确读取了 aria-expanded 的两种状态，所以我'我认为这是关于我的代码的结构如何阻止 ChromeVox 宣布“扩展”状态。
这是一个手风琴部分的示例：
<div class="accordion-section">
<button tabIndex="0" id="rules_list" class="accordion" aria-expanded="false" aria-controls="sectRules">
<span class="title">Rules</span>
</button>
<div class="content" role="region" id="sectRules" aria-labledby="rules_list">
<h4>What rules must all visitors follow?</h4>
<ul class="list">
<li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 1</li>
<li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 2</li>
<li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 3 etc..</li>
</ul>
</div>
</div>
相关的js是：
/* Generic Accordion */
$('.accordion .title').click(function() {
$(this).parent().parent().children('.content').toggle(); …推荐指数
解决办法
查看次数
如何在您的网站上测试 Aria 标签？
我一直在做一些研究，但在寻找测试我的 Aria 标签和我使用的其他 Aria 标签的好方法时遇到问题。测试这个的最佳实践是什么。目前使用 Material UI 为 Angular 执行此操作，该 UI 已经具有一些良好的 ARIA 支持。
我尝试使用 JAWS 9 的试用版，但有时我无法判断是我的代码不好还是屏幕阅读器没有我希望的那么好。
感谢您的阅读，并希望有人能为我指出正确的方向。
推荐指数
解决办法
查看次数
角材料垫标签可访问性
我有一个带有文本输入控件的 mat-form-field。我有一个 mat-label 并且我还attr.aria-label直接在 input 元素上放置了一个 aria-label 属性。
是mat-label足以本身屏幕阅读器？是attr.aria-label必要的还是多余的？
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Username</mat-label>
<input attr.aria-label="Username" formControlName="Username" matInput>
</mat-form-field>
同样的问题也适用于 mat-select 控件。
<mat-form-field appearance="outline" floatLabel="always">
<mat-label>Cars</mat-label>
<mat-select formControlName="Car">
<mat-option *ngFor="let car of cars" [value]="car.name">
{{car.name}}
</mat-option>
</mat-select>
</mat-form-field>
推荐指数
解决办法
查看次数
role=dialog 和 role=alertdialog 有什么区别？
根据WAI-ARIA 规范，两个角色都应该具有：
- 专注于第一个可聚焦元素
- 用户应该不能离开对话框
- 应该有适当的
aria-label设置 - 应该用于中断流程并且应该需要采取一些操作，例如单击按钮或键入某些内容
我看到的唯一区别是alertdialog应该aria-describedby设置。
这让我想到一个问题。role=dialog和之间的实际区别是role=alertdialog什么？我们什么时候使用一种或另一种？
推荐指数
解决办法
查看次数
我们如何使用 React 修复 A11y 错误“所有页面内容必须包含地标”？
axe 可访问性规则“所有页面内容必须包含在地标中”规定所有顶级 html 元素都应该是地标元素，例如
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
</html>
但是 React 项目需要在 body 下面有一个根元素（需要避免与其他脚本发生冲突
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<div id="root">
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</div>
</body>
</html>
我试图将aria-hidden="true"我的 div 设置为屏幕阅读器忽略它
<div id="root" aria-hidden="true">
但这引发了另一个问题：咏叹调隐藏元素不包含可聚焦元素
我找不到其他人讨论这个问题，这让我想知道它是否相关。有没有一种干净的方法来拥有具有里程碑式顶部元素的 React 应用程序？或者我应该忽略这个特定的斧头规则？
推荐指数
解决办法
查看次数