Hướng dẫn WCAG 2.2 ‘1.4.8 Trình bày hình ảnh’ Cấp AAA
Mở đầu
Hướng dẫn “1.4.8 Trình bày hình ảnh” trong WCAG 2.2 đặt ra các tiêu chuẩn để người dùng có thể tùy chỉnh một cách thích hợp hiển thị văn bản. Tiêu chuẩn này đặc biệt quan trọng đối với những người dùng có khuyết tật về thị giác hoặc nhận thức, giúp họ dễ dàng đọc văn bản hơn.
Cần cung cấp cơ chế để đáp ứng các yêu cầu sau:
- Người dùng có thể chọn màu trước và màu nền.
- Giới hạn số ký tự trên mỗi dòng không quá 80 ký tự (với ký tự CJK, không quá 40 ký tự).
- Căn lề văn bản sang trái hoặc phải (tránh căn lề đều hai bên).
- Khoảng cách giữa các dòng phải ít nhất gấp 1.5 lần, và khoảng cách giữa các đoạn văn phải lớn hơn ít nhất 1.5 lần so với khoảng cách giữa các dòng.
- Ngay cả khi phóng to văn bản lên 200%, cũng không cần phải cuộn ngang.
1. Cơ chế cho phép người dùng chọn màu trước và màu nền.
Bằng cách cung cấp các tùy chọn cho phép người dùng điều chỉnh màu văn bản và màu nền, người dùng có khuyết tật về màu sắc hoặc hạn chế về thị giác sẽ có thể sử dụng một cách thoải mái.
Phương pháp triển khai
Cung cấp công cụ chọn màu
Ví dụ về HTML và JavaScript
<label for="textColor">Màu chữ:</label>
<input type="color" id="textColor" value="#000000">
<label for="bgColor">Màu nền:</label>
<input type="color" id="bgColor" value="#ffffff">
<div id="textContainer" style="padding: 20px;">
<p>Bạn có thể thay đổi màu sắc và màu nền của văn bản này</p>
</div>
<script>
const textColorInput = document.getElementById('textColor');
const bgColorInput = document.getElementById('bgColor');
const textContainer = document.getElementById('textContainer');
textColorInput.addEventListener('input', () => {
textContainer.style.color = textColorInput.value;
});
bgColorInput.addEventListener('input', () => {
textContainer.style.backgroundColor = bgColorInput.value;
});
</script>
2. Hạn chế số ký tự trên mỗi dòng không vượt quá 80 ký tự
Nếu chiều rộng dòng quá rộng, độ dễ đọc của văn bản sẽ giảm. Đối với CJK (Tiếng Trung, Tiếng Nhật, Tiếng Hàn), số ký tự trên mỗi dòng sẽ được giới hạn không quá 40 ký tự.
Phương pháp triển khai
Cài đặt chiều rộng cột bằng CSS
.text-block {
max-width: 40em; /* 1em = Chiều rộng bằng với kích thước phông chữ hiện tại */
margin: 0 auto;
line-height: 1.5; /* Cài đặt khoảng cách giữa các dòng */
}
Ví dụ về HTML
<div class="text-block">
<p>Đoạn văn này được thiết kế với số ký tự trên mỗi dòng có giới hạn, giúp việc đọc dễ dàng hơn.</p>
</div>
3. Căn lề văn bản sang trái hoặc phải (tránh căn lề đều hai bên).
Căn lề đều hai bên (sắp xếp đều hai bên) có thể làm khoảng cách giữa các từ không đều, gây khó khăn trong việc đọc đối với người dùng có khuyết tật thị giác hoặc nhận thức.
Phương pháp triển khai
Chỉ định căn lề trái hoặc phải bằng CSS
p {
text-align: left; /* hoặc text-align: right; */
}
4. Điều chỉnh khoảng cách giữa các dòng và khoảng cách giữa các đoạn
Cài đặt khoảng cách giữa các dòng ít nhất gấp 1.5 lần, và khoảng cách giữa các đoạn ít nhất gấp 1.5 lần khoảng cách giữa các dòng.
Phương pháp triển khai
Cài đặt bằng CSS
p {
line-height: 1.5; /* Khoảng cách giữa các dòng */
margin-bottom: 2.25em; /* Khoảng cách giữa các đoạn (gấp 1.5 lần khoảng cách giữa các dòng). */
}
Cơ chế cho phép người dùng điều chỉnh
Ví dụ về HTML và JavaScript
<button id="increaseSpacing">Mở rộng khoảng cách giữa các dòng</button>
<button id="decreaseSpacing">Thu hẹp khoảng cách giữa các dòng</button>
<div id="textBlock">
<p>Đây là văn bản có thể điều chỉnh khoảng cách giữa các dòng và khoảng cách giữa các đoạn.</p>
</div>
<script>
const textBlock = document.getElementById('textBlock');
let lineHeight = 1.5;
document.getElementById('increaseSpacing').addEventListener('click', () => {
lineHeight += 0.1;
textBlock.style.lineHeight = lineHeight;
});
document.getElementById('decreaseSpacing').addEventListener('click', () => {
lineHeight = Math.max(1, lineHeight - 0.1);
textBlock.style.lineHeight = lineHeight;
});
</script>
5. Ngăn chặn cuộn ngang khi phóng to văn bản
Thiết kế bố cục sao cho ngay cả khi phóng to văn bản lên 200%, cũng không cần phải cuộn ngang.
Phương pháp triển khai
Sử dụng bố cục linh hoạt (liquid layout).
.container {
width: 90%; /* Thay đổi kích thước tùy theo chiều rộng của viewport. */
max-width: 800px;
margin: 0 auto;
}
Chỉ định kích thước phông chữ tương đối.
body {
font-size: 100%; /* Phụ thuộc vào cài đặt mặc định của người dùng. */
}
h1 {
font-size: 2em; /* Gấp đôi kích thước phông chữ cơ bản. */
}
6. Những ví dụ sai lầm thường gặp và cách khắc phục.
a. Màu sắc được chỉ định cố định.
Ví dụ sai lầm
p {
color: #000;
background-color: #fff;
}
- Người dùng không thể thay đổi màu sắc
Biện pháp cải thiện
p {
color: inherit;
background-color: inherit;
}
b. Sử dụng căn lề đều hai bên
Ví dụ sai lầm
p {
text-align: justify;
}
- Khoảng cách giữa các từ không đều khi sử dụng căn lề đều hai bên
Biện pháp cải thiện
p {
text-align: left;
}
7. Lợi ích của tính khả dụng (Accessibility)
- Hỗ trợ cho người khiếm thị: Bằng cách điều chỉnh độ tương phản và kích thước chữ, người dùng có khiếm thị cũng có thể duyệt web một cách thoải mái.
- Quan tâm đến người có rối loạn nhận thức: Việc thiết lập khoảng cách giữa các dòng và các đoạn văn hợp lý giúp người dùng dễ dàng hiểu nội dung hơn.
Tóm tắt
Hướng dẫn “1.4.8 Trình bày hình ảnh” trong WCAG 2.2 là tiêu chuẩn cung cấp cơ chế điều chỉnh cách hiển thị văn bản, giúp tất cả người dùng dễ dàng hiểu thông tin hơn.
Điểm cần lưu ý khi triển khai
- Cung cấp lựa chọn màu sắc cho màu trước và màu nền.
- Hạn chế số ký tự trên mỗi dòng.
- Căn lề trái hoặc phải và tránh căn lề đều hai bên.
- Cài đặt khoảng cách giữa các dòng và khoảng cách giữa các đoạn một cách hợp lý.
- Ngăn chặn cuộn ngang ngay cả khi phóng to lên 200%.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web có tính khả dụng cao.
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.