How to make this part of my page section 508 and wcag 2.0 compliant

Question

Hello compliance pros!

I've been tasked with making our web-app compliant to the section 508 and wcag 2.0 guidlines. For most things this hasn't been too tricky, but i've hit a bit of a road block.

I use qtip a lot in the app, which tends to be mostly compliant b/c it uses the wai-aria role and described-by attributes. BUT, the way i add my tooltips makes it so they don't get put on the text until the first mouseover. which clearly isn't going to happen with keyboard navigation, and i'm not sure how screen readers wil handle that either!

I've made a fiddle here: http://jsfiddle.net/patriciavandermeer/xkhy6/2/ that demonstrates what i'm talking about. the tooltips are html that the end users can set elsewhere, and they list items may or may not have a tooltip.

i was thinking about making the tooltips be applied and show up on :focus(and hide on loss of focus), but then i'd need to give the span a tabindex and i'm not sure how well supported that is, can all the main browsers handle that ok?

or should i just bite the bullet and have the tooltips hooked up in the document ready? I had some serious performance issues on some of my busier pages when i had it set up that way.

EDIT: Here's a sample of the html that would be used, and the jquery/ javascript i use to attach the tooltips to the spans.

Sample 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 for attaching the tooltips:

$('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! First of all, your code froze my browser. I'm not sure if this the fault of JSFiddle or your code. If you show me the a live page with your code in it I could check it out there.

As far as accessibility goes, I would choose the :focus approach, where all your tooltips exist on the page after page load. This makes access to your tooltip data by screen readers very simple. Also:

• You won't need to load any data via AJAX (I assume that's what you're doing), which may cut down on latency if you're making a lot of requests
• You won't have to come up with a way to alert screen readers that new tooltip content has been loaded (blind readers probably won't be expecting it)

It looks like your tooltips are associated with anchors. If you markup your tooltip divs/spans with class aToolTip, you can 'hide' them when the associated anchor is not focused:

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

Then you can 'show' your tooltips when the anchor preceding it is focused or hovered:

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

If the display of the tooltip depends on an anchor, you won't have to bother with tabIndex. Keep in mind the + operator is CSS3 only. Using JavaScript, you could come up with something similar that would work in more browsers.

One last idea to get the tooltip info to blind users: if you stuff it in the title attribute of your anchors, screen readers will read it along with the anchor text. Just try to keep it simple! :)

Hope that helped somewhat.