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 hay để tìm hiểu về hành vi của 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 chúng trong DOM.
Ví dụ: bạn có thể có 3 phần tử nút, lần lượt xuất hiện trong DOM. Khi bạn nhấn phím Tab, tiêu điểm sẽ di chuyển đến 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, bạn có thể có 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 một thuộc tính CSS như float để di chuyển một nút sang bên phải, thì 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 phần tử trong DOM không thay đổi, nên thứ tự thẻ của chúng cũng không thay đổi. Khi người dùng chuyển qua các thẻ trên trang, các nút sẽ được 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 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í hiển thị 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ẻ bị nhảy, dường như ngẫu nhiên, gây nhầm lẫn cho người dùng dựa vào bàn phím. Vì lý do này, danh sách kiểm tra Web AIM nêu rõ trong mục 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ử nhấn phím Tab để di chuyển qua các trang của bạn thường xuyên để đảm bảo bạn không vô tình làm rối thứ tự nhấn phím Tab. Đây là một thói quen tốt nên áp dụng và 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 không hiển thị nhưng vẫn cần có trong DOM, chẳng hạn như thanh điều hướng bên thích ứng thì sao? Khi bạn có các phần tử như thế này, tức là các phần tử nhận tiêu điểm khi nằm ngoài màn hình, thì có vẻ như tiêu điểm sẽ biến mất và xuất hiện lại khi người dùng nhấn phím Tab để di chuyển qua trang. Đây 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 bảng điều khiển nằm ngoài màn hình và chỉ cho phép 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 phải thực hiện một số thao tác dò tìm để tìm ra vị trí của tiêu điểm. Bạn có thể sử dụng document.activeElement trong bảng điều khiển để tìm ra phần tử nào 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 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ị cho người dùng.
Nhìn chung, chúng tôi khuyến khích nhà phát triển duyệt qua các trang web của họ bằng phím Tab trước mỗi lần xuất bản để đảm bảo thứ tự nhấn phím Tab không biến mất hoặc nhảy ra khỏi trình tự hợp lý. 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 phần tử trong DOM để chúng theo thứ tự hợp lý.