Không dùng văn bản liên kết kiểu “Nhấp vào đây” (2001)

• Nhấn mạnh vấn đề khi dùng văn bản liên kết chung chung như "Nhấp vào đây"
• Liên quan đến việc cải thiện khả năng truy cập, văn bản liên kết cần truyền đạt rõ ràng ý nghĩa của nội dung
• Gây tác động tiêu cực đến công cụ tìm kiếm và trải nghiệm người dùng trình đọc màn hình
• Cụm từ liên kết rõ ràng, phản ánh đúng ngữ cảnh mang lại lợi ích cho cả người dùng lẫn công nghệ
• Từ năm 2001, đã có xu hướng khuyến nghị dùng văn bản liên kết đúng cách ở góc độ tiêu chuẩn web và nguyên tắc UX

---

Giới thiệu

• Việc dùng văn bản liên kết chung chung như "Nhấp vào đây" hoặc "click here" từ lâu đã trở thành thông lệ phổ biến trong giới phát triển web
• Tuy nhiên, cách làm này chứa đựng những nhược điểm quan trọng về khả năng truy cập, tính khả dụng và SEO

Ý nghĩa của văn bản liên kết và vấn đề đặt ra

• Văn bản liên kết phải đóng vai trò cung cấp thông tin để người dùng có thể dự đoán liên kết sẽ dẫn đến đâu trước khi nhấp
• Nếu chỉ viết đơn giản là "Nhấp vào đây", liên kết sẽ tồn tại mà thiếu ngữ cảnh, gây nhầm lẫn cho người dùng và làm giảm khả năng truy cập

Ảnh hưởng đến khả năng truy cập và trải nghiệm người dùng

• Người dùng trình đọc màn hình khi rà qua danh sách liên kết trên trang sẽ nghe toàn những nội dung giống nhau là "Nhấp vào đây", từ đó rơi vào tình huống khó tiếp nhận thông tin
• Khi liên kết được viết bằng cụm từ cụ thể có ý nghĩa, hiệu quả trải nghiệm sẽ tăng lên cho cả người dùng khiếm thị lẫn người dùng trong nhiều tình huống khác nhau

Các cân nhắc về tối ưu hóa công cụ tìm kiếm (SEO)

• Công cụ tìm kiếm cũng phân tích văn bản liên kết để đánh giá mức độ liên quan và chất lượng của nội dung
• Văn bản liên kết chứa từ khóa quan trọng và ngữ cảnh sẽ tác động tích cực đến việc tăng thứ hạng tìm kiếm và mức độ hiển thị

Khuyến nghị cách viết văn bản liên kết đúng

• Khuyến nghị sử dụng văn bản liên kết phản ánh rõ ràng ngữ cảnh
  • Ví dụ: "Xem hướng dẫn khả năng truy cập mới nhất"
• Nguyên tắc này đã liên tục được nhấn mạnh từ năm 2001 trong quá trình hình thành tiêu chuẩn web và tăng cường UX

Kết luận

• Sử dụng văn bản có ý nghĩa làm liên kết thay vì "Nhấp vào đây" là một tiêu chí thiết yếu cho cả web hiện tại và web tương lai

[GN⁺]

Ý kiến Hacker News

