HTML 문서 안에서 , , , </span> 등의 태그는 키보드나 마우스 입력을 통해 focus를 가지며, 키보드의 tab 키를 눌러 다음 항목으로, shift + tab 을 눌러 이전 항목으로 focus를 이동할 수 있다.</p> <p>항목(태그)에 <span class="lang:default decode:true crayon-inline">tabindex</span> 속성이 주어지지 않았을 경우, 일반적으로, HTML에 코딩된 순서대로 위에서 아래로, 왼쪽에서 오른쪽으로 focus가 이동을 한다.</p> <div id="attachment_293" style="width: 468px" class="wp-caption aligncenter"><a href="http://www.cena.co.kr/wp-content/uploads/2017/10/normal_tab_order.png"><img fetchpriority="high" decoding="async" aria-describedby="caption-attachment-293" class="wp-image-293 size-full" src="http://www.cena.co.kr/wp-content/uploads/2017/10/normal_tab_order.png" alt="" width="458" height="197" srcset="https://cena.co.kr/wp-content/uploads/2017/10/normal_tab_order.png 458w, https://cena.co.kr/wp-content/uploads/2017/10/normal_tab_order-300x129.png 300w, https://cena.co.kr/wp-content/uploads/2017/10/normal_tab_order-100x43.png 100w, https://cena.co.kr/wp-content/uploads/2017/10/normal_tab_order-150x65.png 150w, https://cena.co.kr/wp-content/uploads/2017/10/normal_tab_order-200x86.png 200w, https://cena.co.kr/wp-content/uploads/2017/10/normal_tab_order-450x194.png 450w" sizes="(max-width: 458px) 100vw, 458px" /></a><p id="caption-attachment-293" class="wp-caption-text">정상적인 탭 순서</p></div> <p>위와 같은 화면에서는 왼쪽에서 오른쪽으로 tab 이 이동하는데, 위에서 아래로 먼저 이동하도록 설정하고 싶을 수 있을 것이다. 그럴 때는 <span class="lang:default decode:true crayon-inline">tabindex=”1″</span> 과 같이 각 태그에 부여하면 이 값의 순서에 따라 focus 순서가 재배치 된다.</p> <div id="attachment_294" style="width: 468px" class="wp-caption aligncenter"><a href="http://www.cena.co.kr/wp-content/uploads/2017/10/customized_tab_order.png"><img decoding="async" aria-describedby="caption-attachment-294" class="wp-image-294 size-full" src="http://www.cena.co.kr/wp-content/uploads/2017/10/customized_tab_order.png" alt="" width="458" height="197" srcset="https://cena.co.kr/wp-content/uploads/2017/10/customized_tab_order.png 458w, https://cena.co.kr/wp-content/uploads/2017/10/customized_tab_order-300x129.png 300w, https://cena.co.kr/wp-content/uploads/2017/10/customized_tab_order-100x43.png 100w, https://cena.co.kr/wp-content/uploads/2017/10/customized_tab_order-150x65.png 150w, https://cena.co.kr/wp-content/uploads/2017/10/customized_tab_order-200x86.png 200w, https://cena.co.kr/wp-content/uploads/2017/10/customized_tab_order-450x194.png 450w" sizes="(max-width: 458px) 100vw, 458px" /></a><p id="caption-attachment-294" class="wp-caption-text">변경하고자 하는 탭 순서</p></div> <p>하지만, 문서 전체에 아주 많은 항목들이 있고, 그 중 일부의 항목에 대해서만 tab index 를 변경하려면, 그 문서 내에 모든 항목에 전부 <span class="lang:default decode:true crayon-inline ">tabindex</span> 속성을 지정해야한다. 이는 너무 비효율적이다.</p> <p>변경하지 않을 항목에 <span class="lang:default decode:true crayon-inline">tabindex</span> 속성을 생략하면, 생략된 항목들은 <span class="lang:default decode:true crayon-inline">tabindex</span> 속성이 있는 항목들보다 나중 순서에 focus를 갖게 된다. 즉, <span class="lang:default decode:true crayon-inline">tabindex</span> 가 부여된 항목을 모두 지난 후, <span class="lang:default decode:true crayon-inline">tabindex</span> 가 없는 항목을 다시 지나가게 된다. 이것은 의도하지 않은 결과이다.</p> <p>현재로서는 Javascript의 도움을 받지 않고 HTML 내에서 일부의 항목만 변경된 index를 갖는 방법은 없는 듯 하다.</p> <p><a href="https://stackoverflow.com/questions/18543570/how-to-create-tabindex-groups" target="_blank" rel="noopener">How to create tabindex groups?</a></p> <p>이 문서의 솔루션을 참고하여 새로 코드를 작성하였다. 일단 <span class="lang:default decode:true crayon-inline ">jquery</span> 와 <span class="lang:default decode:true crayon-inline">underscore</span> 라이브러리가 필요하다.</p> <pre class="lang:xhtml decode:true"><input type="text" data-tabgroup="section1" data-tabgroupindex="2" /></pre> <p><span class="lang:default decode:true crayon-inline">data-tabgroup</span> 속성으로 변경된 tab 순서를 가질 항목들을 제한하고, <span class="lang:default decode:true crayon-inline">data-tabgroupindex</span> 속성으로 순서를 재정의한다. 이 값을 가지는 항목(태그)들은 위 아래 <span class="lang:default decode:true crayon-inline">tabindex</span> 속성을 가지지 않은 다른 태그들과 잘 어울려 의도한 대로 tab 순서를 갖게 된다.</p> <p>윈 소스와 다른 점은,</p> <ul> <li>tab index가 같은 <span class="lang:default decode:true crayon-inline">tabgroup</span> 항목들 안에서만 이동하지 않고, 위 아래의 (tab index 가 지정되지 않은) 다른 항목들로 자연스럽게 이동.</li> <li><span class="lang:default decode:true crayon-inline">tabgroup</span> 에 처음 진입할 때, 해당 항목의 index 가 첫번째가 아니어도 지정된 index 로 이동. <ul> <li><span style="color: #ff6600;">마우스로 focus 를 얻을 때는 동작하지 않도록 (키보드로만 동작하도록) 개선 필요.</span></li> </ul> </li> <li>문서 내에 <span class="lang:default decode:true crayon-inline"><br /> <form></span> 이 여러 개 존재하더라도 관계없이 동작.</li> </ul> <p>Source Code:</p> <pre class="minimize:true lang:xhtml decode:true"><!doctype html> <html lang="en"> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script> <style> label { width: 80px; display: inline-block; } div.label { width: 80px; float: left; } input { width: 80px; } textarea { width: 80px; } div.row { margin: 5px; clear: both; } </style> </head> <body> <form> <h3>Section 1</h3> <div> <div class="row"> <label for="field11">Field 11</label> <input type="text" id="field11" name="field11" /> </div> <div class="row"> <label for="field12">Field 12</label> <input type="text" id="field12" name="field12" data-tabgroup="section1" data-tabgroupindex="3" placeholder="tabindex: 3" /> </div> <div class="row"> <label for="field13">Field 13</label> <a href="#" id="field13" data-tabgroup="section1" data-tabgroupindex="5" >Link13 (tabindex: 5)</a> </div> <div class="row"> <label for="field14">Field 14</label> <input type="text" id="field14" name="field14" data-tabgroup="section1" data-tabgroupindex="2" placeholder="tabindex: 2" /> </div> <div class="row"> <label for="field15">Field 15</label> <input type="text" id="field15" name="field15" data-tabgroup="section1" data-tabgroupindex="4" placeholder="tabindex: 4" /> </div> </div> </form> <form> <h3>Section 2</h3> <div> <div class="row"> <label for="field1">Field 21</label> <input type="text" id="field21" name="field21" /> </div> <div class="row"> <label for="field2">Field 22</label> <input type="text" id="field22" name="field22" /> </div> <div class="row"> <div class="label"> </div> <div class="label">Field 23</div> <div class="label">Field 24</div> <div class="label">Field 25</div> </div> <div class="row"> <label>Min</label> <input type="text" size="5" data-tabgroup="section2" data-tabgroupindex="1" placeholder="tabindex: 1" /> <input type="text" size="5" data-tabgroup="section2" data-tabgroupindex="3" placeholder="tabindex: 3" /> <input type="text" size="5" data-tabgroup="section2" data-tabgroupindex="5" placeholder="tabindex: 5" /> </div> <div class="row"> <label>Max</label> <input type="text" size="5" data-tabgroup="section2" data-tabgroupindex="2" placeholder="tabindex: 2" /> <input type="text" size="5" data-tabgroup="section2" data-tabgroupindex="4" placeholder="tabindex: 4" /> <input type="text" size="5" data-tabgroup="section2" data-tabgroupindex="6" placeholder="tabindex: 6" /> </div> </div> </form> <form> <h3 class="header">Section 3</h3> <div> <div class="row"> <label for="field31">Field31</label> <input type="text" id="field31" name="field31" data-tabgroup="section3" data-tabgroupindex="1" placeholder="tabindex: 1" /> </div> <div class="row"> <label for="field32">Field32</label> <textarea rows="3" id="field32" name="field32" data-tabgroup="section3" data-tabgroupindex="3" placeholder="tabindex: 3">