14

私が作業しているサイトでサードパーティのスクリプトが使用されており、のいくつかのインスタンスがに置き換えられてい<a href="">ます<a>。スクリプトの別の部分のおかげでリンクは引き続き機能しますが、ユーザーエージェントによってリンクとして扱われなくなりました。

追加することでタブ付きのナビゲーション順序に復元できますがtabindex="0"、支援技術にリンクとしてアナウンスさせたり、ページ上のすべてのリンクのリストに含めたりするにはどうすればよいですか？

role="link"ヘルプを追加しますか？

私はサードパーティにスクリプトを改善して、hrefがそのまま残るようにプッシュしています。しかし、それまでの間、どのようにして被害を修復するのが最善でしょうか？

サードパーティのコードでは機能しなくなるため、元のコードhrefなどをリンクに追加することはできません。href="#"私ができるように彼らがコードを改善することを願っていますが、今のところ、「href」なしでリンクにアクセスできるようにする必要があります。

4

2 に答える 2

10

非hrefを（およびアクセス可能）<a>のように動作させるには、を追加し、実際のリンクのようにスタイルを設定し、キーボードハンドラーコードを追加してReturnをクリックとして扱う必要があります。<a>role=linktabindex=0

role="link"十分ではありません。スクリーンリーダーはリンクとして報告する場合がありますがtabindex="0"、適切な視覚スタイルがないと、目の見えるユーザーはそもそもタブに移動できず、キーボードイベントハンドラーがないと、マウスユーザーのみがクリックできます。（技術的には、スクリーンリーダーのユーザーは通常、マウスクリックをシミュレートするためのホットキーを持っていますが、キーボードのみの視力のあるユーザーは通常そのオプションを持っていないので、それに依存しないでください。）

<a>または、使用しているクレイジーなスクリプトで許可されている場合は、元のスクリプトのすぐ内側にある「キーボードクリックソース」（私の用語）をシミングしてみてください。

<a>foo</a>

次のように置き換えます。

<a><a class='shim' href="javascript:void(0)">foo</a></a>

（これclass='shim'は、後で説明するイベントを実行する必要がある場合にのみ必要です...）次のようなものを使用してjQueryでこれを実行できます:(ジャックの回答から借用）

$("a:not([href])").wrapInner("<a class='shim' href='javascript:void(0)'></a>")

これがどのように機能するかは、新しく追加された内部にが含まれ<a ...>ているhrefため、リンクとして公開され、タブ化可能です。さらに重要なことに、ユーザーがそれにタブを付けてReturnキーを押すと、デフォルトのA動作がそのキーボード入力をclickイベントに変換します。この特定のAにhrefはundefined/void（0）を返すがあり、実際のナビゲーションは発生しませんが、クリックイベントは元のAにバブルアップし、元のAに作用します。

（これは、一部の親要素（多くの場合DIVなど）がクリックイベントを処理できるようにするための適切なパターンであり、キーボードからクリックイベントを取得できる子タブ可能Aを追加すると、マウスとキーボードの両方で使用できるUIが得られます。）

targetここでの大きな注意点は、元のスクリプトがイベントのことを気にしないことを前提としていることです。そのスクリプトがこれをチェックする場合、元のAsではなくシムAからのクリックイベントを見ると混乱します。これを回避する1つの方法は、イベントをキャプチャして再発生させることです。これは面倒な場合があり、最近のブラウザでのみ機能する可能性があります。たとえば、次のようなものを使用します。

// 'shim' class used so we can do this:
$("a.shim").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    // the following works if listener using jQuery or is setting onclick directly, otherwise...
    // $(e.target).parent().click();.

    // More general way to raise events; may need alternate for IE<9
    var e2 = document.createEvent("UIEvents");
    e2.initUIEvent("click", true, true, window, 1);
    e.target.parentNode.dispatchEvent(e2)
});
于 2012-08-22T10:56:59.937 に答える