Divx를 입력 할 때 레이블을 읽도록 강제 화면 판독기

Question

동적 양식 요소가 여러 개인 div가 있습니다. 탭을 통해 div를 입력 할 때 화면 판독기에서 레이블을 읽길 원하지만 div 자체는 초점이 맞지 않아야합니다. 일반적으로 레이블의 for 속성 또는 첫 번째 양식 요소의 aria-describedby/aria-labeledby 속성을 사용하면이 동작이 허용되지만로드 중에 양식 요소가 동적으로 변경되므로 첫 번째 요소가 불확실합니다.

<label/> <%-- This should be read --%> 

<div> <%-- When this div is entered during navigation with tabbing --%> 
    <dynamic form element 1> 
    ... 
    <dynamic form element n> 
</div> 

WIA-ARIA를 통해이 동작을 생성하는 방법을 아는 사람이 있습니까?

또는 javascript를 사용하여 div 아래의 첫 번째 요소를 가져와/forria 속성에 필요한 동적 요소를 추가하는 방법이 있습니까?

Answer 1

일반 <div> 대신 컨테이너에 <fieldset> 요소를 사용하십시오. 화면 판독기는 포커스가 필드 안에 입력되면 필드 세트 레이블을 알립니다.

Answer 2

페이지를 액세스 가능하게하려면 올바른 의미 요소를 사용해야합니다. 이렇게하면 화면 판독기 및 기타 보조 기술을 통해 각 요소를 해당 용도로 올바르게 렌더링 할 수 있습니다. div를 양식 요소로 사용하고 div를 사용하여 양식을 만드는 대신 fieldset 및 범례를 사용해야합니다. 항상 바퀴의 재발 명을 피해야합니다.

<form method="" action=""> 
    <fieldset> 
     <legend>This will be read when the user tabs to this</legend> 
     <dynamic form element 1> 
     ... 
     <dynamic form element n> 
    </fieldset> 
</form> 

이렇게하면 해당 사용자에게만 제공 할 구체적인 정보가 없으면 ARIA 레이블이 필요하지 않습니다. 적절한 의미 론적 요소를 사용하면 보조 기술로 페이지를 액세스 할 수있는 방향으로 갈 수 있습니다. 이 링크에는 다른 많은 사람들과 마찬가지로 html로 양식을 액세스 할 수있는 유용한 정보가 있습니다. https://www.w3.org/WAI/tutorials/forms/