23

divでjQueryオートコンプリートを使用していますが、jqueryによってこの余分なスパンが自動的に追加されています

"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"

このスパンが作成されないようにするにはどうすればよいですか?

4

7 に答える 7

42

CSSルールを追加して解決しました：

.ui-helper-hidden-accessible { display: none; }
于 2012-10-14T14:24:01.410 に答える
6

これはアクセシビリティ上の理由によるもので、目の不自由な人がどれだけの結果が見つかったかを「読む」ことができます。本当にこれを削除したい場合は、ソース コードを変更できます。

this.liveRegion = $( "<span>", {
                role: "status",
                "aria-live": "polite"
            })
            .addClass( "ui-helper-hidden-accessible" )
            .insertAfter( this.element );

しかし、それはお勧めできません。

于 2012-10-09T02:28:13.220 に答える
1

n 番目の子セレクターを使用してレイアウトに CSS フレックス ボックスを使用していたため、このスパンによって列のレイアウトが歪んでいました。

display: noneまたはposition: absolute; top: -999999私の問題を解決しません。要素を DOM から完全に削除する必要があったため、次のcreate イベントハンドラーを作成しました。

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}
于 2014-05-25T09:56:00.460 に答える
0

.css ファイルを追加するとうまくいきました (もちろん、すべてのスパン要素を削除することもできましたが、それは良い解決策ではありません):

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
于 2016-11-16T07:30:33.557 に答える
0

本当にこれを削除すべきではありません (視覚障害者専用の Web ページを閲覧したいのですが、コンテンツにアクセスできませんか?)...

Web サイトを ADA 準拠にするのは簡単ではありません。このスパンは、すべてのもののほんの一部です。

display none などで要素を非表示にすることは、ADA に関する悪い習慣です。そのため、Facebook のようなページでは、要素を画面外のどこかにインデントして非表示にしています。

display:none vs visibility:hidden vs text-indent:9999 スクリーンリーダーはそれぞれでどのように動作しますか?

ADA 関連のものについては、ここから始めることができます: http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

この場合、高さを強制的に 0 にするのが役立つかもしれません...

于 2014-07-17T13:46:35.080 に答える
-3

これは完全に機能します：

$(document).ready(function(){ $("span").remove(); });
于 2014-11-27T07:41:23.723 に答える