Vấn đề về đơn đặt hàng DOM

Tầm quan trọng của thứ tự DOM mặc định

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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ó.

Bảng điều khiển dạng trượt ngoài màn hình có thể lấy nét.

Đô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.

Một bảng điều khiển dạng trượt được đặt thành không hiển thị.
Một bảng điều khiển dạng trượt được đặt thành khối hiển thị.

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.