Указване/замяна на tabindex на всички елементи с възможност за разделяне в DIV таг наведнъж

Да предположим, че имам това

<div id="div1">
 <span tabindex="0">Span0</span>
 <span tabindex="0">Span1</span>
 <span tabindex="0">Span2</span>
</div>
<div id="div2">
 <span tabindex="0">Span20</span>
 <span tabindex="0">Span21</span>
 <span tabindex="0">Span22</span>
</div>

Има ли начин да накарате всички обхвати в div2 да имат предимство пред обхватите в dev1 по отношение на реда на табулаторите, въпреки факта, че всичките им стойности на tabindex са зададени на 0? т.е. ако вляза с табулатор в страницата с включен екранен четец, той трябва да премине през интервалите в div2 първо при натискане на tab, преди да премине към div1

Забележка: моят действителен случай на употреба е много по-сложен от този... това е само за илюстрация

Забележка: Знам, че мога да променя стойностите на tabindex до различни от нула, но това не е това, което търся. Търся възможността да задам приоритет на всички елементи в div наведнъж, въпреки факта, че елементите са зададени като tabindex=0...

Забележка: Това трябва да важи и за всички елементи с възможност за разделяне като цяло, т.е. не само тези, които са маркирани като tabindex="0"

Има ли начин да го направя БЕЗ javascript? т.е. използвайки html, css или ARIA тагове: https://msdn.microsoft.com/en-us/library/ie/gg701982%28v=vs.85%29.aspx? Възможно ли е да го направите с основните роли: http://www.w3.org/WAI/PF/aria-practices/#focus_tabindex ‹-потърсете „Присвояване на забележителни роли на всеки регион“?

Ако е така, как да го направя


html css accessibility wai-aria tabindex
person pillarOfLight    schedule 23.03.2015    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Можете да използвате атрибута aria-flowto:

Целта на тази техника е да се определят алтернативни редове на четене за съдържанието чрез използване на свойството aria-flowto. Когато свойството aria-flowto на даден елемент има една стойност, помощните технологии могат да се откажат от нормалния ред на четене на документа и да отидат до елемента, чийто идентификатор е равен на тази стойност. Когато свойството aria-flowto има множество идентификатори, помощните технологии могат да представят целевите елементи на потребителя като алтернативи, идентифицирани чрез имената на целевите елементи, за следващото съдържание в реда на четене.

използване на aria-flowto

Проблемът с тази техника е, че в момента не се поддържа много широко от екранни четци, така че ще трябва да тествате вашите целеви за съвместимост.

Ето как ще изглежда маркирането

<h2 aria-flowto="div2">Header before messy content</h2>
<div id="div1" aria-flowto="after">
 <span tabindex="0">Span0</span>
 <span tabindex="0">Span1</span>
 <span tabindex="0">Span2</span>
</div>
<div id="div2" aria-flowto="div1">
 <span tabindex="0">Span20</span>
 <span tabindex="0">Span21</span>
 <span tabindex="0">Span22</span>
</div>
<h2 id="after">Header after messy content</h2>
person unobf    schedule 23.03.2015
comment
Много интересен подход! Но за съжаление това няма да повлияе на реда на разделите, освен ако браузърите естествено не разбират маркирането на ария... Мисля, че търсенето на op няма реално решение... и че засягането на реда на фокуса все още ще бъде нещо, което не е наистина приемливо за достъпност във всеки случай... - person Adam; 24.03.2015

arrow_upward
0
arrow_downward

Не, не можете да го направите, без да промените стойността на tabindex.

С Javascript/jQuery можете да го направите с

$("#div1 span").attr("tabindex", "1");

Също така, трябва да прочетете внимателно WCAG страницата относно реда на фокусиране: http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html

Използването на стойности на tabindex, различни от "-1" и "0", е нещо, което рядко е достъпно.

person Adam    schedule 23.03.2015
comment
Не използвайте tabindex › 0 - това ще доведе до всякакви проблеми с достъпността за потребители, които не използват екранен четец и клавиатура - person unobf; 23.03.2015