标签: wai-aria

我已经开始在Web应用程序上进行dojo可访问性测试,并注意到元素同时具有角色和wairole属性,它们似乎是相同的值.

经过多次搜索,我无法理解两者之间的区别.有谁能解释一下？

我目前正在尝试提供一种良好且易于访问的方式来格式化状态指示器,该指示器应该在网站上的一组类似向导的页面中呈现.该网站应提供一个多页表格,其上方有一个状态指示器,如下面的线框所示:

鉴于HTML中的新进展标签,我首先想到的是做这样的事情:

<progress value="2" max="3">
    <ul>
        <li>Beginning</li>
        <li class="now">Right now</li>
        <li>End</li>
    </ul>
</progress>

...但是因为<progress>只接受使用列表的短语内容并不是一个真正的选择.所以现在我可能会用这样的东西,整合ARIA progressbar -role:

<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
    <li id="state1">Beginning</li>
    <li id="state2" class="now">Right now</li>
    <li id="state3">End</li>
</ul>

但同样,我不确定进度条角色是否可以以这种方式应用于列表.

另一个问题是,例如,<progress>在Opera中呈现为进度条,因此> progress>本身可能不是真正可行的解决方案:-(

任何人都可以或许推荐一个可访问状态栏,它不能只依赖于使用一个单一的形象？

当前解决方案

现在我将使用以下标记:

<section class="progress">
    <h1 class="supportive">Your current progress</h1>
    <ol>
        <li><span class="supportive">Completed step:</span> Login</li>
        <li class="now"><span class="supportive">Current step:</span> Right now</li>
        <li><span class="supportive">Future step:</span> End</li>
    </ol>
</section>

"支持"类的所有元素都将在屏幕外定位.IMO这样我们应该有一个很好的语义标记妥协(状态继承在我看来真的是一个有序列表;-))和可访问性,这要归功于每个步骤的附加标题和状态文本.

我需要实现一个带有占位符文本且没有可见标签的表单,但仍然可以让无视力的用户访问它.在标签上设置text-indent -9999px会隐藏它们,但会为表单添加额外的空间.有没有理由不将字体大小设置为0px？它仍然可以被屏幕阅读器读取吗？

Hello Stackoverflow社区.这是我的第一个问题,但我会尽量简洁明了.

我的任务是更新我们的ASP.NET Web应用程序,使其符合508条款.这对我来说都很新鲜,而且我无法按预期工作.

我们有一个页面,用户可以通过onmouseover事件获取有关链接的其他信息.显然这对没有视力的用户不起作用.因此,我们为他们提供了一个"更多信息"按钮,显示与视力正常的用户相同的"工具提示"div.

我添加aria-live="assertive到"工具提示"div中的理解是,如果在页面加载时隐藏了div,然后通过按钮显示,则JAWS会读取它.令我沮丧的是,事实并非如此.

工具提示div看起来像这样:

<div id='tooltip' aria-live='assertive' style='display:none;'>
    <span id='tooltip_message'>This is my tooltip text</span>
</div>

它通过按钮的click事件显示,并带有以下JavaScript代码:

function ShowTooltip(ttID)
{
  var tt = $('#' + ttID);   
  tt.css('display', '');
}

显示工具提示div的按钮如下所示:

<button id='ttBtn' onclick="ShowToolTip('tooltip'); return false;">
    More information
</button>

我成功地让JAWS通过向工具提示div添加role ="alert"来阅读工具提示,但我想避免将警报角色用于非警报目的.主要是因为它显示"警报,这是我的工具提示文本".给用户.

我想知道当它变得可见时,让钳口读取工具提示的正确方法是什么？

我使用的是IE 11和JAWS 16. Internet Explorer和JAWS是我无法改变的要求.

谢谢!-射线

UPDATE

我想我会发布我们使用的解决方案,以防其他人遇到同样的问题.这是我们代码的简化版本,它显示了工具提示在显示时可见和读取的必要条件.这是一个服务器控件,因此许多ID都基于控件的ClientID属性并具有已知的后缀(_tootip,_tooltipcontainer等)

JavaScript的:

 //handles showing/hiding of the tooltip
 function ShowToolTip(ttID)
 {
    var tt = $('#' + ttID + '_ToolTip');    
    var ttContainer = $('#' + ttID + '_ToolTipContainer');  

    var ttClone …

我只注意到,虽然aria-label,aria-labelledby和aria-describedby属性据说每一个元素上工作(见http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby),他们似乎只是几个要素工作喜欢a,而不是例如div或p在NVDA和JAWS中.

我创建了一个小的codepen来演示问题(使用浏览和焦点模式浏览它):

http://codepen.io/jmuheim/pen/avWbPe

例如,在NVDA的上a元素时,aria-label并aria-labelledby似乎在这两个浏览和对焦模式下工作.但aria-describedby仅在焦点模式下宣布,而不是在浏览模式下宣布.

对于input元素,没有任何属性似乎在浏览模式下工作,但所有属性都在焦点模式下工作.

对于像" p或"这样的"裸"文本元素div,没有一个属性似乎有效.

在JAWS中,它的行为非常相似,但至少对于p元素,当存在时aria-describedby,它宣布可以通过按"JAWS + alt + r"来读取描述.

我真的没有看到明确的模式,所以我想知道如何使用这些属性的屏幕阅读器的一般规则是什么？或者更好:为什么他们不按照规范提出的那样只为每个元素工作？

我正在用Angular和开发一个应用程序Semantic-UI.应用程序应该是可访问的,这意味着它应该符合WCAG 2.0.为了达到这个目的,模态应该在对话框中保持焦点,并防止用户走出去或在位于模态下的页面元素之间移动"标签".

我找到了一些工作示例,如下所示:

• JQuery对话框:https://jqueryui.com/dialog/#modal-confirmation
• dialogHTML 5.1元素:https://demo.agektmr.com/dialog
• ARIA模式对话框示例:http: //w3c.github.io/aria-practices/examples/dialog-modal/dialog.html (我已在Plunker上复制)

这是我尝试用Semantic-UI创建一个可访问的模态:https://plnkr.co/edit/HjhkZg

如您所见,我使用了以下属性:

role="dialog"

aria-labelledby="modal-title"

aria-modal="true"

但他们没有解决我的问题.你有没有办法让我的模态保持专注,只有当用户点击取消/确认按钮时才会失去它？

我正在使用<label>包装输入,使其成功和错误消息可以出现在其标签内以进行关联.您认为这种情况下最具语义标记的是什么？

<label>
  <b>Username</b>
  <input>
  <strong>Username already taken :(</strong>
</label>

对于错误是否strong合适？还是span更好？是否role=status合适？

我有一个页面，其中一个按钮标有字形（引导程序）。

我有一个新要求，即使用“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 标签和我使用的其他 Aria 标签的好方法时遇到问题。测试这个的最佳实践是什么。目前使用 Material UI 为 Angular 执行此操作，该 UI 已经具有一些良好的 ARIA 支持。

我尝试使用 JAWS 9 的试用版，但有时我无法判断是我的代码不好还是屏幕阅读器没有我希望的那么好。

感谢您的阅读，并希望有人能为我指出正确的方向。

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 应用程序？或者我应该忽略这个特定的斧头规则？