3

コンプライアンスのプロの皆さん、こんにちは。

私は、Webアプリをセクション508およびwcag2.0ガイドラインに準拠させるという任務を負っています。ほとんどの場合、これはそれほど難しいことではありませんが、私は少し障害にぶつかりました。

私はアプリでqtipをよく使用しますが、これはほとんどが準拠している傾向があり、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を介してデータをロードする必要はありません（私はそれがあなたがしていることだと思います）。これにより、多くのリクエストを行う場合にレイテンシーが削減される可能性があります
  • 新しいツールチップコンテンツが読み込まれたことをスクリーンリーダーに警告する方法を考え出す必要はありません（ブラインドリーダーはおそらくそれを期待していません）

ツールチップがアンカーに関連付けられているようです。ツールチップのdiv/spansをクラス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 に答える