Về tiêu chí 1.3.5 – Xác định mục đích nhập liệu trong Hướng dẫn WCAG 2.2, cấp độ AA

Mở đầu

Tiêu chí 1.3.5 “Xác định mục đích nhập liệu” trong WCAG 2.2 yêu cầu mỗi trường nhập liệu trong biểu mẫu thu thập thông tin người dùng phải có mục đích có thể được xác định một cách lập trình. Điều này giúp các công nghệ hỗ trợ (như trình đọc màn hình) hiểu rõ nội dung của biểu mẫu và truyền đạt chính xác đến người dùng.

Trong bài viết này, chúng tôi sẽ giải thích một cách dễ hiểu về phương pháp triển khai cụ thể và các điểm cần lưu ý dành cho những người mới bắt đầu học HTML, CSS và JavaScript.

1. Xác định mục đích nhập liệu là gì?

Trong biểu mẫu, có các trường nhập liệu như tên, địa chỉ email, số điện thoại, v.v. Việc xác định mục đích nhập liệu của các trường này một cách lập trình mang lại những lợi ích sau:

• Trình đọc màn hình có thể đọc thông tin một cách chính xác.
• Chức năng tự động điền của trình duyệt hoặc thiết bị (ví dụ: tự động điền tên hoặc địa chỉ) hoạt động chính xác.

Ví dụ, bằng cách sử dụng thuộc tính autocomplete trong trường nhập liệu để chỉ định rằng “trường này dùng để nhập tên”, các công nghệ hỗ trợ và trình duyệt có thể nhận biết được mục đích của trường đó.

2. Sử dụng thuộc tính autocomplete trong HTML5

a. Cơ bản về thuộc tính autocomplete

Khi sử dụng thuộc tính autocomplete, bạn có thể xác định mục đích của trường nhập liệu.

Ví dụ triển khai

Biểu mẫu thu thập tên, địa chỉ email và số điện thoại

<form>
  <label for="name">Tên：</label>
  <input type="text" id="name" name="name" autocomplete="name">

  <label for="email">Địa chỉ email：</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="tel">Số điện thoại：</label>
  <input type="tel" id="tel" name="tel" autocomplete="tel">
</form>

Điểm cần lưu ý

• Sử dụng autocomplete=“name” để chỉ định rằng đây là trường nhập tên.
• Sử dụng autocomplete=“email” để chỉ định rằng đây là trường nhập địa chỉ email.

b. Các giá trị autocomplete thường dùng

Dưới đây là các giá trị thuộc tính autocomplete thường được sử dụng:

Ví dụ: Biểu mẫu địa chỉ

<form>
  <label for="address">Địa chỉ：</label>
  <input type="text" id="address" name="address" autocomplete="street-address">

  <label for="zip">Mã bưu điện：</label>
  <input type="text" id="zip" name="zip" autocomplete="postal-code">

  <label for="country">Tên quốc gia：</label>
  <input type="text" id="country" name="country" autocomplete="country">
</form>

3. Những điểm cần lưu ý khi triển khai

a. Thiết lập giá trị thuộc tính autocomplete một cách chính xác

Nếu giá trị của thuộc tính autocomplete được thiết lập sai, trình duyệt sẽ không thể hiểu đúng và không hoạt động như mong muốn.

Ví dụ không phù hợp

<input type="text" id="name" name="name" autocomplete="fullname"> <!-- Giá trị không hợp lệ -->

Ví dụ cải tiến

<input type="text" id="name" name="name" autocomplete="name">

b. Liên kết nhãn (label) với trường nhập liệu trong biểu mẫu

Sử dụng thẻ label để liên kết trường nhập liệu với nhãn của nó. Việc này giúp các công nghệ hỗ trợ truyền đạt chính xác nội dung của trường nhập liệu đến người dùng.

Ví dụ

<label for="email">Địa chỉ email：</label>
<input type="email" id="email" name="email" autocomplete="email">

c. Xem xét hỗ trợ nhập liệu

Bằng cách thiết lập thuộc tính autocomplete, người dùng có thể dễ dàng sử dụng chức năng hỗ trợ nhập liệu của trình duyệt.

4. Lợi ích về khả năng truy cập (accessibility)

a. Nâng cao trải nghiệm người dùng

• Nhờ chức năng tự động điền, người dùng giảm bớt công sức khi nhập liệu.
• Giảm lỗi nhập liệu và giúp thu thập dữ liệu chính xác hơn.

b. Tăng cường khả năng tương thích với các công nghệ hỗ trợ

• Trình đọc màn hình đọc lên mục đích của các trường nhập liệu, giúp người khiếm thị dễ dàng sử dụng biểu mẫu hơn.

5. Những lỗi thường gặp và cách khắc phục

a. Quên thiết lập thuộc tính autocomplete

Ví dụ lỗi

<input type="text" id="name" name="name">

Trong ví dụ này, mục đích của trường nhập liệu không thể được xác định một cách lập trình.

Ví dụ cải tiến

<input type="text" id="name" name="name" autocomplete="name">

b. Giá trị không phù hợp của thuộc tính autocomplete

Ví dụ lỗi

<input type="text" id="email" name="email" autocomplete="mail">

autocomplete=“mail” là một giá trị không hợp lệ.

Ví dụ cải tiến

<input type="email" id="email" name="email" autocomplete="email">

Tóm tắt

Tiêu chí 1.3.5 “Xác định mục đích nhập liệu” trong WCAG 2.2 là một tiêu chuẩn quan trọng nhằm hỗ trợ công nghệ hỗ trợ và chức năng tự động điền, bằng cách đảm bảo mục đích của các trường nhập trong biểu mẫu có thể được xác định một cách lập trình.

Điểm triển khai chính

1. Thiết lập chính xác thuộc tính autocomplete trong HTML5.
2. Sử dụng thẻ label để làm rõ mô tả cho các trường trong biểu mẫu.
3. Xác định chính xác mục đích của trường nhập liệu và cung cấp hỗ trợ nhập liệu.

Việc tuân thủ điều này không chỉ nâng cao trải nghiệm nhập liệu của người dùng mà còn giúp xây dựng các biểu mẫu web có khả năng truy cập 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.