如何使我网页的这部分符合508和WCAG 2.0标准

Question

如何使我网页的这部分符合508和WCAG 2.0标准

3

大家好，合规专家们！

我被要求使我们的Web应用程序符合508部分和WCAG 2.0指南。对于大多数事情来说，这并不太棘手，但我遇到了一些问题。

我在应用程序中经常使用qtip，因为它使用wai-aria角色和described-by属性，所以它通常是符合标准的。但是，我添加工具提示的方式是在第一次鼠标悬停时才将其放在文本上，这显然在键盘导航时不会发生，我也不确定屏幕阅读器如何处理这种情况！

我在这里制作了一个fiddle：http://jsfiddle.net/patriciavandermeer/xkhy6/2/，演示了我的问题。工具提示是HTML，最终用户可以在其他地方设置它们，并且列表项可能有或可能没有工具提示。

我考虑让工具提示在:focus时应用并显示（并在失去焦点时隐藏），但是那样我需要给span添加tabindex，我不确定所有主要浏览器是否都能很好地处理它？

还是应该咬紧牙关，在文档准备就绪时连接工具提示？当我以那种方式设置它时，在一些繁忙的页面上会出现严重的性能问题。

编辑：这里是将用于连接工具提示到span的示例HTML和我使用的jQuery / JavaScript。

示例HTML：

    <li >
        <span class="InteractiveToolTipMe">Administration</span>
        <div class="InteractiveToolTip NoDisplay"><p>This is a description</p>
            <p>&nbsp;</p>
            <p>For administration.....</p></div>

    </li>

    <li >
        Board and Committees
    </li>

    <li  >
        Community Outreach
    </li>
    <li  >
        <span class="InteractiveToolTipMe">Fundraising</span>
        <div class="InteractiveToolTip NoDisplay"><p><strong>test</strong></p>
            <p>&nbsp;</p>
            <ul>
                <li><strong>test</strong></li>
                <li>test</li>
                <li>test</li>
            </ul>
        </div>
    </li>
    <li  style="padding:2px;">
        Physics
    </li>

    <li  style="padding:2px;">
        Public Speaking
    </li>
    <li  style="padding:2px;">
        Special Events
    </li>
</ul>

JavaScript用于附加工具提示：

$('span.InteractiveToolTipMe').live("mouseover", function () {

        var $this = $(this);
        if (!$this.data("toolTipAttached")) {
            var content = $(this).parent().find('.InteractiveToolTip').html();

            $this.qtip({
                content: {
                    text: content
                },
                position: {
                    target: 'mouse',
                    adjust: {
                        mouse: false
                    },
                    viewport: $(window)
                },
                hide: {
                    fixed: true,
                    delay:350,
                    when: 'mouseout'
                },
                show: {

                    solo: true,
                    delay: 350,
                    ready: true
                },
                style: {
                    widget: true,
                    tip:false,
                    classes: "LegendTip"

                }
            });

            $this.data("toolTipAttached", true);
            //$this.trigger("mouseover");
        }

    });

- Patricia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Wilson · Accepted Answer

哇！首先，你的代码让我的浏览器卡死了。我不确定这是JSFiddle的问题还是你的代码的问题。如果你能给我展示一个带有你的代码的实时页面，我可以在那里检查它。

至于可访问性，我会选择使用:focus方法，在页面加载后所有的工具提示都存在于页面上。这使得屏幕阅读器很容易访问你的工具提示数据。此外：

你不需要通过AJAX加载任何数据（我假设你正在这样做），这可能会减少延迟，特别是当你正在进行大量请求时
你不必想出一种方法来告知屏幕阅读器新的工具提示内容已经被加载（盲人读者可能不会预期到这一点）

看起来你的工具提示与锚点相关联。如果你用类aToolTip标记你的工具提示div/span，当相关联的锚点没有聚焦时，你可以将其“隐藏”：

a + .aToolTip {
  position: absolute;
  left:-999em;
}

然后，当前面的锚点被聚焦或悬停时，您可以“显示”工具提示：

a:hover + .aToolTip,
a:focus + .aToolTip {
  position: static;
  left:0;
}

如果提示信息的显示取决于一个锚点，您就不必费心使用 tabIndex。请记住，+ 运算符仅适用于 CSS3 only。使用JavaScript，您可以想出类似的东西，并且能在更多的浏览器中工作。

最后一个将提示信息传达给盲人的想法：如果将其放入锚点的 title 属性中，屏幕阅读器将会与锚文本一起朗读它。只需要保持简单即可! :)

希望这有所帮助。