WCAG 2.0 A级别和AJAX生成的内容

6
我在寻找一个清晰的答案,是否使用AJAX技术的网站可以至少通过WCAG 2.0 Level A认证。根据WCAG2.0中的示例,它声明:“我能否使用Javascript/Ajax、Flash、PDF、Silverlight和其他技术来满足WCAG 2.0?WCAG 2.0被设计为适用于广泛的Web技术。”这并没有明确地回答“是/否”。一些文档表明,网站必须完全禁用JavaScript才能正常运行(这种情况下明显的答案是“否”),但我认为这是旧信息,现在使用JavaScript不再是绝对的障碍(如果我错了,请纠正我!)。也许这是因为给出一个笼统的“是”的回答太过宽泛,所以让我给出一个具体的(简化但本质相同)情况。

1)如果我的网站在页面加载后立即使用AJAX生成数据列表(比如用户列表),我可以期望至少通过A级别(甚至更高的级别)吗?以下是一个简单的例子:

<h1> Stuff loads here on page load </h1>
<div id="thisIsWhereContentGoes">
</div>
<script type="text/javascript">
    var url = 'http://yourfavoritedatasource.url';
    var request = $.ajax({
        url: url,
        type: "post",
        data: 'text'
    });
    request.done(function (response, textStatus, jqXHR){
        jQuery('#thisIsWhereContentGoes').html(response);
    });
</script>

我猜这样做没问题。
2) 再往前一步,假设我有一些控件(比如上一页/下一页来滚动列表页面或更新内容,为简单起见,我们假设这些只是锚点标签),我可以期望它们也能通过A/AA/AAA吗?对上面的代码进行轻微修改:
<a href="javascript:doRequest()"> Next </a>
<script type="text/javascript">
    doRequest();
    function doRequest()
    {
        var url = 'http://yourfavoritedatasource.url';
        var request = $.ajax({
            url: url,
            type: "post",
            data: 'text'
        });
        request.done(function (response, textStatus, jqXHR){
            jQuery('div').html(response);
        });
    }
</script>

我希望你也能理解这个。

我希望我只是过于追求完美,这一切都没问题。就我所知,这些似乎与WebAim的WCAG检查清单没有冲突。


1
说你不能使用JS已经相当老派(2000年之前)。Mook的答案涵盖了基础知识。WCAG2.0分为四个方面:可感知性,可操作性,可理解性和健壮性。简而言之:是的,你可以使用JS。 - Ryan B
我也在想屏幕阅读器获取动态Web页面更新(AJAX)的可访问方式。在ux.stackexchange.co上提出了问题。 - Hrvoje Golcic
1个回答

6
针对您的第一个问题,继续使用WebAIM作为优秀资源,根据http://webaim.org/discussion/mail_thread?thread=3870上的说法,似乎不再需要网站无需JavaScript就能正常工作。
引用一段话如下:

共识似乎是只要满足以下若干标准之一,例如提供支持JavaScript的用户代理程序可轻易获得且价格合理,则无需在关闭JavaScript的情况下使网站正常工作。

至于使用AJAX,只要确保解决了辅助功能的所有方面,包括:
  1. 应用程序必须通知用户发生了更改
  2. 允许直接访问新内容
  3. 允许Web应用程序的连续功能
以上信息来源:http://webaim.org/techniques/ajax/
WebAIM有一篇很好的后续文章,展示了实现这些目标的方法,链接:http://webaim.org/techniques/aria/。我特别推荐查看动态内容更新部分,重点强调使用WAI-ARIA live regions

谢谢。那么,我上面的例子似乎不完整,因为方面(1)可能会失败?您提供的第二个webaim链接建议我可以将aria-live =“polite”属性添加到#thisIsWhereContentGoes div以进行改进。 - amomin

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接