アクセシビリティ開発の例(7)を説明

無線

<divの役割= "ラジオ" ARIA-確認= "true" のアリア・ラベル= "单选2" でtabindex = "0">单选でtabindex = "0" </ div>

これは、シミュレートされたラジオ機能をDIV、スクリーンリーダーソフトウェアは、通常は見られませんが、役割とアリア、チェック状態で、スクリーンリーダーは、その内容を読むことができるようになります。

姶良ラベル

通常の状況下では、入力コンポーネントは、ラベルに対応した形状を有して形成します。

<フォームの役割= "フォーム">
  <DIV CLASS = "フォームグループ">
    <= "名前"のラベル>名称</ラベル>
    の<input type = "text"のクラス= "フォームコントロール" ID = "名前"プレースホルダ= "请输入名称">
  </ div>
</フォーム>

入力コンポーネントがフォーカスを取得したときに、スクリーンリーダーは、テキストの適切なラベルを読み出します。

我々は、入力ボックスのラベルを設定していない場合でも、それがフォーカスを持っているとき、スクリーンリーダーはアリア・ラベル属性の値を読み出します、アリア・ラベルは、視覚効果には表示されません。

<フォームの役割= "フォーム">
  <DIV CLASS = "フォームグループ">
    の<input type = "text"のクラス= "フォームコントロール" ID = "名前"プレースホルダ= "请输入名称" ARIAラベル= "名称「>
  </ div>
</フォーム>

テストの後、ARIAラベルが唯一の要素にタブに適用することができ、読みます画面の内容を読み出します。

< スパン  のtabIndex = "0"アリア・ラベルは= "プロンプトコンテンツタグ">タブがスパンかもしれ</ span>の

アリア・ラベルを使用する場合は、以下の点に注意してください。

  • 同時に、後者を無視する、ためのARIAラベルおよびラベルを使用。

  • 同時に、ARIAラベルとARIA-labelledyを使用して、元の無視

  • IEは、入力上のアリア・ラベルの使用をサポートしていますが、ARIA-labelledbyのをサポートしていません。

  • 対応するノート・テキストが隠されていても、ARIA-labelledbyのを使用している場合、まだ読むことができます。

  • 効果的かつdivのためのフォーム要素のラベル、またがっていません

  • フォーム要素の入力タイプ=ボタンは、コメントを追加しない、スクリーンリーダーソフトウェアが値を読み取ることができます

  • いないすべてのタイトル画面リーダーソフトウェア読み取るために、次のタイトル個々のケースに、IEで直接コンテンツを読み込んspanタグ、ボタン読み値の値の、スパンボタンを読んでいません

  • href属性を検索するタグを追加した後も、あるいは我々は、tabindex属性を使用する必要がなければなりません。

ARIA-labelledbyの

あなたはスクリーンリーダーは、他の要素の存在下でのラベルテキストを読みたい場合は、その要素の値IDを指定することもできます。ARIA-labelledbyのの要素のidを設定します。次に、スクリーンリーダーは、その値を読み取ることができます。

<BODY>
  <DIV CLASS = "ドロップダウン">
    <ボタンタイプ= "ボタン"クラス= "BTNドロップダウン・トグル" ID = "dropdownMenu1"データトグル= "ドロップダウン">
    选择你的职业
      <スパンクラス= "キャレットを" > </ span>を
    </ button>の
    <ULクラス= "ドロップダウン・メニューの"役割= "メニュー" ARIA-labelledbyの= "dropdownMenu1">
      <LIの役割= "プレゼンテーション">
        <役割= "メニュー項目"でtabindex = " - 1"のhref = "#">教师する</a>
      ます。</ li>
      <LIの役割= "プレゼンテーション">
        <a role="menuitem" tabindex="-1" href="#">医生する</a>
      < / LI>
      <LIの役割= "プレゼンテーション">
        <a role="menuitem" tabindex="-1" href="#">学生する</a>
      ます。</ li>
    </ ulの>
  </ div>
</ BODY>

ULはフォーカスを取得すると、スクリーンリーダーは読みます:「あなたのキャリアを選択してください。」

ARIA-labelledbyのとARIAラベルしばらく要素場合、スクリーンリーダーは、アリア-labelledbyの内容を読むことを好むでしょう。

プログレスバー、ARIA-valuenowを、ARIA-valueminの、ARIA-valuemax

 <DIV ID = "パーセント装填" 役割= "プログレス" ARIA-valuenowを= "75" ARIA-valueminの= "0" ARIA-valuemax = "100" />

これが書かれたdiv要素を持つスクロールバーであるので、何も文字通りの意味はありません。しかし、開発者のために、HTML4で、そしてこれ以上の意味タグに、私たちはARIAのロールを導入する必要があり、要素に特定の属性を追加するには、この属性。たとえば、役割=「プログレスバー」は、この属性は、ブラウザに指示、

この要素は、実際にJavaScriptで実装プログレスバーコンポーネントです。aria-valueminとaria-valuemax属性は、プログレスバーの最小値と最大値を示しています。ARIA-valuenowをその後、プログレスバーの現在の状態を説明し、それにはJavaScriptを更新することが不可欠です。

 

おすすめ

転載: www.cnblogs.com/kunmomo/p/11572839.html