Về Hướng dẫn WCAG 2.2 ‘1.4.12 Khoảng cách giữa các đoạn văn bản’ Mức AA

Mở đầu

Hướng dẫn WCAG 2.2 ‘1.4.12 Khoảng cách giữa các đoạn văn bản’ yêu cầu việc điều chỉnh các thuộc tính kiểu văn bản (khoảng cách dòng, khoảng cách giữa các chữ, khoảng cách giữa các từ, khoảng cách giữa các đoạn) không được làm giảm chất lượng nội dung hoặc chức năng. Tiêu chuẩn này được thiết lập để hỗ trợ người dùng có hạn chế về thị giác hoặc những người muốn cải thiện khả năng đọc.

1. Tiêu chuẩn điều chỉnh bắt buộc

Cần đảm bảo rằng việc điều chỉnh các thuộc tính dưới đây không làm mất đi nội dung hoặc chức năng:

1. Khoảng cách giữa các dòng（Line Height）
   • Ít nhất gấp 1,5 lần kích thước văn bản.
2. Khoảng cách giữa các chữ（Letter Spacing）
   • Khoảng cách ít nhất 0.12em.
3. Khoảng cách giữa các từ（Word Spacing）
   • Khoảng cách ít nhất 0.16em.
4. Khoảng cách giữa các đoạn（Paragraph Spacing）
   • Ít nhất gấp 2 lần khoảng cách dòng hiện tại.

2. Phương pháp triển khai

a. Cài đặt khoảng cách văn bản bằng CSS

Phong cách cơ bản

body {
  line-height: 1.5; /* Khoảng cách dòng */
  letter-spacing: 0.12em; /* Khoảng cách giữa các chữ */
  word-spacing: 0.16em; /* Khoảng cách giữa các từ */
  margin-bottom: 2em; /* Khoảng cách giữa các đoạn */
}

Ví dụ HTML

<div>
  <p>Đây là một ví dụ văn bản</p>
  <p>Khoảng cách dòng, khoảng cách giữa các chữ, khoảng cách giữa các từ và khoảng cách giữa các đoạn đã được điều chỉnh.</p>
</div>

b. Hỗ trợ điều chỉnh khoảng cách bởi người dùng

Thay đổi khoảng cách bằng nút bấm

HTML

<button id="increaseSpacing">Mở rộng khoảng cách</button>
<button id="resetSpacing">Đặt lại khoảng cách</button>

<div id="content">
  <p>Đây là một ví dụ văn bản. Bạn có thể điều chỉnh khoảng cách dòng và khoảng cách giữa các chữ để làm cho văn bản dễ đọc hơn.</p>
</div>

JavaScript

const content = document.getElementById('content');
const increaseSpacingButton = document.getElementById('increaseSpacing');
const resetSpacingButton = document.getElementById('resetSpacing');

increaseSpacingButton.addEventListener('click', () => {
  content.style.lineHeight = '2';
  content.style.letterSpacing = '0.2em';
  content.style.wordSpacing = '0.3em';
  content.style.marginBottom = '2.5em';
});

resetSpacingButton.addEventListener('click', () => {
  content.style.lineHeight = '';
  content.style.letterSpacing = '';
  content.style.wordSpacing = '';
  content.style.marginBottom = '';
});

c. Hỗ trợ với bố cục linh hoạt (liquid layout)

Bằng cách sử dụng bố cục linh hoạt, việc điều chỉnh khoảng cách sẽ không làm cho văn bản bị cắt đứt hoặc chồng chéo lên nhau.

Ví dụ CSS

.container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

p {
  line-height: 1.5;
  letter-spacing: 0.12em;
  word-spacing: 0.16em;
  margin-bottom: 2em;
  overflow-wrap: break-word; /* Quá trình ngắt dòng văn bản */
}

3. Các ví dụ thất bại thường gặp và cách cải thiện

a. Văn bản bị cắt

Ví dụ thất bại

p {
  white-space: nowrap;
}

• Văn bản dài bị cắt và không thể đọc được.

Ví dụ cải thiện

p {
  white-space: normal;
  overflow-wrap: break-word;
}

b. Khi điều chỉnh, nội dung bị chồng lên nhau.

Ví dụ thất bại

p {
  position: absolute;
  top: 50px;
}

• Do vị trí cố định, khi điều chỉnh khoảng cách, nó sẽ chồng lên các phần tử khác.

Ví dụ cải thiện

p {
  position: relative;
  margin-bottom: 2em;
}

c. Container có kích thước cố định

Ví dụ thất bại

.container {
  width: 400px;
  height: 200px;
  overflow: hidden;
}

• Do kích thước container bị cố định, nội dung bị cắt.

Ví dụ cải thiện

.container {
  max-width: 100%;
  height: auto;
  overflow: visible;
}

4. Lợi ích của khả năng tiếp cận

a. Cải thiện sự thoải mái về thị giác

• Việc mở rộng khoảng cách dòng và khoảng cách giữa các chữ giúp văn bản dễ đọc hơn về mặt thị giác.

b. Cải thiện khả năng hiểu biết

• Người dùng có khuyết tật nhận thức sẽ dễ dàng hiểu nội dung hơn.

c. Bố cục linh hoạt

• Tất cả người dùng đều có thể điều chỉnh khoảng cách theo nhu cầu cá nhân.

5. Phương pháp kiểm tra

a. Kiểm tra thủ công

Sử dụng công cụ phát triển của trình duyệt, điều chỉnh khoảng cách văn bản với các cài đặt dưới đây và xác nhận rằng nội dung không bị mất:

• Khoảng cách dòng: 1.5 lần
• Khoảng cách giữa các chữ: 0.12em
• Khoảng cách giữa các từ: 0.16em
• Khoảng cách giữa các đoạn: gấp 2 lần khoảng cách dòng

b. Công cụ kiểm tra tự động

• Kiểm tra khả năng tiếp cận, bao gồm khoảng cách văn bản, bằng các công cụ như Axe và WAVE.

Tóm tắt

WCAG 2.2 “1.4.12 Khoảng cách văn bản” yêu cầu có thể điều chỉnh kiểu văn bản mà không làm mất đi nội dung hoặc chức năng.

Điểm cần chú ý khi triển khai

1. Cài đặt khoảng cách một cách phù hợp bằng CSS và hỗ trợ điều chỉnh.
2. Cung cấp cơ chế cho người dùng để thay đổi khoảng cách dòng và khoảng cách giữa các chữ.
3. Sử dụng thiết kế linh hoạt (liquid design) để đảm bảo rằng các phần tử không bị cắt đứt hoặc chồng chéo khi điều chỉnh khoảng cách.

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 dễ đọc và linh hoạt cho tất cả người dù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.