• Xét từ góc độ khả năng tiếp cận, cần nhấn mạnh rằng trình đọc màn hình dành cho người dùng khiếm thị đọc trang theo cách tuyến tính. Người dùng có thể tách khỏi cấu trúc tuyến tính này bằng cách duyệt riêng tiêu đề hoặc danh sách liên kết, nhưng nếu mọi liên kết đều hiển thị là "nhấp vào đây" thì khả năng truy cập phi tuyến thực chất bị chặn

  • Chỉ ra rằng nếu mọi liên kết chỉ hiển thị bằng danh từ không có động từ, chẳng hạn đơn giản là "Amaya", thì sẽ khó hiểu ý nghĩa của từng liên kết. Vì vậy các cách diễn đạt như "get Amaya" hoặc "go to the Amaya website" cũng hoàn toàn ổn. Ngoài ra còn nhắc đến wxMaxima như một ví dụ không tốt, khi nút tải xuống nằm trên github.io nhưng thực tế lại dẫn tới việc lấy tệp thực thi từ một trang có nguy cơ mã độc như sourceforge
  • Trớ trêu là cần có thứ gì đó giúp những người không thực sự cần công cụ hỗ trợ tiếp cận vẫn có thể dễ dàng hình dung và hiểu cách các công cụ này hoạt động. Không phải để thay đổi chính công cụ đó, mà là để nhiều người hơn có thể trực tiếp trải nghiệm môi trường trình đọc màn hình
  • Với vấn đề này đã có nhiều cách giải quyết. Đưa ra các liên kết tham khảo như WCAG 2.2 HTML H33 guide, WCAG 2.2 CSS C7 guide. Tuy vậy, chưa chắc phương pháp đầu tiên được hỗ trợ tốt đến mức nào trong các trình đọc màn hình thực tế
  • Cho rằng đây là một lập luận hay. Dù vậy, vẫn giữ quan điểm văn bản liên kết nên bao gồm hành động rõ ràng như "Get Amaya" hơn là chỉ "Amaya"
  • Trình đọc màn hình cung cấp nhiều cách điều hướng trong trang. Di chuyển tuyến tính chỉ là cách kém hiệu quả nhất. Người dùng có thể nhanh chóng nhảy đến vị trí mong muốn qua landmark, heading hoặc chế độ điều hướng theo outline. Điểm quan trọng là cách điều hướng của trình đọc màn hình khác với điều hướng bằng bàn phím

• "Tôi" thấy ví dụ bị coi là "có vấn đề" trong bài viết là

  Để tải trình soạn thảo/trình duyệt Amaya của W3C, nhấp vào đây.
  thực ra rất trực quan. Có thể đoán rằng khi bấm vào liên kết thì hoặc tệp sẽ được tải xuống ngay, hoặc sẽ chuyển đến trang tải xuống.
  Ngược lại,
  Tải Amaya!
  lại tạo cảm giác sẽ dẫn đến trang chủ của website, nên nếu dùng làm liên kết tải xuống thực tế thì kém hiệu quả hơn.
  Và
  Tìm hiểu thêm về Amaya
  thì hoàn toàn không liên quan đến việc tải xuống; động từ "tìm hiểu thêm" lại không phải phần liên kết, nên lúc này sẽ gây mơ hồ rằng liên kết "Amaya" sẽ dẫn tới trang đích nào, trang giới thiệu hay trang thông tin.
  Thông lệ trên web thường là các ví dụ như
  Để tải trình soạn thảo/trình duyệt Amaya của W3C, nhấp vào đây
  Tải xuống Amaya, trình soạn thảo/trình duyệt của W3C
  theo kiểu như vậy.
  Không đồng ý với lập luận rằng không nên dùng động từ trong văn bản liên kết. Ngược lại, nếu đó là liên kết phục vụ hành động như tải xuống hay xem thông tin, thì nên có động từ rõ ràng.
  Đặc biệt, "nhấp vào đây" rất trực quan vì nó cho biết đây là liên kết mang tính hành động chứ không chỉ là liên kết tham chiếu.
  Tải Amaya!
  nhấn mạnh rằng kiểu câu này nghe giống một liên kết tham chiếu hơn là liên kết hướng dẫn thực sự cách lấy Amaya

  • Nếu trực tiếp dùng thử với trình đọc màn hình, sẽ thấy tất cả liên kết chỉ lặp đi lặp lại là "nhấp vào đây". Điều đó hoàn toàn không hữu ích. Xét từ góc độ công cụ tìm kiếm, "nhấp vào đây" cũng không cung cấp thông tin gì. Bản thân động từ thì không sao, nhưng nên tránh kiểu liên kết nghe giống hệt nhau như "nhấp vào đây". Những câu như "Click Here to download Amaya" có nêu rõ cả đối tượng thì vẫn ổn, còn chỉ đơn giản là "nhấp vào đây" thì không thể phân biệt trong nhiều tình huống
  • Rất ghét liên kết "nhấp vào đây". Khi cần tìm liên kết mình muốn, tôi thường chỉ lướt mắt qua toàn bộ văn bản liên kết trên trang; "Tải xuống Amaya" hoặc "Amaya" còn có thể chấp nhận được nếu là trang tham chiếu, nhưng "nhấp vào đây" thì hoàn toàn vô dụng
  • Trong ví dụ thực tế thì mọi liên kết đều dẫn đến trang chủ Amaya. Không phải trang tải xuống, và khả năng truyền tải thông điệp còn yếu đi. Phê phán rằng cuộc thảo luận đang lẫn lộn giữa vấn đề khả năng tiếp cận của kiểu "nhấp vào đây" và việc văn bản liên kết có phản ánh chính xác mục đích của liên kết hay không
  • Ngoài câu chuyện trình đọc màn hình, việc đặt văn bản liên kết bằng danh từ rõ ràng cũng có lợi về mặt bảo trì. Ví dụ, khi liên kết bị dán nhầm hoặc là liên kết chết, chính phần văn bản đó trở thành manh mối giúp lần theo và sửa lỗi dễ hơn. Có thể là điểm hơi nhỏ nhặt
  • Trên web thời kỳ đầu có rất nhiều liên kết kiểu "nhấp vào đây". Dần dần chúng được thay bằng các nút có hành động rõ ràng hơn, nên các mẫu như "để hủy giao dịch mua này [nhấp vào đây]", "để hoàn tất giao dịch mua này [nhấp vào đây]" ngày càng biến mất

