5

WAI-ARIAaria-hiddenサポートと jQuery の .toggle() メソッドを組み合わせたいと思います。

与えられた<p id="myElement">Hi there</p>

$('#myElement').toggle()要素を非表示にして、次のように設定しaria-hidden="true"ます。

<p id="myElement" style="display: none;" aria-hidden="true">Hi there</p>

同じ$('#myElement').toggle()スクリプトを再度実行すると、要素が表示 (トグル) され、設定 (トグル) されますaria-hidden="false"。

<p id="myElement" style="display: block" aria-hidden="false">Hi there</p>

おそらく、メソッドの完全な機能を使用したいのですが、おそらく次のようなものです

$('#myElement').toggle(
    if ($this.css('display')==='none'){
       $this.prop('aria-hidden', 'true')
    }
    else
    {
            $this.prop('aria-hidden', 'false')
    }
)

状態.toggle()を切り替えるように拡張するための最もパフォーマンスの高いソリューションは何ですか?aria-hidden

4

2 に答える 2

4

簡単に言えば、そうする必要はないということです。

Accessible Technology はdisplay: hidden;、すでに要素を適切に隠している方法で CSS のプロパティをサポートしています。aria-hidden="true"そのため、スクリーン リーダーの観点からすると、プロパティを に.toggle()設定する jQuery のメソッドに対して、指定は冗長です。プロパティの指定(またはプロパティの削除) は、プロパティを に設定する jQuery のメソッドに冗長です。displayhiddenaria-hidden="false"aria-hidden.toggle()displayinline

詳細については、 https://stackoverflow.com/a/10351673/1430996およびSteve FaulknerのHTML5 Accessibility Chops: hidden および aria-hiddenブログ投稿 (特に「結果の概要」) を参照してください。

于 2013-01-31T21:39:55.627 に答える