Về hướng dẫn WCAG 2.2 – Tiêu chí 1.3.4: Hướng màn hình (Level AA)
Mở đầu
Tiêu chí 1.3.4 “Hướng màn hình” trong WCAG 2.2 yêu cầu rằng nội dung không được giới hạn việc thao tác hoặc xem ở một hướng màn hình cụ thể (dọc hoặc ngang). Tuy nhiên, có ngoại lệ trong trường hợp hướng màn hình là yếu tố thiết yếu để chức năng hoạt động, ví dụ như trò chơi bắt buộc phải hiển thị ngang hoặc công cụ chỉnh sửa đồ họa yêu cầu chế độ ngang – thì sẽ không áp dụng tiêu chí này.
Trong bài viết này, chúng tôi sẽ giải thích chi tiết cách triển khai cụ thể bằng HTML, CSS và JavaScript dành cho người mới bắt đầu.
1. “Giới hạn liên quan đến hướng màn hình là gì?”
Nhiều trang web và ứng dụng được thiết kế cho một hướng nhất định (dọc hoặc ngang). Tuy nhiên, việc cố định hướng có thể gây ra các vấn đề sau:
- Người dùng gặp khó khăn trong việc thay đổi hướng thiết bị có thể không sử dụng được.
- Việc thao tác trở nên khó khăn đối với người sử dụng xe lăn hoặc thiết bị cố định.
- Người dùng không thể lựa chọn cách thao tác theo sở thích của mình.
Ngoại lệ：
- Nội dung mà chế độ ngang là thiết yếu (ví dụ: trò chơi điện tử, ứng dụng hiển thị bản nhạc).
2. Yêu cầu của hướng dẫn và cách triển khai
a. Không cố định hướng màn hình
Nguyên tắc cơ bản là tránh cài đặt cố định hướng màn hình bằng CSS hoặc JavaScript.
Ví dụ không phù hợp
<style>
body {
transform: rotate(-90deg);
overflow: hidden;
}
</style>
Trong ví dụ này, màn hình bị cố định ở chế độ ngang, khiến người dùng không thể sử dụng ở chế độ dọc.
Ví dụ cải tiến
Không giới hạn hướng màn hình, cho phép thao tác ở cả hai hướng.
<p>Nội dung này có thể sử dụng được ở cả chế độ dọc lẫn chế độ ngang.</p>
b. Cách xử lý khi cần một hướng cụ thể
Ngay cả khi cần một hướng cụ thể, hãy cung cấp phương án thay thế hoặc giải thích phù hợp.
Ví dụ bắt buộc (trong trường hợp trò chơi)
<p>Trò chơi này chỉ hoạt động ở chế độ ngang. Vui lòng xoay thiết bị sang chế độ ngang.</p>
Cung cấp lựa chọn cho người dùng
Sử dụng JavaScript để phát hiện hướng màn hình, sau đó đề xuất người dùng thay đổi hướng hoặc cung cấp phương án thay thế.
Ví dụ JavaScript
<script>
window.addEventListener("orientationchange", () => {
const orientation = screen.orientation.type;
const message = document.getElementById("orientationMessage");
if (orientation.includes("portrait")) {
message.textContent = "Khuyến nghị sử dụng nội dung ở chế độ ngang.";
} else {
message.textContent = "";
}
});
</script>
<div id="orientationMessage"></div>
<p>Nội dung này hoạt động tốt nhất ở chế độ ngang, nhưng vẫn có thể sử dụng được ở chế độ dọc.</p>
c. Áp dụng thiết kế đáp ứng (responsive design) bằng CSS
Sử dụng CSS để tạo bố cục tương thích với cả chế độ dọc và chế độ ngang.
Ví dụ CSS
@media (orientation: portrait) {
body {
background-color: lightblue;
}
p {
font-size: 16px;
}
}
@media (orientation: landscape) {
body {
background-color: lightgreen;
}
p {
font-size: 20px;
}
}
Trong đoạn mã này, màu nền và kích thước phông chữ sẽ thay đổi tùy theo hướng của thiết bị.
3. Những lỗi thường gặp và cách khắc phục
a. Cố định ở chế độ ngang hoặc dọc
Ví dụ lỗi
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, orientation=landscape">
Cài đặt này cố định ở chế độ ngang, làm hạn chế khả năng thao tác tự do của người dùng.
Biện pháp cải thiện Không cố định hướng, đảm bảo nội dung hoạt động được ở cả hai chế độ.
<meta name="viewport" content="width=device-width, initial-scale=1">
b. Thông báo ép buộc hướng màn hình
Ví dụ lỗi
<p>Không thể sử dụng nội dung này ở chế độ dọc. Vui lòng chuyển sang chế độ ngang.</p>
Biện pháp cải thiện Đề xuất cách thay đổi hướng hoặc cung cấp nội dung thay thế.
<p>Chế độ ngang được khuyến nghị, nhưng vẫn có thể sử dụng ở chế độ dọc.</p>
4. Lợi ích đối với khả năng truy cập (accessibility)
Việc tuân thủ hướng dẫn này sẽ giúp hỗ trợ các đối tượng người dùng sau:
- Người dùng gặp khó khăn trong việc thay đổi hướng thiết bị: Ngay cả khi sử dụng thiết bị cố định, vẫn có thể truy cập được nội dung.
- Người dùng muốn thao tác theo sở thích cá nhân: Việc có thể tự do chuyển đổi giữa chế độ dọc và ngang giúp nâng cao tính tiện dụng.
- Người dùng sử dụng trong nhiều môi trường khác nhau: Nhờ sự linh hoạt của bố cục, việc sử dụng trên các thiết bị khác nhau trở nên thuận tiện hơn.
Tóm tắt
Tiêu chí 1.3.4 “Hướng màn hình” trong WCAG 2.2 yêu cầu nội dung không được cố định ở một hướng cụ thể.
- Hãy sử dụng CSS và JavaScript một cách hợp lý để tạo thiết kế đáp ứng (responsive design) phù hợp với cả chế độ dọc và ngang.
- Khi cần một hướng cụ thể, hãy cung cấp phương án thay thế hoặc giải thích rõ ràng để tránh gây nhầm lẫn cho người dùng.
Việc áp dụng hướng dẫn này sẽ giúp bạn cung cấp nội dung web có khả năng truy cập cao, phù hợp với mọi thiết bị và tình huống!
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.