Как сделать эту часть моей страницы 508 и wcag 2.0 совместимой

Question

Привет профессионалам соответствия!

Мне было поручено сделать наше веб-приложение совместимым с разделами 508 и wcag 2.0. Для большинства вещей это не было слишком сложно, но я столкнулся с некоторым препятствием.

Я часто использую qtip в приложении, которое, как правило, в основном соответствует b / c, оно использует роль wai-aria и описываемые атрибуты. НО, способ, которым я добавляю свои подсказки, делает так, чтобы они не помещались в текст до первого наведения мыши. что явно не произойдет с клавиатурной навигацией, и я не уверен, как с этим справятся программы чтения с экрана!

Я сделал скрипку здесь: http://jsfiddle.net/patriciavandermeer/xkhy6/2/ это демонстрирует то, о чем я говорю. всплывающими подсказками являются html, которые конечные пользователи могут задавать в другом месте, и они имеют элементы списка, которые могут иметь или не иметь всплывающую подсказку.

Я думал о том, чтобы заставить всплывающие подсказки применяться и отображаться в: focus (и скрывать при потере фокуса), но тогда мне нужно было бы дать spanin 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 (я полагаю, это то, что вы делаете), что может сократить задержку, если вы делаете много запросов
• Вам не придется придумывать способ оповещения программ чтения с экрана о том, что новый контент всплывающей подсказки загружен (слепые читатели, вероятно, этого не ожидают)

Похоже, вашвсплывающие подсказки связаны с якорями.Если вы разметите свои всплывающие подсказки div / span с классом aToolTip, вы можете «скрыть» их, когда связанный якорь не сфокусирован:фокусируется или зависает:

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

Если отображение всплывающей подсказки зависит от привязки, вам не придется беспокоиться о tabIndex.Помните, что оператор + только CSS3 .Используя JavaScript, вы можете придумать нечто подобное, которое будет работать в большем количестве браузеров.

Последняя идея - получить информацию о всплывающей подсказке для незрячих пользователей: если вы добавите ее в атрибут title ваших якорей, программы чтения с экрана будут читать ее вместе с текстом привязки.Просто постарайтесь сделать это простым!:)

Надеюсь, что это немного помогло.