M

MLOG

Tiếng Việt

Hướng dẫn toàn diện về cách triển khai tooltip có thể truy cập bằng trạng thái di chuột và tập trung, đảm bảo khả năng sử dụng cho mọi người dùng, kể cả người khuyết tật.

Triển khai Tooltip: Thông tin có thể truy cập khi Di chuột và Tập trung

Tooltip là các thông báo trợ giúp nhỏ theo ngữ cảnh xuất hiện khi người dùng di chuột qua hoặc tập trung vào một yếu tố. Chúng có thể cung cấp thông tin bổ sung, làm rõ mục đích của một yếu tố, hoặc đưa ra gợi ý về cách sử dụng một tính năng. Tuy nhiên, tooltip có thể dễ dàng trở thành cơn ác mộng về khả năng truy cập nếu không được triển khai đúng cách. Hướng dẫn này phác thảo các phương pháp thực hành tốt nhất để tạo ra các tooltip mà mọi người đều có thể sử dụng, bao gồm cả người dùng khuyết tật.

Tại sao khả năng truy cập lại quan trọng đối với Tooltip

Khả năng truy cập không chỉ là về việc tuân thủ; đó là về việc tạo ra trải nghiệm người dùng tốt hơn cho mọi người. Khi tooltip không thể truy cập được, nó có thể loại trừ những người dùng dựa vào các công nghệ hỗ trợ như trình đọc màn hình, điều hướng bằng bàn phím hoặc nhập liệu bằng giọng nói. Hãy xem xét các tình huống sau:

Bằng cách tuân theo các phương pháp thực hành tốt nhất về khả năng truy cập, chúng ta có thể đảm bảo rằng tooltip nâng cao thay vì cản trở trải nghiệm người dùng cho tất cả mọi người.

Các nguyên tắc chính cho Tooltip có thể truy cập

Các nguyên tắc sau đây rất quan trọng để tạo ra các tooltip có thể truy cập:

  1. Cung cấp quyền truy cập thay thế: Đảm bảo tooltip có thể truy cập được thông qua cả di chuột và tập trung bằng bàn phím.
  2. Sử dụng thuộc tính ARIA: Sử dụng các thuộc tính ARIA (Accessible Rich Internet Applications) để xác định và mô tả đúng các tooltip cho công nghệ hỗ trợ.
  3. Quản lý tập trung: Kiểm soát nơi con trỏ tập trung đi đến khi một tooltip được hiển thị và ẩn đi.
  4. Đảm bảo độ tương phản đủ: Cung cấp đủ độ tương phản màu sắc giữa văn bản tooltip và nền.
  5. Cho phép đủ thời gian: Cho người dùng đủ thời gian để đọc nội dung tooltip.
  6. Làm cho chúng có thể bị loại bỏ: Cung cấp một cách rõ ràng để loại bỏ tooltip.
  7. Tránh lạm dụng: Sử dụng tooltip một cách tiết kiệm và chỉ khi cần thiết.

Kỹ thuật triển khai

1. Sử dụng Di chuột và Tập trung

Khía cạnh quan trọng nhất của tooltip có thể truy cập là đảm bảo chúng có thể được truy cập bởi cả người dùng chuột và bàn phím. Điều này có nghĩa là tooltip nên xuất hiện cả khi di chuột qua và khi yếu tố nhận được sự tập trung.

HTML:

<a href="#" aria-describedby="tooltip-example">Liên kết ví dụ</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Đây là một tooltip ví dụ.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Đảm bảo tooltip ở trên cùng */
}

Giải thích:

JavaScript (Kiểm soát nâng cao - Tùy chọn):

Mặc dù CSS có thể xử lý việc hiển thị/ẩn đơn giản, JavaScript cho phép kiểm soát mạnh mẽ hơn, đặc biệt khi tooltip được tạo động hoặc cần hành vi phức tạp hơn.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Sử dụng thuộc tính ARIA

Các thuộc tính ARIA rất cần thiết để cung cấp thông tin ngữ nghĩa cho các công nghệ hỗ trợ. Dưới đây là phân tích các thuộc tính chính:

Ví dụ:

<button aria-describedby="help-tooltip">Gửi</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Nhấp vào đây để gửi biểu mẫu.</div>