• Giới thiệu rằng Government Digital Services của Anh cũng khuyến nghị hướng dẫn khả năng tiếp cận tương tự, có thể xem tài liệu chính thức ở đây

  • Thường dùng bộ hướng dẫn này làm tài liệu tham khảo để triển khai các component/trang web có mức khả năng tiếp cận cao nhất. Có thể trông hơi thô (như viền đen/vàng dày), nhưng cho rằng ưu tiên khả năng tiếp cận hơn thiết kế là điều quan trọng
  • Cách mà Home Office khuyến nghị hơi khác W3C. Ví dụ
    W3C:
    Get Amaya
    Read more about Amaya
    Home Office:
    Get Amaya
    Read more about Amaya
    Cách của Home Office có vẻ hợp lý hơn, nhưng tùy ngữ cảnh vẫn có thể phát sinh vấn đề khác. Cả hai nơi trên thực tế đều có vẻ tự nhiên hơn nếu giải quyết bằng các nút tách khỏi mạch văn bản, thay vì nhúng hyperlink trong câu chuyện kể (ví dụ: [Download], [Documentation]). Theo kinh nghiệm của tôi, việc chỉnh câu cho tự nhiên như
    "PiPedal là một hiệu ứng guitar chạy trên Raspberry Pi. Để tải PiPedal, xem [trang tải xuống]; để đọc tài liệu, xem [Documentation]."
    là tốt hơn nên tôi cũng đã viết tài liệu của mình theo cách đó
    Tôi nhận ra rằng việc danh từ hóa "nhấp vào đây" khó hơn tưởng tượng. Đôi khi ngay trong câu inline đã có đủ ngữ cảnh, nên vẫn có những trường hợp dùng "nhấp vào đây" mà thực tế không gây vấn đề về khả năng tiếp cận
    Đặc biệt khi nút nằm ngay phía trên ("Download", "Documentation") thì tôi không chắc có thực sự cần sửa hay không Cuối cùng thì chỉ số hiệu năng là người dùng có thực sự truy cập trang tải xuống nhiều đến mức nào

