Hướng dẫn WCAG 2.2 “1.4.4 Phóng to văn bản” Mức AA
Mở đầu
Hướng dẫn WCAG 2.2 “1.4.4 Phóng to văn bản” yêu cầu rằng người dùng có thể phóng to văn bản lên đến 200% mà không làm mất nội dung hoặc chức năng mà không cần sử dụng công nghệ hỗ trợ. Điều này giúp người dùng có hạn chế về thị giác có thể duyệt nội dung một cách thoải mái.
Bài viết này sẽ giải thích các phương pháp cụ thể để đáp ứng tiêu chuẩn này bằng cách sử dụng HTML, CSS và JavaScript cho người mới bắt đầu.
1. Lý do cần phải phóng to văn bản
- Người khiếm thị và người cao tuổi: Có thể gặp khó khăn trong việc đọc chữ nhỏ.
- Sự khác biệt giữa các thiết bị: Trên các thiết bị nhỏ, việc phóng to chữ là điều thường thấy.
- Ngay cả khi người dùng sử dụng chức năng zoom của trình duyệt hoặc cài đặt hệ điều hành để phóng to văn bản, trang web vẫn cần phải hoạt động đúng cách.
2. Cách triển khai để đáp ứng tiêu chuẩn.
a. Sử dụng đơn vị tương đối.
Khi chỉ định kích thước văn bản, thay vì sử dụng giá trị tuyệt đối (px), việc sử dụng đơn vị tương đối (% hoặc em, rem) sẽ giúp trang web linh hoạt hơn trong việc đáp ứng với việc phóng to.
Ví dụ về CSS
body {
font-size: 100%; /* Dựa trên kích thước phông chữ cơ bản mà người dùng đã thiết lập trong trình duyệt. */
}
h1 {
font-size: 2em; /* Gấp đôi kích thước phông chữ cơ bản. */
}
p {
font-size: 1em; /* Bằng kích thước phông chữ cơ bản. */
}
- em: Được tính dựa trên kích thước phông chữ của phần tử cha.
- rem: Được tính dựa trên kích thước phông chữ của phần tử gốc (html).
b. Làm cho khối văn bản hỗ trợ việc phóng to.
Khi văn bản được phóng to, cần đảm bảo rằng nội dung không bị cắt bớt hoặc chồng lên các phần tử khác.
Ví dụ về CSS
.container {
width: 90%; /* Sử dụng chiều rộng tương đối thay vì chiều rộng cố định. */
max-width: 800px;
padding: 1em;
border: 1px solid #ccc;
}
- Sử dụng % hoặc max-width để làm cho khối chứa có kiểu bố cục linh hoạt (bố cục có thể thay đổi chiều rộng).
c. Áp dụng thiết kế đáp ứng (responsive design).
Sử dụng media query để thiết lập kích thước văn bản phù hợp với kích thước màn hình và độ phân giải.
Ví dụ về CSS
@media (max-width: 600px) {
body {
font-size: 120%;
}
}
@media (min-width: 601px) {
body {
font-size: 100%;
}
}
d. Tận dụng chức năng zoom của trình duyệt.
Việc phóng to văn bản thường được thực hiện thông qua chức năng zoom của trình duyệt. Để đáp ứng điều này, cần thiết kế sao cho nội dung hiển thị đúng ngay cả khi được phóng to.
Cài đặt Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
3. Cung cấp hỗ trợ bổ sung
a. Điều khiển thay đổi kích thước văn bản.
Cung cấp chức năng để người dùng có thể thay đổi kích thước văn bản một cách thủ công trên trang.
Ví dụ về HTML và JavaScript
<button id="increaseFont">Phóng to văn bản</button>
<button id="decreaseFont">Thu nhỏ văn bản</button>
<div id="content" style="font-size: 1em;">
<p>Đây là văn bản mẫu</p>
</div>
<script>
const content = document.getElementById("content");
const increaseFont = document.getElementById("increaseFont");
const decreaseFont = document.getElementById("decreaseFont");
let fontSize = 1;
increaseFont.addEventListener("click", () => {
fontSize += 0.1;
content.style.fontSize = fontSize + "em";
});
decreaseFont.addEventListener("click", () => {
fontSize = Math.max(0.5, fontSize - 0.1); // Giới hạn kích thước phông chữ không nhỏ hơn 0.5em
content.style.fontSize = fontSize + "em";
});
</script>
4. Những sai lầm thường gặp và các biện pháp khắc phục
a. Cài đặt kích thước văn bản bằng đơn vị cố định.
Ví dụ sai
p {
font-size: 16px; /* Kích thước cố định */
}
- Sử dụng giá trị tuyệt đối có thể làm cho bố cục bị hỏng khi phóng to.
Biện pháp cải thiện
p {
font-size: 1em; /* Đơn vị tương đối */
}
b. Khi văn bản được phóng to, các phần tử bị chồng lên nhau.
Ví dụ sai
<div style="font-size: 1em; width: 200px; height: 50px; overflow: hidden;">
<p>Văn bản bị cắt bớt</p>
</div>
Biện pháp cải thiện
<div style="font-size: 1em; width: auto; height: auto;">
<p>Văn bản được hiển thị đúng cách</p>
</div>
5. Lợi ích của khả năng tiếp cận
a. Chú ý đến người khiếm thị và người cao tuổi
Việc có thể phóng to văn bản giúp người dùng khiếm thị hoặc mắc chứng cận thị vẫn có thể duyệt nội dung một cách thoải mái.
b. Cải thiện khả năng tương thích giữa các thiết bị
Bằng cách áp dụng thiết kế đáp ứng (responsive design), trang web sẽ hiển thị đúng trên các thiết bị khác nhau.
Tóm tắt
Hướng dẫn WCAG 2.2 “1.4.4 Phóng to văn bản” yêu cầu rằng người dùng có thể phóng to văn bản lên đến 200% mà không làm mất nội dung hoặc chức năng, mà không cần sử dụng công nghệ hỗ trợ.
Các điểm cần lưu ý khi triển khai
- Sử dụng đơn vị tương đối (% hoặc em, rem) để đảm bảo tính linh hoạt.
- Áp dụng bố cục linh hoạt (liquid layout) để ngăn ngừa sự thay đổi bố cục khi phóng to.
- Cung cấp chức năng để người dùng có thể điều chỉnh kích thước văn bản trực tiếp.
Bằng cách thực hiện những điều này, khả năng nhận diện sẽ được cải thiện và bạn sẽ cung cấp được nội dung web phù hợp với nhiều người dùng hơn!
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.