Всем привет! В данной небольшой статье будет рассмотрен атрибут tabindex который через клавишу tab позволяет выбирать ссылку и осуществлять по ней переход. Итак, поехали!

Допустим у нас есть две ссылки с атрибутом tabindex.

<a href="https://webfanat.com" target="_blank" tabindex="0"></a>

<a href="img/people.jpg" target="_blank" tabindex="0">
    <img src="img/people.jpg" >
</a>

Первая ссылка ведет на главную страницу моего блога, а вторая на картинку people.jpg.

У ссылок используется атрибут tabindex с одинаковым значением 0. Отмечу что данный атрибут можем принимать любое целочисленное значение больше или равное нулю. C отрицательными значениями данный атрибут работать не будет.

С помощью данного кода, нажимая клавишу tab мы можем выбирать ссылки в порядке возрастания и shift + tab в порядке убывания. То есть когда вы нажмете клавишу tab у вас в левом нижнем угле отобразиться первая ссылка с атрибутом tabindex(https://webfanat.com), если вы повторно нажмете tab отобразится вторая по порядку ссылка (img/people.jpg). И для того чтобы осуществить переход по выбранной ссылке достаточно будет нажать клавишу Enter.

Вот так в принципе это все работает. Скажу еще что с помощью значений атрибута tabindex вы можете задавать порядок переходов по ссылке. Пример:

<a href="https://webfanat.com" target="_blank" tabindex="2"></a>

<a href="img/people.jpg" target="_blank" tabindex="1">
    <img src="img/people.jpg" >
</a>

Если посмотреть данный код, то он работает не как мы ожидали. Первая ссылка которая выберется при нажатии клавиши tab все равно будет https://webfanat.com. Однако теперь чтобы перейти к ссылке img/people.jpg нам потребуется сделать шаг назад(shidt+tab) , потому что она имеет более приоритетный порядковый номер 1.

На этом данная статья подошла к концу. Если остались вопросы пишите их в комментариях или группе

А я с вами прощаюсь. Желаю вам успехов и удачи! Пока.