WAI ARIA는/클릭하여 정보 표시

나는 p # hlp를 토글하는 도움말 링크가 있습니다. 이 요소들 사이에는 체크 박스 영역이 있습니다. 포커스가 아니라 링크 클릭시 도움 정보 (읽기 p)를 만들어야합니다.WAI ARIA는/클릭하여 정보 표시

<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>

출처

2012-07-27 David C.

아리아 - describedby 속성이 질문에 따라 개체를 설명하는 요소를 식별, 그래서 실제로 당신이 초점에만 온 클릭하고 사용할 수 없습니다해야한다고 말하는 도움말 링크를 나타내지 않는 도움말 정보, 기본적으로이 링크로 활성화되는 다른 영역을 제어하고 그 내용으로 설명됩니다.

그래서 이상적으로이 같은 일을해야합니다

<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-28 05:50:47 Ravi

WAI ARIA는/클릭하여 정보 표시

답변

관련 문제