有没有人有ARIA使用的可靠参考？我正在寻找基于我的标记的东西,但是无法从可信赖的来源中找到很多例子.

现在我几乎从ARIA规范和这个网站开始,但是我会喜欢一些更好的参考资料,以确保我正确地做到这一点.

我只是想知道我是否应该期待大约在2015年1月的浏览器和辅助技术使用speak:none以相当于设置aria-hidden ="true"的方式.我想指出一些半透明的文本应该被忽略,我想知道我是否可以在一个操作中完成它(只需添加一个设置不透明样式的类并说:none,而不是添加类并设置咏叹调隐藏属性).

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 …

我使用Bootstrap创建了一个页面,其中包含下一页和上一页链接的标准布局.在第一页上,我禁用了"上一页"链接,如下所示:

<div role="navigation">
  <ul class="pager">
    <li class="previous disabled" aria-disabled="true">
      <a href="#">Previous page</a>
    </li>
    <li class="next">
      <a href="search.php?page=2">Next page</a>
    </li>
  </ul>
</div>

屏幕阅读器(JAWS,NVDA和VoiceOver)似乎没有看到aria-disabled="true"旗帜,即使W3C WAI-ARIA规范指出:

被禁用的状态适用于当前元素和应用了aria-disabled属性的元素的所有可聚焦后代元素.

如果我添加aria-disabled="true"到链接:

    ...
    <li class="previous disabled" aria-disabled="true">
      <a href="#" aria-disabled="true">Previous page</a>
    </li>
    ...

然后它按照我的希望工作,屏幕阅读器将链接描述为"禁用".

我是否误解了WAI-ARIA规范,或者这是屏幕阅读器实现的"特征"？在他的评论"我如何知道的屏幕阅读器的链接已禁用",布莱恩Garaventa公司提到:

...使用aria-disabled最适合具有已定义角色的元素,例如role = button.

可以aria-disabled 仅适用于可聚焦的元素呢？

我正在为我的项目研究 Web 门户可访问性。在调试更改时，我不太喜欢听屏幕阅​​读器。

只是想知道是否有任何工具可以告诉屏幕阅读器会读出什么。

这是为了了解页面是否存在任何排序问题。

我有一个应用程序的热键列表,其中键盘箭头用unicode字符表示,例如?.我理解屏幕阅读器没有阅读这些字符的原因.因此我想为这些案例提供自定义文本.

我的问题是什么是使屏幕阅读器读取"j或down"而不是"j或[pause]"的最简洁方法.

我尝试了多种方法,所有方法都列在下面的代码中:

<style>
    .readerOnly
    {
        position:absolute;
        left:-10000px;
        top:auto;
        width:1px;
        height:1px;
        overflow:hidden;
    }
</style>
<h1>A sample list of app hotkeys</h1>

<dl>
    <dt>
        <kbd>j</kbd> or <kbd>?</kbd>
    </dt>
    <dd>
        Move down.
        <!--Well, it's a vanilla HTML, but SRs have problem reading the ? character.-->
    </dd>
    <dt>
        <span aria-label="shortcut j or down." class="lo">j or ?</span>
    </dt>
    <dd>
        Move down.
        <!--This is how Google does it in their Drive - I was thinking about similar solution, but well... it's not working with …

我只注意到,虽然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"

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

role="alert"屏幕阅读器会在页面加载时宣布内容吗？

我看到 MDN 对此提出了相互矛盾的建议。

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role指出：

[T]警报的作用是它用于动态内容......如果页面加载分散在各处的多个可见警报，则不会读取任何警报，因为它们不是动态触发的。

而另一个页面声明它可以与静态内容一起使用：

示例1：在HTML代码中添加角色

下面的代码片段显示了如何将警报角色直接添加到 html 源代码中。当元素完成加载时，屏幕阅读器应该收到警报通知。如果页面加载时该元素已经在原始源代码中，则屏幕阅读器将在宣布页面标题后立即宣布错误。

警报角色可以/应该用于静态内容还是仅用于实时区域？

我在可视化中有一个数据列表，我希望使其尽可能易于访问。有两个彼此相邻的列表。

列表项有两种状态。多行可以是活动的或非活动的。可以选择单行。

在一个列表中选择某项，会将“相关”项目显示为活动和非活动。请参阅下面的简化示例。用户选择了“A 2”，它链接到“B 1”和“B 4”，所以 A2 是，aria-selected但没有aria-activeor aria-inactive，我想按照演示使用aria-disabled- 但这是否表明它不可交互？用户仍然可以单击禁用的项目来选择它。

对单个“选定”项目执行多个aria-selected, 和单个操作会更好吗？aria-current=true如果用户尚未做出选择并且所有内容都处于“活动”状态，则每个项目都会处于“活动”状态，这会很奇怪吗aria-selected=true？

.container {
  display: grid;
  grid-template-columns: 200px 200px
}

.list div {
  margin: 0.5rem;
  background: grey;
}

.list .selected {
  background: red;
}

.list .inactive {
  opacity: 0.3;
}

<div class="container">
  <div class="list">
    <div role="row">A 1</div>
    <div role="row" class="selected" aria-selected="true">A 2</div>
    <div role="row">A 3</div>
    <div role="row">A 4</div>
  </div>
  <div class="list">
    <div role="row">B 1</div>
    <div role="row" class="inactive" …