JavaScript (cho aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Quản lý Tập trung

Khi một tooltip xuất hiện, nó thường *không nên* chiếm lấy sự tập trung từ yếu tố kích hoạt. Sự tập trung nên được giữ lại trên yếu tố đã kích hoạt tooltip. Điều này đảm bảo rằng người dùng bàn phím có thể tiếp tục điều hướng trang mà không bị gián đoạn bất ngờ.

Tuy nhiên, có thể có những tình huống bạn *muốn* di chuyển sự tập trung đến tooltip, đặc biệt nếu tooltip chứa các yếu tố tương tác (ví dụ: liên kết, nút). Trong trường hợp này, hãy đảm bảo rằng:

Trong hầu hết các trường hợp, việc tránh quản lý sự tập trung trong chính tooltip được ưa thích hơn vì sự đơn giản và khả năng sử dụng.

4. Đảm bảo độ tương phản đủ

Độ tương phản màu sắc rất quan trọng cho khả năng đọc. Đảm bảo rằng màu văn bản trong tooltip của bạn có độ tương phản đủ so với màu nền. Hướng dẫn về khả năng truy cập nội dung web (WCAG) khuyến nghị tỷ lệ tương phản ít nhất là 4.5:1 đối với văn bản thông thường và 3:1 đối với văn bản lớn (18pt hoặc 14pt chữ đậm).

Sử dụng các công cụ kiểm tra độ tương phản trực tuyến để xác minh rằng lựa chọn màu sắc của bạn đáp ứng các tiêu chuẩn về khả năng truy cập. Ví dụ về các công cụ kiểm tra độ tương phản bao gồm:

Ví dụ (Độ tương phản tốt):

.tooltip {
  background-color: #000;
  color: #fff;
}

Ví dụ (Độ tương phản kém):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Cho phép đủ thời gian

Người dùng cần đủ thời gian để đọc nội dung tooltip. Tránh các tooltip biến mất quá nhanh. Mặc dù không có con số kỳ diệu nào, hãy nhắm đến thời gian hiển thị tối thiểu là vài giây. Ngoài ra, tooltip nên vẫn hiển thị miễn là người dùng đang di chuột qua hoặc đã tập trung vào yếu tố kích hoạt. Nếu bạn cần loại bỏ tooltip do các sự kiện khác, hãy cung cấp một chỉ báo rằng tooltip sẽ đóng lại.

Nếu nội dung tooltip dài, hãy cân nhắc cung cấp một cách để người dùng tự loại bỏ tooltip (ví dụ: một nút đóng hoặc nhấn phím Escape).

6. Làm cho chúng có thể bị loại bỏ

Mặc dù tooltip thường tự động biến mất khi người dùng di chuyển chuột ra xa hoặc bỏ tập trung, nhưng việc cung cấp một cách rõ ràng để loại bỏ chúng theo cách thủ công là một thói quen tốt, đặc biệt đối với các tooltip dài hoặc chứa các yếu tố tương tác.

Các phương pháp để loại bỏ Tooltip:

Ví dụ (Nút đóng):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Đây là nội dung tooltip của tôi.
  <button onclick="hideTooltip()">Đóng</button>
</div>

Ví dụ (Phím Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Thay thế bằng hàm ẩn tooltip thực tế của bạn
  }
});

7. Tránh lạm dụng

Tooltip nên được sử dụng một cách tiết kiệm và chỉ khi chúng cung cấp thông tin thực sự hữu ích. Việc lạm dụng tooltip có thể làm lộn xộn giao diện, làm người dùng mất tập trung và tạo ra trải nghiệm khó chịu.

Các lựa chọn thay thế cho Tooltip:

Các vấn đề nâng cao

Nội dung động

Nếu nội dung tooltip của bạn được tạo động (ví dụ: tải từ API hoặc cập nhật dựa trên đầu vào của người dùng), hãy đảm bảo rằng thuộc tính aria-describedby và khả năng hiển thị của tooltip được cập nhật tương ứng. Sử dụng JavaScript để quản lý các cập nhật này.

Định vị

Hãy xem xét cẩn thận vị trí của các tooltip của bạn. Tránh đặt chúng ở vị trí che khuất nội dung quan trọng hoặc gây ra sự thay đổi bố cục. Hãy lưu ý đến các kích thước và độ phân giải màn hình khác nhau, và sử dụng CSS để đảm bảo rằng các tooltip luôn hiển thị trong khung nhìn.

Thiết bị di động

Tooltip theo truyền thống dựa vào các tương tác di chuột, vốn không có sẵn trên các thiết bị cảm ứng. Đối với các thiết bị di động, hãy cân nhắc sử dụng các phương thức tương tác thay thế, chẳng hạn như:

Kiểm thử Tooltip của bạn

Kiểm thử kỹ lưỡng các tooltip của bạn để đảm bảo chúng có thể truy cập được cho tất cả người dùng. Sử dụng kết hợp kiểm thử thủ công và các công cụ kiểm thử khả năng truy cập tự động.

Phương pháp kiểm thử:

Quốc tế hóa (i18n) và Địa phương hóa (l10n)

Khi phát triển tooltip cho đối tượng toàn cầu, hãy ghi nhớ quốc tế hóa và địa phương hóa:

Kết luận

Việc triển khai các tooltip có thể truy cập đòi hỏi sự lập kế hoạch cẩn thận và chú ý đến chi tiết. Bằng cách tuân theo các nguyên tắc và kỹ thuật được nêu trong hướng dẫn này, bạn có thể tạo ra các tooltip mà mọi người đều có thể sử dụng, bất kể khả năng của họ. Hãy nhớ rằng khả năng truy cập là một quá trình liên tục, vì vậy hãy tiếp tục kiểm tra và tinh chỉnh các tooltip của bạn để đảm bảo chúng đáp ứng nhu cầu của tất cả người dùng.

Tài nguyên

Triển khai Tooltip: Thông tin có thể truy cập khi Di chuột và Tập trung | MLOG