Hướng dẫn WCAG 2.2 ‘1.4.10 Reflow’ Cấp AA
Mở đầu
WCAG 2.2 ‘1.4.10 Reflow’ yêu cầu nội dung được tái bố trí (reflow) tùy thuộc vào kích thước màn hình và cài đặt phóng to, sao cho thông tin và chức năng không bị mất đi khi hiển thị. Tiêu chuẩn này nhằm mục đích thiết kế sao cho người dùng có thể thao tác nội dung chỉ bằng cách cuộn dọc mà không cần phải cuộn ngang.
Bài viết này sẽ giải thích cách triển khai Reflow đúng cách bằng HTML, CSS và JavaScript dành cho người mới bắt đầu.
1. Yêu cầu về Reflow
Nội dung cần phải đáp ứng các điều kiện sau:
- Nội dung phải có thể tái bố trí (reflow) khi chiều rộng màn hình là 320px (chế độ dọc của điện thoại di động) hoặc lớn hơn.
- Thông tin và chức năng không bị mất đi khi phóng to.
- Không cần phải cuộn ngang, chỉ cần cuộn dọc để thao tác.
2. Công nghệ để thực hiện Reflow
a. Sử dụng media query để triển khai thiết kế đáp ứng
Bằng cách sử dụng media query, bạn có thể cung cấp bố cục phù hợp với kích thước màn hình của thiết bị.
Ví dụ về CSS
/* Phong cách mặc định (Desktop) */
.container {
display: flex;
flex-direction: row;
gap: 20px;
}
/* Phong cách di động (chiều rộng màn hình từ 320px trở lên) */
@media (max-width: 480px) {
.container {
flex-direction: column;
gap: 10px;
}
}
HTML
<div class="container">
<div>Nội dung 1</div>
<div>Nội dung 2</div>
</div>
b. Hỗ trợ Reflow bằng CSS Flexbox
Sử dụng Flexbox để linh hoạt bố trí các phần tử và tự động tái bố trí (reflow) theo chiều rộng màn hình và lượng nội dung.
Ví dụ về CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-item {
flex: 1 1 300px; /* Reflow với chiều rộng tối thiểu 300px */
}
HTML
<div class="flex-container">
<div class="flex-item">Mục 1</div>
<div class="flex-item">Mục 2</div>
<div class="flex-item">Mục 3</div>
</div>
c. Sử dụng bố cục lưới (grid layout)
Sử dụng CSS Grid Layout để căn chỉnh các phần tử và điều chỉnh số cột tùy theo chiều rộng màn hình.
Ví dụ về CSS
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
HTML
<div class="grid-container">
<div>Nội dung 1</div>
<div>Nội dung 2</div>
<div>Nội dung 3</div>
</div>
d. Xử lý văn bản dài và URL
Để đảm bảo chuỗi văn bản dài không vượt quá chiều rộng màn hình, bạn có thể chỉ định việc gãy từ hoặc xuống dòng bằng CSS.
Ví dụ về CSS
.long-text {
word-wrap: break-word; /* Gãy từ */
overflow-wrap: break-word; /* Gãy dòng với chuỗi văn bản dài */
white-space: normal; /* Gãy dòng văn bản */
}
HTML
<p class="long-text">
Văn bản này chứa các chuỗi ký tự dài hoặc URL và sẽ tự động được gãy dòng
</p>
e. Cài đặt chiều rộng tối đa để ngăn chặn cuộn ngang
Cài đặt chiều rộng tối đa cho hình ảnh hoặc container để ngăn chặn việc cuộn ngang xảy ra.
Ví dụ về CSS
img {
max-width: 100%;
height: auto; /* Giữ tỷ lệ khung hình */
}
.container {
max-width: 100%; /* Đưa nội dung vào trong vùng nhìn (viewport) */
}
HTML
<div class="container">
<img src="example.jpg" alt="Ví dụ về hình ảnh">
</div>
3. Những ví dụ sai sót thường gặp và cách cải thiện
a. Nội dung bị mất khi phóng to
Ví dụ sai sót
.container {
width: 400px;
}
- Nội dung với chiều rộng cố định không vừa khi phóng to.
Biện pháp cải thiện
.container {
max-width: 100%;
width: auto;
}
b. Xảy ra cuộn ngang
Ví dụ sai sót
<div style="width: 1200px;">
Nội dung cần cuộn ngang
</div>
Biện pháp cải thiện
- Sử dụng max-width hoặc Flexbox để hỗ trợ Reflow.
4. Lưu ý khi triển khai
a. Kiểm tra thiết kế đáp ứng
- Kiểm tra bố cục trên điện thoại di động, máy tính bảng và máy tính để bàn.
- Sử dụng các công cụ như Chrome DevTools.
b. Kiểm tra chức năng khi tái bố trí (reflow).
- Xác nhận rằng các nút và liên kết vẫn hoạt động bình thường sau khi tái bố trí (reflow).
5. Lợi ích của khả năng tiếp cận
- Hỗ trợ thiết bị di động: Nội dung được hiển thị phù hợp ngay cả trên màn hình nhỏ.
- Cải thiện trải nghiệm người dùng: Loại bỏ cuộn ngang và cung cấp trải nghiệm duyệt web thoải mái.
- Quan tâm đến người khiếm thị: Nội dung không bị mất khi sử dụng trình đọc màn hình hoặc chức năng phóng to.
Tóm tắt
WCAG 2.2 ‘1.4.10 Reflow’ yêu cầu nội dung được tái bố trí tùy thuộc vào kích thước màn hình hoặc mức độ phóng to, sao cho thông tin và chức năng không bị mất đi.
Điểm cần lưu ý khi triển khai
- Sử dụng Flexbox hoặc CSS Grid để thực hiện Reflow.
- Cài đặt gãy dòng cho chuỗi văn bản dài hoặc hình ảnh.
- Cài đặt chiều rộng tối đa để ngăn chặn cuộn ngang.
Bằng cách tuân thủ những điều này, bạn có thể cung cấp nội dung có khả năng tiếp cận cao trên mọi thiết bị và môi trườ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.