Thứ tự nội dung trong tài liệu của bạn rất quan trọng đối với khả năng truy cập vào trang web của bạn. Trình đọc màn hình sẽ đọc to nội dung dựa trên thứ tự tài liệu, sử dụng các phần tử HTML mà bạn đã chọn để cung cấp ý nghĩa cho nội dung đó. Một người điều hướng trên trang web bằng bàn phím, thay vì màn hình cảm ứng hoặc chuột, sẽ nhấn phím tab xung quanh tài liệu. Điều này có nghĩa là các phần tử sẽ chuyển từ phần tử đang hoạt động sang phần tử đang hoạt động, chuyển đổi giữa các đường liên kết và trường biểu mẫu một lần nữa theo thứ tự tồn tại trong tài liệu.
Vì vậy, việc bắt đầu bằng một tài liệu có cấu trúc hợp lý và sử dụng tất cả các phần tử HTML phù hợp là một phần quan trọng trong việc tạo một trang web dễ tiếp cận. Tuy nhiên, bạn có thể huỷ một số việc tốt đó khi bắt đầu sử dụng CSS. Hãy cùng xem lý do.
Thứ tự nguồn so với thứ tự hình ảnh
Điều hướng trang web thường được đánh dấu dưới dạng danh sách các liên kết. Sau đó, bạn có thể sử dụng Flexbox để chuyển các hình ảnh này thành một thanh ngang. Trong ví dụ về sự cố nhỏ bên dưới, tôi đã tạo mẫu thường dùng này. Nhấp vào ví dụ đó rồi nhấn phím tab giữa các đường liên kết. Tiêu điểm sẽ di chuyển theo hướng logic từ trái sang phải, thứ tự mà chúng ta đọc bằng tiếng Anh.
Nếu bạn đã tạo loại mẫu này và sau đó được yêu cầu chuyển Liên hệ với chúng tôi, là mẫu thứ hai trong nguồn, lên cuối. Bạn có thể sử dụng thuộc tính order hoạt động trong Flexbox.
Hãy thử di chuyển qua các mục trong ví dụ dưới đây. Phần này sử dụng thuộc tính order để sắp xếp lại các mục trong ví dụ.
Tiêu điểm sẽ chuyển đến mục cuối cùng rồi quay lại. Theo thứ tự thẻ, mặt hàng đó là mặt hàng thứ hai. Tuy nhiên, về mặt nhìn thì đó là mục cuối cùng.
Ví dụ trên nêu bật vấn đề mà chúng tôi gặp phải nếu chúng tôi sắp xếp lại và sắp xếp lại nội dung bằng CSS. Nếu đang xử lý vấn đề này, thì bạn nên thay đổi thứ tự trong nguồn thay vì sử dụng CSS.
Tài sản CSS nào có thể gây ra tình trạng sắp xếp lại thứ tự?
Mọi phương thức bố cục cho phép bạn di chuyển các phần tử đều có thể gây ra sự cố này. Các thuộc tính CSS sau thường gây ra sự cố sắp xếp lại nội dung:
- Sử dụng
position: absolutevà đưa một mục ra khỏi luồng một cách trực quan. - Thuộc tính
ordertrong bố cục Flexbox và Lưới. - Các giá trị
row-reversevàcolumn-reversechoflex-directiontrong Flexbox. - Giá trị
densechogrid-auto-flowtrong Bố cục lưới. - Bất kỳ vị trí nào theo số hoặc tên dòng, hoặc có
grid-template-areastrong Bố cục lưới.
Trong ví dụ tiếp theo này, tôi đã tạo một bố cục bằng Lưới CSS và định vị các mục bằng số dòng mà không xem xét vị trí của các mục đó trong nguồn.
Hãy thử xem ví dụ này và xem tiêu điểm sẽ chuyển động như thế nào. Điều này khiến người dùng có trải nghiệm rất khó hiểu, đặc biệt nếu đây là một trang dài.
Kiểm thử vấn đề
Một cách kiểm tra rất đơn giản là điều hướng bằng bàn phím trong trang của bạn. Bạn có thể làm được mọi thứ không? Có bước nhảy nào lạ khi bạn làm như vậy không?
Để xem hình ảnh minh hoạ việc sắp xếp lại nội dung, hãy thử trình kiểm tra Điểm dừng thẻ trong tiện ích Accessibility Insights cho Chrome. Hình ảnh dưới đây cho thấy ví dụ về Lưới CSS trong công cụ đó. Bạn có thể thấy cách tiêu điểm phải dịch chuyển xung quanh bố cục.
Sắp xếp lại nội dung và thiết kế web đáp ứng
Nếu bạn chỉ có một bản trình bày nội dung thì việc sắp xếp nguồn theo thứ tự hợp lý và việc phản ánh bố cục đó thường không khó. Việc này có thể trở nên khó khăn hơn khi bạn xem xét bố cục tại các điểm ngắt khác nhau. Ví dụ: bạn nên chuyển một phần tử xuống cuối bố cục trên các màn hình nhỏ hơn.
Hiện tại không có giải pháp tốt cho vấn đề này. Trong hầu hết các trường hợp phát triển tính năng "ưu tiên dành cho thiết bị di động", sẽ giúp bạn giữ nguyên nguồn và bố cục của mình. Những lựa chọn bạn đưa ra về mức độ ưu tiên trên thiết bị di động thường là những lựa chọn vững chắc cho nội dung nói chung. Điều quan trọng là phải nhận thức được khi có khả năng loại nội dung sắp xếp lại này, đồng thời kiểm thử để đảm bảo trải nghiệm kết thúc không quá gây khó chịu ở từng điểm ngắt.