3

您好合规专家！

我的任务是使我们的网络应用程序符合第 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");
        }

    });
4

1 回答 1

3

哇！首先，您的代码冻结了我的浏览器。我不确定这是 JSFiddle 还是您的代码的错。如果您向我展示包含您的代码的实时页面，我可以在那里查看。

就可访问性而言，我会选择这种:focus方法，在页面加载后，您的所有工具提示都存在于页面上。这使得屏幕阅读器访问您的工具提示数据变得非常简单。还：

  • 您不需要通过 AJAX 加载任何数据（我假设这就是您正在做的事情），如果您发出大量请求，这可能会减少延迟
  • 您不必想出一种方法来提醒屏幕阅读器新的工具提示内容已加载（盲人读者可能不会期待它）

看起来您的工具提示与锚点相关联。如果您使用 class 标记您的工具提示 div/span aToolTip，则可以在关联的锚未聚焦时“隐藏”它们：

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

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

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

如果工具提示的显示依赖于锚点，您就不必为tabIndex. 请记住，+运算符仅是CSS3。使用 JavaScript，您可以想出类似的东西，可以在更多浏览器中使用。

将工具提示信息提供给盲人用户的最后一个想法：如果您将其填充到title锚的属性中，屏幕阅读器将与锚文本一起阅读它。尽量保持简单！:)

希望有所帮助。

于 2011-09-16T23:23:29.627 回答