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 lấy tiêu điểm vì các phần tử này được tự động chèn vào thứ tự thẻ dựa trên vị trí của các phần tử đó trong DOM.
Ví dụ: bạn có thể có 3 thành phần nút, lần lượt từng thành phần 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 tâm đ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, bạn có thể có các thứ
tồn tại theo một thứ tự trong DOM nhưng lại 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,
các nút sẽ xuất hiện theo thứ tự khác trên màn hình. Tuy nhiên, vì thứ tự của các thẻ này trong DOM vẫn giữ nguyên, nên thứ tự thẻ của các thẻ cũng vậy. Khi người dùng truy cập vào thẻ trên 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 tâm đ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>
Cẩn thận khi thay đổi vị trí hình ảnh 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ẻ thay đổi, khiến người dùng sử dụng bàn phím bối rối và có vẻ ngẫu nhiên. Vì lý do này, danh sách kiểm tra trên Web Album nêu rõ trong mục 1.3.2 rằng thứ tự đọc và điều hướng, như được xác định theo thứ tự mã, phải hợp lý và trực quan.
Theo quy tắc, hãy thỉnh thoảng duyệt qua các trang của bạn để đảm bảo bạn không vô tình làm sai thứ tự thẻ. Đây là một thói quen tốt để áp dụng và không cần nhiều công sức.
Nội dung ngoài màn hình
Điều gì sẽ xảy ra nếu bạn có nội dung hiện chưa hiển thị, nhưng vẫn cần phải nằm trong DOM, chẳng hạn như một điều hướng bên thích ứng? Khi bạn có các phần tử như thế này nhận được tiêu điểm khi chúng nằm ngoài màn hình, có vẻ như tiêu điểm đang biến mất và xuất hiện lại khi người dùng truy cập vào thẻ trên 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 nằm ngoài màn hình và chỉ cho phép bảng điều khiển được lấy tiêu điểm khi người dùng có thể tương tác.
Đôi khi, bạn cần phải làm điều tra để tìm ra nơi tiêu điểm không còn. Bạn có thể sử dụng document.activeElement trên bảng điều khiển để xác định phần tử nào hiện đang được lấy làm tâm điểm.
Sau khi biết thành phần nào ngoài màn hình đang được lấy tiêu điểm, bạn có thể đặt thành phần đó 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 cho người dùng.
Nói chung, nhà phát triển nên truy cập vào thẻ thông qua các trang web của mình trước mỗi lần phát hành để đảm bảo rằng thứ tự thẻ không biến mất hoặc nhảy ra khỏi trình tự logic. Nếu có, bạn nên đảm bảo rằng bạn đ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 bạn sắp xếp lại vị trí thực của các thành phần trong DOM sao cho chúng theo thứ tự logic.