我似乎无法找到任何资源或代码示例的方式,我可以让屏幕阅读器使用 jquery工作(使用wai咏叹调)将html插入dom或将html附加到dom.

任何人都可以请指出一些我可以用作指南的有用资源,或者提供一些代码示例,我可以用它来开发我的应用程序以满足可访问性标准,并将动态内容添加到我的页面上ajax post-back?

TIA.

编辑(添加了NVDA未读取的代码)…我错过了什么?

<html>
<head>

<script language="javascript" type="text/javascript">
    function addText() {
        document.getElementById("test").innerHTML = "some test";
}
</script>
</head>

<body>
<h2>NVDA</h2>

<div id="testarea">Some test area</div>
<div id="test" aria-describedby="testarea" aria-live="polite" aria-relevant="additions removals" role="region"></div><br />

<input type="button" value="click me" onclick="addText()" />
</body>
</html>

解决方法

WCAG

这些是WCAG关于内容更新的客户端脚本的建议:http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

特别是到目前为止我发现了

> SCR21:«使用文档对象模型(DOM)的功能向页面添加内容»(见http://www.w3.org/TR/WCAG20-TECHS/SCR21.html)
> SCR-26:«紧跟其触发元素后将动态内容插入文档对象模型»(见http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html#SCR26)
> G75:«提供推迟任何内容更新的机制»(见http://www.w3.org/TR/WCAG20-TECHS/G75.html)
> G76:«提供一种机制来请求更新内容而不是自动更新»(见http://www.w3.org/TR/WCAG20-TECHS/G76.html)
> G186:«使用网页中的控件停止移动,闪烁或自动更新内容»(参见http://www.w3.org/TR/WCAG20-TECHS/G186.html)

咏叹调

关于ARIA角色,请看一下咏叹调,咏叹调,咏叹调原子和警报属性:

http://www.w3.org/TR/wai-aria/states_and_properties#aria-live

Indicates that an element will be updated,and describes the types of updates the user agents,assistive technologies,and user can expect from the live region.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant

Indicates what user agent change notifications (additions,removals,etc.) assistive technologies will receive within a live region. See related aria-atomic.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-atomic

Indicates whether assistive technologies will present all,or only parts of,the changed region based on the change notifications defined by the aria-relevant attribute.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden(如果ajax结果显示或隐藏页面的某些区域)

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. See related aria-disabled.

http://www.w3.org/TR/wai-aria/roles#alert

Alerts are used to convey messages to alert the user. In the case of audio warnings this is an accessible alternative for a hearing-impaired user. The alert role goes on the node containing the alert message. Alerts are specialized forms of the status role,which will be processed as an atomic live region.

其他资源

有关NVDA屏幕阅读器和ajax更新及其他相关资源的可访问性的文章:

http://tink.co.uk/2009/06/screen-reader-support-for-ajax-live-regions/
http://www.paciellogroup.com/blog/2008/02/ajax-and-screen-readers-content-access-issues/

http://ejohn.org/blog/ajax-accessibility/(这里建议了一个关于更新内容的实时区域的代码片段)

<p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
    aria-describedby="users-desc" id="users">  
     ... 
 </ol>

wai aria和jquery.html()以及jquery.append()的更多相关文章

  1. angularjs – 单页应用程序中的辅助功能(ARIA等)

    什么是最好的方法使SPA可访问?我对于aria规范很少有没有经验,我不知道它是否会在单页应用程序上工作。首先,像评论者说的,是的,你需要确保ARIA标签被正确使用。角色,aria标签和tabindex将是您看到的最流行的ARIA属性。最后一个选择是要求无障碍测试人员将您的应用程序用于测试驱动器。他们都可以有点干,但也有完整的你可以使用ARIA明智的一切的列表。

  2. html5 – HTML’hidden’和’aria-hidden’属性有什么区别?

    在使用Angular材料时,我一直看到了aria属性。有人可以向我解释,咏叹调前缀是什么意思?但最重要的是我想要理解的是aria-hidden和hidden属性之间的区别。解决方法ARIA定义了使残疾人更容易访问Web内容和Web应用程序的方法。隐藏属性在HTML5中是新的,并且告诉浏览器不显示元素。aria-hidden属性告诉屏幕阅读器是否应该忽略该元素。

  3. wai aria和jquery.html()以及jquery.append()

    我似乎无法找到任何资源或代码示例的方式,我可以让屏幕阅读器使用jquery工作将html插入dom或将html附加到dom.任何人都可以请指出一些我可以用作指南的有用资源,或者提供一些代码示例,我可以用它来开发我的应用程序以满足可访问性标准,并将动态内容添加到我的页面上ajaxpost-back?

  4. html5 – 什么是aria标签,我应该如何使用它?

    所以我的问题是:为什么我需要aria标签,我应该如何使用它?解决方法这是一个旨在帮助assistivetechnology将标签附加到匿名HTML元素的属性。所以有元件:显式地告诉用户在输入框中键入其名称,其中id=“fmUserName”。aria标签做同样的事情,但它是那些在屏幕上有一个标签是不实际或不可取的情况。采取theMDNexample:大多数人都能够直观地推断这个按钮会关闭对话框。盲人使用辅助技术可能只是听到“X”朗读,这并不意味着没有视觉线索。aria标签明确告诉他们按钮将做什么。

  5. 什么是HTML5 ARIA?

    解决方法WAI-ARIA是一个规范定义支持可访问的网络应用程序。它定义了一系列标记扩展,可以由Web应用程序开发人员使用它们提供有关各种元素的语义的其他信息,如屏幕阅读器等辅助技术。当然,为了使ARIA工作,解释标记的HTTP用户代理需要支持ARIA,但规范是以这种方式创建的,以允许下级用户代理安全地忽略ARIA特定标记,而不影响网络应用程序的功能。这里是ARIA规范的一个例子:请注意外部上的角色属性。

  6. 有人可以解释HTML5的aria- *属性吗?

    我想知道aria-*属性是什么用的。它们可以有什么值,它们是定义的值还是可以创建自己的值?解决方法ARIA代表AccessibleRichInternetApplications,旨在改善富互联网应用程序的可访问性,即使其更适合残疾人使用。关于各种属性的帮助可用here。我不认为你可以创建自己的ARIA属性。

  7. WAI ARIA:Javascript能力测试?

    本着逐步增强的精神,我想做一些ARIA功能测试,以便在浏览器支持的情况下实现其他增强功能.我不想检测屏幕阅读器–我希望确保屏幕阅读器用户获得最佳体验,因为他们使用的工具.例如,如果不支持aria-live属性,则可能不是实现endlessscrolling的好主意.我知道还有一个问题,即浏览器可能会支持这些属性,但屏幕阅读器可能不支持这些属性.由于屏幕阅读器通过浏览器透明地运行,我可以忽略该边缘的

  8. html5 – 用于在HTML中读取替代文本(例如罗马数字)的ARIA属性

    在我的HTML文档中,我使用罗马数字.有没有办法通知屏幕阅读器以另一种方式解释某些文本?我的猜测是会有一个ARIA属性,但我似乎无法找到它.例如.:解决方法使用aria-label标记为元素提供有意义的描述.然后,通过将它们包含在将aria-hidden属性设置为true的span元素中来隐藏屏幕阅读器中的元素,从屏幕阅读器中隐藏罗马数字.

  9. html5 – 何时使用必需属性与输入元素的aria-required属性?

    我正在努力使一个表单可访问.我应该让我的输入有所需要的和aria需要的属性,还是只有一个?

随机推荐

  1. jquery-plugins – 是否可以使用猫头鹰旋转木马实现循环/无限轮播?

    我正在使用猫头鹰旋转木马,它的工作完美,除了它不支持循环/无限滚动.我没有搜索google和stackoverflow的想法,没有运气.有没有人在猫头鹰旋转木马上实现圆形/无限滚动?

  2. jQuery动态输入字段焦点

    我想使用以下jQuery向我的页面动态添加一个输入字段:在这样做之后,我希望输入字段具有闪烁的文本光标的焦点,所以我想在创建后立即输入.有人可以告诉我我该怎么办?

  3. jquery – 为什么$(window).height()这样错了?

    我试图获取当前浏览器的视口高度,使用但我得到的价值观太低了.当视口高度高达850px时,我从height()获取大约350或400像素的值.这是怎么回事?

  4. jquery – 如果在此div之外和其他draggables内部(使用无效和有效的还原选项),则可拖动恢复

    例如这样但是由于明显的原因,这不行.我可以说这个吗?

  5. 创建一个jQueryUI 1.8按钮菜单

    现在jQueryUI1.8已经出来了,我正在浏览更新,并且遇到了新的Buttonwidget,特别是SplitButtonwithadropdown的演示之一.这个演示似乎表明Buttonwidget可以在这里创建一个下拉菜单.作为讨论的问题,我想知道使用这个新的Button小部件来创建一个下拉菜单有什么方法.干杯.解决方法您必须在按钮下方列出一个列表,方式类似于此处为自动完成提供的演示:http

  6. 灰色divs使用JQuery

    我试图使用这个代码:为了淡出一大堆名为MySelectorDiv的div,唯一的是,它只会淡出第一个而不是所有的div,为什么呢?

  7. 使用jQuery动态插入到列表中

    我有两个订单列表在彼此旁边.当我从一个列表中选出一个节点时,我想按照字母顺序插入到另一个列表中.抓住的是我想要把一个元素放在另一个列表中,而不刷新整个列表.奇怪的是,当我插入到右边的列表中,它工作正常,但是当我插入到左边的列表中时,顺序永远不会出来.我也尝试将所有内容读入数组,并将其排序在一起,以防止children()方法没有按照显示顺序返回任何东西,但是我仍然得到相同的结果.这是我的jQuer

  8. 没有回应MediaWiki API使用jQuery

    我试图从维基百科获取一些内容作为JSON:但我没有回应.如果我粘贴到浏览器的地址栏,就像我得到预期的内容.怎么了?解决方法您需要通过添加&callback=?来触发具有$.getJSON()的JSONP行为?在querystring上,像这样:Youcantestithere.没有使用JSONP,你正在击中same-originpolicy,阻止XmlHttpRequest获取任何数据.

  9. jQuery Ajax请求每30秒

    我有这段代码,但是有些人在我的网站上的值可能会改变.我需要每30秒钟更新一次#financediv.这可以做吗解决方法您可以将代码放在单独的函数中,如下所示:然后每30秒建立一个定时器调用该函数:祝你好运!总结以上是DEVMAX为你收集整理的jQueryAjax请求每30秒全部内容。如果觉得DEVMAX网站内容还不错,欢迎将DEVMAX网站推荐给好友。

  10. jquery – keypress事件在IE和Chrome中不工作,但在FF工作

    任何想法为什么会这样发生?我通常认为Chrome会更加宽容代码?这是我的按键键.我错过了什么吗?右图();和leftimage();是应该工作的功能,因为我在其他地方使用这些功能谢谢您的帮助!

返回
顶部