Question

以下是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设备中使用语音。

Answer 1

此问题不仅限于复选框或选择框。这适用于文本字段或任何可操作元素。我找到了一个复选框，只是指定了tabindex =＆＃34; 0＆＃34;在复选框容器上解决问题。如果我们有水平标签结构，这对其他元素似乎没有用。

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

1 个答案: