Tầm quan trọng của thứ tự DOM mặc định
Làm việc với các phần tử gốc là một cách tuyệt vời để tìm hiểu về hành vi của tiêu điểm vì chúng được tự động chèn vào thứ tự thẻ dựa trên vị trí của chúng trong DOM.
Ví dụ: bạn có thể có 3 phần tử nút lần lượt trong DOM. Thao tác nhấn Tab sẽ đặt tiêu điểm vào từng nút theo thứ tự. Hãy thử nhấp vào khối mã bên dưới để di chuyển điểm bắt đầu điều hướng tiêu điểm, sau đó nhấn Tab để di chuyển tiêu điểm qua các nút.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Tuy nhiên, điều quan trọng cần lưu ý là khi sử dụng CSS, có thể các mục
tồn tại theo một thứ tự trong DOM nhưng xuất hiện theo một thứ tự khác trên màn hình. Ví dụ: nếu bạn sử dụng thuộc tính CSS như float để di chuyển một nút sang phải, thì các nút đó sẽ xuất hiện theo thứ tự khác trên màn hình. Nhưng, vì thứ tự của chúng trong DOM vẫn không đổi, nên thứ tự thẻ của chúng cũng thay đổi. Khi người dùng mở thẻ trong trang, các nút sẽ lấy tiêu điểm theo thứ tự không trực quan. Hãy thử nhấp vào khối mã bên dưới để di chuyển điểm bắt đầu điều hướng lấy tiêu điểm, sau đó nhấn Tab để di chuyển tiêu điểm qua các nút.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Hãy cẩn thận khi thay đổi vị trí trực quan của các phần tử trên màn hình bằng CSS. Điều này có thể khiến thứ tự thẻ nhảy xung quanh, khiến những người dùng dựa vào bàn phím có vẻ ngẫu nhiên và nhầm lẫn. Vì lý do này, danh sách kiểm tra Mục tiêu trên web trên web nêu rõ trong phần 1.3.2 rằng thứ tự đọc và điều hướng (được xác định theo thứ tự mã) phải hợp lý và trực quan.
Theo quy tắc, hãy thử duyệt lại các trang của bạn thường xuyên để đảm bảo bạn đã không vô tình làm xáo trộn thứ tự tab. Đây là một thói quen tốt để áp dụng và không cần nhiều nỗ lực.
Nội dung ngoài màn hình
Nếu bạn có nội dung hiện chưa hiển thị nhưng vẫn cần nằm trong DOM, chẳng hạn như điều hướng bên thích ứng thì sao? Khi bạn có các phần tử như thế này nhận được tiêu điểm khi chúng ra khỏi màn hình, có vẻ như tiêu điểm biến mất và xuất hiện lại khi người dùng di chuyển qua trang – rõ ràng đó là một hiệu ứng không mong muốn. Tốt nhất là chúng ta nên ngăn bảng điều khiển lấy tiêu điểm khi tắt màn hình và chỉ cho phép bảng điều khiển lấy tiêu điểm khi người dùng có thể tương tác với bảng điều khiển đó.
Đôi khi, bạn cần điều tra một chút để tìm ra sự cố mất đi tiêu điểm ở đâu. Bạn có thể sử dụng document.activeElement trên bảng điều khiển để tìm ra phần tử nào đang được lấy tiêu điểm.
Sau khi biết phần tử ngoài màn hình nào đang được lấy làm tâm điểm, bạn có thể đặt phần tử đó thành display: none hoặc visibility: hidden, sau đó đặt lại thành display:
block hoặc visibility: visible trước khi hiển thị phần tử này với người dùng.
Nhìn chung, nhà phát triển nên sử dụng thẻ trên các trang web của họ trước mỗi lần xuất bản để đảm bảo thứ tự thẻ không biến mất hoặc nhảy ra khỏi một trình tự hợp lý. Nếu có, bạn nên đảm bảo mình đang ẩn nội dung ngoài màn hình một cách thích hợp bằng display: none hoặc visibility: hidden, hoặc sắp xếp lại vị trí thực của các phần tử trong DOM để chúng được sắp xếp theo thứ tự logic.