0

<p id="hlp">要素を切り替えるヘルプ リンクがあります。これらの要素の間にチェックボックス領域があります。フォーカスではなく、リンクのクリック時にヘルプ情報を利用できるようにする必要があります (p を読んでください)。

<form name="name">
  <fieldset>
  <legend>legend</legend>
  <a class="help" title="help-button" href="#" aria-describedby="hlp" >Help</a>
  <div class="check">
     <label class="radio">10</label><input type="radio" name="p-v">
     <label class="radio">20</label><input type="radio" name="p-v">
     <label class="radio">Input</label><input type="radio" name="p-v">
  </div>
  <div class="expln">
     <p id="hlp" aria-hidden="false">Help info: Lorem ipsum blah blah blah</p>
  </div>
</fieldset>
</form>

どうやってやるの？

4

1 に答える 1

2

aria-記述されたプロパティは、オブジェクトを説明する要素を識別するため、質問によると、ヘルプ情報は、フォーカスではなくオンクリックでのみ利用可能であると言っている場合、実際にはヘルプリンクを表していません。基本的に別のコントロールを行うことですこのリンクによってアクティブ化され、その内容によって記述される領域。

したがって、理想的には、次のようなことを行う必要があります。

<a class="help" title="help-button" href="#" role="button" aria-controls="hlp">Help</a>
<div class="expln" id="hlp" tabindex="-1" role="region" aria-label="Help Info" aria-expanded="true" style="display: block; ">
   <p>Help info: Lorem ipsum blah blah blah</p>
</div>

そのため、JAWS のようなスクリーン リーダーは、ボタンがクリックされたときにのみ領域の内容を読み取るようになりました。

また、ブラウザのフォーカスが変更されず、ページの場所も同じであるため、リンクを role="button" としてマークしました。

以下も参照してください。

于 2012-07-28T05:50:47.123 に答える