• Cá nhân tôi thấy ví dụ thứ hai mà bài viết khuyên nên tránh (“Để tải Amaya, hãy truy cập website Amaya và lấy phần mềm bạn cần”) lại tốt hơn.
  Nếu chỉ đặt liên kết là "Amaya" thì không rõ đó là liên kết nội bộ hay liên kết ngoài, cũng không rõ nó sẽ dẫn thẳng đến tệp hay đến trang tải xuống

  • Thích cách thêm biểu tượng để cho biết đích đến là bên ngoài hay là liên kết tệp. Nếu là tệp, cũng có thể hiển thị phần mở rộng tệp
  • Vấn đề phân biệt liên kết nội bộ và bên ngoài đã được giải quyết khá tốt bằng biểu tượng nhỏ trên Wikipedia và các nơi tương tự

• Có lẽ vì lớn tuổi, tôi trực giác nghĩ rằng liên kết nên dùng để chỉ danh từ (địa điểm/đối tượng).
  Vì vậy các liên kết như "website của tôi" là ổn, còn các cụm có động từ như "đi tới website của tôi" lại gây cảm giác khó chịu
  Đặc biệt không thích dạng mệnh lệnh, nên không dùng các kiểu như "go to my website", "follow this link"

  • Đồng cảm với ý này. Với trường hợp có hành động như tải xuống thì có thể gây mơ hồ, nhưng bản thân "download" cũng là một danh từ nên có lẽ vẫn ổn
  • Các trang tutorial hoặc How-to thì câu mệnh lệnh lại phù hợp

• Cho rằng việc chỉ dùng "đây" làm liên kết trên mạng là một thất bại mang tính nền tảng, cho thấy người viết hoàn toàn không hiểu cách viết tài liệu hypertext. "Nhấp vào đây" giống như chỉ dẫn sân khấu hơn. Có lẽ vấn đề là nhiều tác giả không viết trong ngữ cảnh hypertext

• Khi đặt liên kết cho câu như "I forgot my password", tôi đã thử nghĩ tới việc đổi thành kiểu "nhấp vào đây", nhưng trực giác cho thấy có gì đó không ổn.
  Khi các chuẩn UI bị phá vỡ, ngày càng có nhiều trường hợp người dùng bị lẫn lộn không biết phải bấm vào đâu trên trang, và đoạn chữ nào đại diện cho nhu cầu của mình
  Đồng ý rằng nếu "I forgot my password" là một nút thì sẽ hiệu quả hơn nhiều so với một liên kết
  Ngoài ra, khi Microsoft loại bỏ phần lớn nút bấm và thay bằng các liên kết màu sắc mơ hồ, cũng xuất hiện nhiều trường hợp người dùng không biết cần nhấn vào đâu
  (bài đăng tham khảo: bài Mastodon liên quan)

• Giới thiệu bài luận năm 2022 của Dragan Espenschied lịch sử thay đổi của văn bản liên kết.
  Đề cập xu hướng gần đây khi văn bản liên kết chuyển từ call-to-action sang dạng chữ trên nút mô tả trạng thái người dùng (tự định nghĩa mình là kiểu người nào, ví dụ: “hãy đăng nhập”)

• Đồng ý với hầu hết các nguyên tắc được giải thích trong bài, nhưng cho rằng trong những trường hợp như "download", nơi động từ hoặc cụm động từ cần được thể hiện rõ ràng, thì vẫn có những ngoại lệ phù hợp. Trong trường hợp đó chỉ nên dùng khi liên kết thực sự dẫn trực tiếp đến nội dung tải xuống, và luôn phải kiểm tra xem nó có phù hợp với ngữ cảnh hay không

• Nếu đúng như ví dụ, mọi liên kết đều thực sự bắt đầu tải Amaya, thì kiểu hyperlink Download Amaya là được ưa thích nhất.
  Nếu có thể thì nên thêm biểu tượng gợi ý đây là liên kết tải xuống. Muốn tránh việc không phải liên kết tệp thật mà lại dẫn tới một trang tải xuống lẫn nhiều nút quảng cáo