辅助功能：画外音不会将焦点移动到选择元素答案

【问题标题】：Accessibility: Voicerover does not move focus to select element辅助功能：画外音不会将焦点移动到选择元素
【发布时间】：2015-01-16 10:33:07
【问题描述】：

以下是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>

焦点不会移动到选择框和复选框。焦点转到选择框上方的标签，但没有转到选择框。如果选择框出现在可见区域，即如果选择框是表单的第一个元素，那么它可以正常工作。但是如果选择框是滚动条的一部分并且没有出现在第一页上，那么只会出现这个问题。

我在 ios 8.1.1 设备中使用语音。

【问题讨论】：

标签： html focus accessibility html-select voiceover

【解决方案1】：

此问题不仅限于复选框或选择框。这也适用于文本字段或任何可操作的元素。我找到了一个修复复选框，只需在复选框 container 上指定 tabindex="0" 即可解决问题。如果我们有水平标签结构，这似乎不适用于其他元素。

【讨论】：