동적인 tabindex 구하기?

[eouia]

접근성을 고려한 코딩(마우스 없이도 작동하기)를 하다보니 한가지 걸리는 게 있네요.

Code: Select all

<ul id="mainmenu">
<li><a id="m_1">링크 A</a></li>
<li><a id="m_2">링크 B</a></li>
<li><a id="m_3">링크 C</a></li>
<li><a id="m_4">링크 D</a></li>
</ul>

이런 코드에서,

Code: Select all

<ul id="mainmenu">
<li><a id="m_1">링크 A</a></li>
<li><a id="m_2">링크 B</a></li>
<li><a id="m_3">링크 C</a></li>
<li><a id="m_4">링크 D</a></li>
</ul>
<ul id="submenu">
<li><a id="m_3_1">링크 Ca</a></div>
<li><a id="m_3_2">링크 Cb</a></div>
<li><a id="m_3_3">링크 Cc</a></div>
</ul>

이런 코드로 조건에 따라 동적으로 변경됩니다.
문제는 탭의 순서가 A->B->C->(C에 포커싱이 갔으므로 submenu가 활성화된 후)Ca->Cb->Cc->D(D에 포커싱이 왔으므로 submenu는 비활성화) 순서로 되어야 합니다. 그러자면 CaCbCc를 C와 D사이에 넣으면 되지 않겠냐고 하겠지만 조금 특이한 메뉴구조라서 CaCbCc가 화면에 출력되는 곳이 구조적으로 C/D사이에 넣을 수 없는 상태입니다. ABCD는 가로형 메인메뉴로 탑에, CaCbCc는 세로형 서브메뉴로 왼쪽에 붙는다고 생각하시면 됩니다. 마우스오버나 온포커스시 서브메뉴가 연동되어 바뀌는데, 바뀌는게 중요한게 아니라, 바뀌고도 마우스없이 tab으로 서브메뉴 접근이 가능하게 만들려고 하는데요...

우선 mainmenu와 submenu자체가 동적으로 구성요소가 바뀝니다. 그래서 HTML에서 강제적으로 tabindex값을 줄 수가 없습니다. 순서라든가 갯수가 매번 바뀌기 때문이죠.
일단 생각한 것은, 코드상에 tabindex가 명시되어 있지 않더라도, 렌더링되고 난 후에는 각 요소별로 가상 tabindex가 붙을 거라고 짐작되는데요. 그 값을 가져올 수 있는 방법이 없을까요?
즉,
1) C에 포커싱이 오면 C의 가상tabindex값을 받아온다. (예:123);
2) submenu를 활성화 시키고 Ca,Cb,Cc에 각각 124, 125, 126을 부여한다.
이런 방식으로 구현하려고 하는데 과연 이렇게 하는게 맞을까요?

[eouia]

submenu의 position을 absolute로 놓으면 탭 걱정안해도 되겠지만 아쉽게도, 디자인상 그럴 수 없는 상황입니다. T_T;

[eouia]

결국은...

Code: Select all

<ul id="mainmenu">
<li><a id="m_1">링크 A</a></li>
<li><a id="m_2">링크 B</a></li>
<li><a id="m_3">링크 C</a>
<ul id="submenu">
<li><a id="m_3_1">링크 Ca</a></div>
<li><a id="m_3_2">링크 Cb</a></div>
<li><a id="m_3_3">링크 Cc</a></div>
</ul> 
</li>
<li><a id="m_4">링크 D</a></li>
</ul>

형태로 만들고 submenu에 position:absolute;를 주는 걸로 했습니다. 대신 디자인은 좀 변경하구요. T_T

[hiphapis]

잘 해결되셧다니, 다행이네요

(답변을 기대하셧다면, 죄송합니다;; )