접근성 : Voicerover는 다음 요소

Question

을 선택 포커스를 이동하지 않습니다는

<div class="abc1" role="main"> 
     </div>  
     <h1 >header1</h1>  
     <div id="main" role="main" class="main-content"> 
      <div> 

      <div> 

       <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaa</p> 
       <p><span class="errortxt"><a>Required fields message</a></span></p> 
      </div> 

      <div id="errorDisp"> 
       <ol> 
        <li id="message-1" aria-hidden="true"> 
         <a></a> 
        </li> 
        <li id="message-2" aria-hidden="true"> 
         <a></a> 
        </li> 
        <li id="message-3" aria-hidden="true"> 
         <a></a> 
        </li>       
        <li id="message-4" aria-hidden="true"> 
         <a></a> 
        </li> 
        <li id="message-5" aria-hidden="true"> 
         <a></a> 
        </li> 
        <li id="message-6" aria-hidden="true"> 
         <a></a> 
        </li> 
       </ol> 
      </div> 

      <form action="" method="" name="frmName" id="formId" > 

       <label for="text1" >abc:<span >*</span></label> 
       <div > 
       <input type="text" name="text1" id="text1" maxlength="25" value="" placeholder="required" data-name="required" /> 
       </div> 
       <label for="text2" >abc:<span >*</span></label> 
       <div > 
       <input type="text2" name="text2" id="text2" maxlength="25" value="" placeholder="required" data-name="required" /> 
       </div> 
        <label for="text3" >abc:<span >*</span></label> 
       <div > 
       <input type="text" name="text3" id="text3" maxlength="25" value="" placeholder="required" data-name="required" /> 
       </div> 
        <label for="text4" >abc:<span >*</span></label> 
       <div > 
       <input type="text" name="text4" id="text4" maxlength="25" value="" placeholder="required" data-name="required" /> 
       </div> 
        <label for="text5" >abc:<span >*</span></label> 
       <div > 
       <input type="text" name="text5" id="text5" maxlength="25" value="" placeholder="required" data-name="required" /> 
       </div> 

       <div class="class1"> 
       <div class="class2" > 
        <label for="select1" tabIndex="-1" >select text1<span >*</span></label> 
        <select name="select1" id="select1" tabIndex="-1" >    
         <option>option1</option> 
        <option>option2</option> 
        </select> 
       </div> 
       <div class="class3" tabIndex="-1"> 
        <label for="select2" tabIndex="-1">sellllllll 
        <select name="select2" id="select2" tabIndex="-1"> 
        <option>option1</option> 
        <option>option2</option> 
        </select> 
       </div> 
       </div> 

       <div id="div1" > 
       <div class="div2" tabIndex="-1"> <p>dfjdsfldksfjlsdkfjsdklfjsdkfjsdkfjsjkdf jkdflkdsfj jfkldsjf jkfdjslkf ksdljflafj lskadf;afjsl;kf dlkfj safsdfj</p> 
       </div> 
       </div> 

       <div class="class1" > 
       <div role="checkbox" > 
        <input type="checkbox" role="checkbox" id="checkbox1" name="checkbox1" value="on" aria-hidden="false" /> 
        <label for="checkbox1" tabIndex="-1" aria-hidden="false">dfjsfhkjsfh jdshfjksaklfh hsdfksdf hfjsdfhsjkaf lhhflsdjfldsk</label> 
       </div> 
       <div role="checkbox" > 
        <input type="checkbox" role="checkbox" id="checkbox2" name="checkbox2" value="on" class="check-input " aria-hidden="false" /> 
        <label for="checkbox2" class="check-label" tabIndex="-1" aria-hidden="false"> 
       sdfjsfkls fksjf;jsaf; fjsa;fjfjjf jdsfksdjfsdlkfjlskafjlk 
        </label> 
       </div> 
       <br/> 
       </div> 

초점 상자와 확인란을 선택 움직이지 않는 HTML의 마크 업입니다. 초점은 선택 상자 위의 레이블로 이동하지만 선택 상자로 이동하지 않습니다. 선택 상자가 보이는 영역에 오면 선택 상자가 양식의 첫 번째 요소 인 경우 작동합니다. 선택 상자가 스크롤 막대의 일부이고 첫 페이지에 나타나지 않으면이 문제 만 발생합니다.

iOS 8.1.1 장치에서 음성 해설을 사용하고 있습니다.

Answer 1

이 문제는 확인란이나 선택 상자에만 국한되지 않습니다. 여기에는 텍스트 필드 나 실행 가능한 요소가 있습니다. 체크 박스에 tabindex = "0"을 지정하는 체크 박스에 대한 픽스가 발견되었습니다. 컨테이너이 문제를 해결합니다. 수평 탭 구조를 사용하면 다른 요소에 대해서는 제대로 작동하지 않는 것 같습니다.