Tầm quan trọng của thứ tự DOM mặc định
Làm việc với các thành phần gốc là một cách hay để tìm hiểu về hành vi của tiêu điểm do chúng được tự động chèn vào thứ tự tab dựa trên trong DOM.
Ví dụ: bạn có thể có 3 thành phần 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 thao tác lấy tiêu điểm, sau đó nhấn Tab để di chuyển tiêu điểm
thông 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ó
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. Cho
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 xuất hiện theo thứ tự khác nhau trên màn hình. Tuy nhiên, vì thứ tự của chúng theo
DOM vẫn giữ nguyên, thứ tự thẻ của chúng cũng vậy. Khi người dùng chuyển thẻ qua
các nút 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 di chuyển 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, trông có vẻ ngẫu nhiên và khó hiểu những người dùng dựa vào bàn phím. Vì lý do này, danh sách kiểm tra Mục tiêu trên web của Web 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 là logic và trực quan.
Theo quy tắc, hãy thử đóng thẻ qua các trang của bạn thường xuyên chỉ để đảm bảo bạn không vô tình làm xáo trộn thứ tự tab. Đó là một thói quen tốt nên áp dụng và một phương thức không tốn nhiều công sứ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 được hiển thị thì sao? trong DOM, chẳng hạn như đ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 họ ra khỏi màn hình, có vẻ như đó là tiêu điểm biến mất và xuất hiện lại khi người dùng mở thẻ qua trang — rõ ràng tác độ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 thiết bị không xuất hiện trên màn hình và chỉ cho phép màn hình làm tâm điểm khi người dùng có thể tương tác với nó.
Đôi khi, bạn cần điều tra một chút để tìm ra nơi lấy tiêu điểm
đã biến mất. Bạn có thể sử dụng document.activeElement trong bảng điều khiển để tìm ra
phần tử hiện đ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 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 thị cho người dùng.
Nói chung, chúng tôi khuyến khích nhà phát triển mở thẻ qua trang web của họ trước mỗi
xuất bản để đảm bảo thứ tự thẻ không biến mất hoặc nhảy ra khỏi thứ tự hợp lý
trình tự. Nếu có, bạn nên đảm bảo mình đang ẩn một cách thích hợp
nội dung ngoài màn hình bằng display: none hoặc visibility: hidden hoặc do bạn
sắp xếp lại các phần tử các vị trí thực tế trong DOM để chúng được sắp xếp hợp lý
đơn đặt hàng.