aria-label と aria-labeledby application_html/css_WEB-ITnose

公開日 2016-05-18 10:22:15 閲覧数 (0)

公開日 2013 年 12 月 12 日、作成者 sisiyu

aria -label 属性

通常の状況では、ユーザーが入力ボックスにタブ移動すると、対応するラベルがフォームの入力コンポーネントに割り当てられ、画面読み上げソフトウェアが対応するラベル内のテキストを読み上げます。

例: Username:

そうでない場合入力ボックスの対応するラベル テキストの位置を設計する場合、aria-label 属性はコンポーネントの組み込みテキスト ラベルを指定します。それは視覚的には表現されません。

例: aria-label="username" />

このとき、フォーカスは入力にあります。ボックスに入力すると、画面読み取りソフトウェアが aria-label の内容 (「ユーザー名」) を読み取ります。

テスト後、スクリーン リーダーは、タブ化できる要素に aria-label が追加されている場合にのみコンテンツを読み上げます。

次の状況も読み取ることができます: タブ化できるスパンラベル

aria -labeledby 属性

目的のラベル テキストが他の要素に既に存在する場合、その値を要素の ID に設定できます。

aria-labelledby=”form-title” >

” form-title” >携帯電話番号で登録

フォームエリア ランドマークロゴ role="form" を追加しました。戦闘中に文字「D」キーを使用すると、ランドマークロゴ間を移動できます。

このエリアにジャンプすると「フォームエリア」だけでなく「携帯電話番号で登録」も読み上げられます。

要素に aria-labelledby と aria-label の両方がある場合、画面読み上げソフトウェアは最初に aria-labelledby の内容を読み取ります。

テスト ソフトウェア: Zhengdu スクリーン リーディング ブラウザ: IE9