如何使我的页面部分的这一部分符合 508 和 wcag 2.0

Question

您好合规专家！

我的任务是使我们的网络应用程序符合第 508 节和 wcag 2.0 指南。对于大多数事情，这并不太棘手，但我遇到了一些障碍。

我在应用程序中使用了很多 qtip，它通常是符合 b/c 的，它使用 wai-aria 角色和 describe-by 属性。但是，我添加工具提示的方式使其在第一次鼠标悬停之前不会放在文本上。这显然不会在键盘导航中发生，我也不确定屏幕阅读器将如何处理它！

我在这里做了一个小提琴：http://jsfiddle.net/patriciavandermeer/xkhy6/2/ 这证明了我在说什么。工具提示是最终用户可以在其他地方设置的 html，它们列出的项目可能有也可能没有工具提示。

我正在考虑让工具提示被应用并显示在 :focus 上（并在失去焦点时隐藏），但是我需要给跨度一个 tabindex 并且我不确定它的支持程度如何，所有主要浏览器都可以处理吗？

还是我应该咬紧牙关，准备好文档中的工具提示？当我以这种方式设置它时，我在一些繁忙的页面上遇到了一些严重的性能问题。

编辑：这是将使用的 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");
        }

    });

Answer 1

哇！首先，您的代码冻结了我的浏览器。我不确定这是 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 属性中，屏幕阅读器将与锚点文本一起阅读它。尽量保持简单！ :)

希望能有所帮助。