Chỉ rõ các mục có thể truy cập được bằng thuộc tính tabindex

Trước khi đọc tiếp, các bạn nếu đang truy cập trang này bằng máy tính có sử dụng bàn phím, các bạn thử nhấp chuột vào nội dung bài sau đó nhấn lần lượt phím tab hoặc kết hợp hai phím shift và tab, các bạn có thể nhận thấy một đường viền màu xanh bao quanh văn bản sau mỗi lần nhấn lần lượt điều hướng đến các mục tiếp theo.

Sự khác nhau giữa khi nhấn phím tab và shift tab là khi sử dụng phím tab các mục sẽ hiển thị lần lượt từ trên xuống dưới và từ trái qua phải. Điều này hoàn toàn ngược lại khi nhấn kết hợp hai phím shift tab lần lượt từ dưới lên trên và từ phải qua trái.

Các mục truy cập được bao quanh bằng đường viền màu xanh

Phím tab mặc định có sẵn trong các thẻ sau:

• <a> liên kết
• <button> mục nhấp
• <input> (với thuộc tính type loại nhập)
• <select> mục chọn
• <textarea> mục nhập

Tất cả các thẻ này gọi chung là các mục có thể truy cập vì nó tạo ra một hành động. Vậy còn những thẻ khác như thẻ div, span, label,v.v.., nếu muốn để người dùng nhận biết khi nhấn phím tab thì sao? đó chính là lý do tại sao thuộc tính tabindex được tạo ra để thêm vào những thẻ đó.

Giả sử mình có một thẻ div như sau:

<div>mục nhấp</div>

Giờ mình sẽ thêm thuộc tính tabindex cho nó

<div tabindex="0">mục nhấp</div>

Tại sao tabindex lại có giá trị bằng "0"? Đó là sự tập trung khi gán cho thuộc tính tabindex giá trị bằng "0" sẽ được điều hướng tiếp theo. Các yếu tố này được điều hướng theo thứ tự chúng xuất hiện trong luồng ký tự.

Làm thế nào để ngăn điều hướng đến một mục truy cập? Lúc này cần thêm thuộc tính tabindex với giá trị bằng "-1", ví dụ

<a tabindex="-1">liên kết</a>

Cách tạo style cho mục truy cập khi nhấn phím tab hoặc shift tab

Sử dụng css :focus với thuộc tính outline sẽ làm nổi bật văn bản, nút, mục chọn, mục nhập khi nhấn phím tab trên bàn phím và cũng do trên máy tính, một số máy tính bảng mới sử dụng bàn phím nên media width được sử dụng

@media(min-width:860px){

  a:focus,button:focus,select:focus,input[type="text"],input[type="button"],[tabindex="0"]:focus{outline: 1px solid #3740ff;}

  [ tabindex="-1"]:focus{outline:none}

}

Các bạn có thể xem thêm về css outline tại trang https://www.w3schools.com/css/css_outline.asp