Как сделать элементы списка «табличными» (используйте клавишу Tab, чтобы: сфокусироваться на них) ⇐ Html

[Anonymous]

Как сделать элементы списка доступными для вкладок? (что означает: использование клавиши TAB для :фокусировки на них). Мне нужно это знать для обеспечения доступности для людей с ограниченными возможностями.

Я добавил 2 текстовых поля, чтобы указать точку отсчета для TAB; если вы перейдете из текстового поля, он перейдет к следующему, а затем пропустит все элементы списка.

HTML:

Код: Выделить всё

[list]
[*]
[*]
[*]
[*]
[/list]

CSS:

Код: Выделить всё

li {
display: block;
height: 100px;
margin: 0 auto;
width: 95%;
}
a:active, a:focus,
li:active, li:focus {border: 5px solid orange}

li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}

jsFiddle: https://jsfiddle.net/h815zLnp/

Подробнее здесь: https://stackoverflow.com/questions/378 ... us-on-them