Accessibility: Voicerover does not move focus to select element

问题

Following is markup of html

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

Focus does not move to select box and checkboxes. Focus goes to label above select boxes but it does not go to select box. If select box comes in visible area ie if select box is first element of form then it works fine. but if select box is part of scrollbar and does not appear on first page then only this issue happens.

I am using voice over in ios 8.1.1 device.

回答1:

This issue is not limited only to checkboxes or selectboxes. This is there for text field or any actionable element as well. I found a fix for checkbox that just specifying tabindex="0" on checkbox container solves the issue. This doesn't seems to work fine on other elements specifically if we have horizontal tab structure.

来源：https://stackoverflow.com/questions/27981995/accessibility-voicerover-does-not-move-focus-to-select-element