Tại sao bạn không nên thêm từ 'navigation' vào nhãn điều hướng của mình?

Bài viết được dịch và tổng hợp từ tin tức gốc. Bạn có thể đọc bài viết gốc bằng tiếng Anh tại đây.

Điểm tin nhanh:

Việc thêm từ 'navigation' vào nhãn <nav> gây ra sự lặp lại không cần thiết cho người dùng sử dụng trình đọc màn hình.

Trình đọc màn hình sẽ đọc cả vai trò (role) và nhãn (label), dẫn đến trải nghiệm như "Navigation, Primary navigation".

Hãy giữ cho văn bản điều hướng ngắn gọn, súc tích và tránh các từ ngữ dư thừa.

Trong phát triển web, đặc biệt là khi tối ưu hóa khả năng tiếp cận (Accessibility - a11y), chúng ta thường chú trọng vào việc đặt tên cho các thành phần HTML. Tuy nhiên, đôi khi sự nhiệt tình quá mức lại dẫn đến những lỗi nhỏ gây phiền toái cho người dùng.

Vấn đề với nhãn điều hướng (Navigation Labels)

Nhiều lập trình viên có thói quen đặt tên cho các thẻ <nav> một cách rất tường minh, ví dụ như: <nav aria-label="Primary navigation">. Mặc dù mục đích là để làm rõ cấu trúc trang web, nhưng thực tế, trình đọc màn hình (screen reader) đã tự động thông báo vai trò của phần tử đó.

Khi một người dùng sử dụng trình đọc màn hình điều hướng đến thẻ <nav>, thiết bị sẽ thông báo: "Navigation" (đây là vai trò của thẻ). Nếu bạn đặt nhãn là "Primary navigation", trình đọc màn hình sẽ đọc thành: "Navigation, Primary navigation".

Bảng so sánh trải nghiệm người dùng

Cách đặt nhãn	Trình đọc màn hình thông báo	Đánh giá UX
`<nav aria-label="Primary navigation">`	"Navigation, Primary navigation"	Dư thừa, gây nhiễu
`<nav aria-label="Primary">`	"Navigation, Primary"	Tối ưu, chuyên nghiệp

Tại sao cần tối ưu hóa Accessibility?

Việc loại bỏ các từ ngữ dư thừa không chỉ giúp trình đọc màn hình hoạt động hiệu quả hơn mà còn là một phần của tư duy thiết kế UX tinh gọn. Tương tự như việc bạn không cần viết "image" trong thuộc tính alt của thẻ <img> (vì trình đọc màn hình đã biết đó là một hình ảnh), việc lược bỏ từ "navigation" giúp người dùng tiếp cận thông tin nhanh hơn.

Nếu bạn quan tâm đến việc cải thiện khả năng tiếp cận cho các thành phần giao diện phức tạp hơn, hãy tham khảo thêm về Sức hút khó cưỡng của ariaNotify(): Bước tiến mới trong khả năng tiếp cận (Accessibility) trên Web.

Sơ đồ luồng xử lý của trình đọc màn hình

Để hình dung cách trình đọc màn hình xử lý các thẻ điều hướng, hãy xem sơ đồ dưới đây:

[Thẻ <nav>] ➔ [Trình đọc màn hình nhận diện vai trò 'Navigation']
      |
      V
[Kiểm tra thuộc tính aria-label]
      |
      +--- Nếu có "Navigation" ➔ Đọc lặp lại (Navigation, Navigation)
      |
      +--- Nếu chỉ có "Primary" ➔ Đọc súc tích (Navigation, Primary)

Lời khuyên cho lập trình viên

Giữ cho nhãn ngắn gọn: Đừng cố gắng viết một cuốn tiểu thuyết trong các nhãn aria-label.
Tránh lặp lại vai trò: Hãy nhớ rằng các thuộc tính như nav, button, link đã được trình đọc màn hình tự động nhận diện.
Kiểm tra với công cụ thực tế: Luôn kiểm tra giao diện của bạn bằng các công cụ hỗ trợ để cảm nhận trải nghiệm thực tế của người dùng khiếm thị.

Việc chú ý đến những chi tiết nhỏ như thế này chính là cách chúng ta tạo ra một môi trường web thân thiện và công bằng hơn cho tất cả mọi người.