Question

Hello compliance pros！

我的任务是使我们的网络应用程序符合508条款和wcag 2.0 guidlines。对于大多数事情来说，这并不是太棘手，但我已经遇到了一些障碍。

我在应用程序中大量使用qtip，这往往是大多数兼容b / c它使用wai-aria角色和描述属性。但是，我添加工具提示的方式使得它们在第一次鼠标悬停之前不会被放到文本上。键盘导航显然不会发生这种情况，我也不确定屏幕阅读器是如何处理的！

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

我正在考虑将工具提示应用并显示出来：焦点（并隐藏失去焦点），但是我需要给跨度一个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

WOW！首先，您的代码冻结了我的浏览器。我不确定这是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属性中，屏幕阅读器会将其与锚文本一起阅读。试着保持简单！：）

希望有所帮助。

如何使我的页面部分508和wcag 2.0兼容

1 个答案: