- 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
1 bình luận
Ý kiến trên Hacker News
Xét từ góc độ khả năng truy cập, trình đọc màn hình dành cho người khiếm thị sẽ đọc trang theo thứ tự tuyến tính
Để thoát khỏi kiểu đọc tuyến tính này, chúng thường cho phép duyệt riêng danh sách các phần tử như tiêu đề hoặc liên kết mà không kèm ngữ cảnh từ vị trí ban đầu
Nếu mọi liên kết đều là “click here”, thì về thực chất là tước đi khả năng truy cập phi tuyến tính của những người dùng này
Vì vậy “get Amaya” hoặc “go to the Amaya website” có vẻ là ổn
Ngoài ra, việc nút tải xuống trên github.io lại lấy file thực thi từ những nơi bị xem như trang độc hại kiểu SourceForge là một cách làm không tốt. Tôi nhớ đến wxMaxima
Không phải là muốn thay đổi công cụ, nhưng có lẽ nên có cách trực quan hóa để cho những người sẽ không tự đào sâu cách trình đọc màn hình hoạt động có thể thấy được điều đó
Tuy nhiên tôi không rõ kỹ thuật đầu tiên được trình đọc màn hình hỗ trợ tốt đến mức nào
Sửa: đã cập nhật liên kết từ WCAG 2.0 lên 2.2
Dù vậy, như ví dụ trong bài, tôi vẫn sẽ thêm hành động rõ hơn, kiểu “Get Amaya” thay vì chỉ để “Amaya”
Chẳng hạn, người dùng có thể di chuyển giữa các landmark, giữa các tiêu đề, hoặc dùng cả hai trong chế độ duyệt dàn ý
Điểm mấu chốt là điều hướng bằng trình đọc màn hình không giống điều hướng bằng bàn phím
Tôi hoàn toàn không đồng ý. Ví dụ mà họ đưa ra như một trường hợp xấu, “To download W3C's editor/browser Amaya, click here.”, thực ra rất rõ ràng
Nhấn vào liên kết thì либо sẽ tải xuống ngay, либо sẽ đến trang tải xuống
Ngược lại, “Get Amaya!” trông giống một liên kết đến trang web Amaya hơn là đến trang tải xuống, nên không hiệu quả cho mục đích tải xuống
“Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.” cũng không hay. Đó không phải là câu nói về tải xuống, và “tell me more” là mệnh lệnh nhưng bản thân nó lại không phải liên kết
Theo cách dùng quy ước trên web, như “To download W3C's editor/browser Amaya, click here.” hoặc “Download Amaya, the W3C's editor/browser.”, thì hoàn toàn ổn
Ý tưởng cho rằng liên kết không nên là động từ nghe khá kỳ lạ. Nếu liên kết chứa hành động như tải xuống hoặc tìm hiểu thêm, thì dĩ nhiên nó có thể là động từ
Điều này khác với trường hợp tìm hiểu thêm về một chủ đề nào đó như các liên kết tham khảo trên Wikipedia
“click here” làm rõ rằng đây không chỉ là liên kết tham khảo mà là liên kết hành động. Khi thấy “Get Amaya!”, tôi cảm nhận “Amaya” là liên kết tham khảo chứ không phải liên kết tải xuống, thay vì hiểu rằng nó chỉ cách lấy Amaya
Ngay cả nếu bạn xây dựng công cụ tìm kiếm, thì “click here” cho việc lập chỉ mục có cung cấp thông tin gì đâu?
Tôi không cho rằng động từ tự nó là vấn đề lớn, nhưng nếu động từ là click và tân ngữ là here thì lại khác
Tôi có thể chấp nhận văn bản liên kết kiểu “Click Here to download Amaya”, nhưng nếu liên kết đúng nghĩa chỉ có hai từ “click here” thì trong nhiều ngữ cảnh nó không thể phân biệt với các liên kết khác
“Download Amaya” có thể là một liên kết rất tốt. Chỉ để “Amaya” hoặc chỉ để “click here” thì không ổn, trừ khi đó là liên kết đến trang thông tin về Amaya
Rốt cuộc, như các bình luận khác đã nói, vấn đề với “click here” là vấn đề về khả năng truy cập, nhưng thông điệp có vẻ đã bị làm mờ đi khá nhiều khi trộn lẫn nó với chuyện văn bản liên kết có phản ánh chính xác đích đến hay không
aria-describedbycó thể giúp, nhưng nếu làm cho chính văn bản trong liên kết tốt hơn thì có thể khỏi cần đến nóVề phần động từ thì tôi đồng ý
Government Digital Service của Anh cũng đưa ra khuyến nghị tương tự trong hướng dẫn về khả năng truy cập: https://design.homeoffice.gov.uk/accessibility/links
Có thể không đẹp nhất, nhưng khả năng truy cập quan trọng hơn thiết kế, chẳng hạn như các viền đen/vàng dày của component biểu mẫu
W3C viết “Get Amaya”, “Read more about Amaya”, còn Home Office viết “Get Amaya”, “Read more about Amaya”
Cách sau có vẻ hợp lý hơn nhiều, nhưng khi dùng trong văn cảnh thì lại nảy sinh vấn đề khác
Cá nhân tôi thấy cả hai đều đang nhầm lẫn giữa hai trường hợp sử dụng khác nhau. Link thường được dùng inline trong câu, còn các trường hợp mà W3C và Home Office đề cập thì thà xử lý như các nút nằm ngoài câu, ví dụ
[Download],[Documentation]còn hơnNhưng với trường hợp sử dụng là hyperlink nằm trong văn bản inline thì cả hai cách đều trông gượng gạo
Ví dụ, “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.” thì nên sửa thế nào?
Tôi hiểu lý do phản đối, nhưng rất khó chấp nhận kiểu sửa như “PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” Nó không hợp với cách hành văn tiếng Anh
Trong tài liệu thực tế tôi đã viết kiểu “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.”, nhưng theo kinh nghiệm của tôi thì việc danh từ hóa “click here” thường rất khó
Với những câu như “Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.” thì lại càng như vậy
Vì thế tôi tự hỏi chính xác thì việc dùng “here” như một đại từ chỉ đối tượng tham chiếu là sai ở điểm nào
Trong trường hợp này, link nằm trong câu đã cung cấp đầy đủ ngữ cảnh cần thiết, nên có thể không hề có vấn đề thực tế nào về khả năng truy cập
Ví dụ đầu tiên cũng là câu mở đầu của một trang web nơi tính ngắn gọn rất quan trọng
“To download PiPedal, click here.” có thực sự là vấn đề về khả năng truy cập không? Nhất là khi ngay phía trên đã có các nút
[ Download ] [ Documentation ]Ở đây chỉ số thực sự quan trọng là có bao nhiêu người truy cập trang tải xuống
Nhìn từ góc độ đó, tôi khá nghi ngờ việc “To download PiPedal, visit the Download Page.” có thực sự tốt hơn hay không
Cá nhân tôi lại thấy ví dụ thứ hai mà họ bảo nên tránh còn tốt hơn: “To download Amaya, go to the Amaya_Website and get the necessary software.”
Một link chỉ ghi “Amaya” thì không cho biết đó là liên kết nội bộ hay liên kết ngoài, và dù mục đích tải Amaya xuống đã khá rõ theo ngữ cảnh, vẫn khó biết nó dẫn thẳng tới tệp hay tới trang tải xuống
Có thể vì tôi già rồi, nhưng từ trước tới nay tôi vẫn luôn theo bản năng nghĩ rằng link phải trỏ tới danh từ
Link trỏ đến một nơi chốn, mà nơi chốn thì có tên chứ không phải động từ hay tính từ
Vì vậy, link tới “trang web của tôi” thì ổn, nhưng link kiểu “đi tới trang web của tôi” thì tôi cảm thấy về bản chất là không đúng
Tôi cũng cực kỳ không thích giọng điệu mệnh lệnh, nên tuyệt đối không viết những câu như “go to my website” hay “follow this link”
Chỉ là khi một link bắt đầu kích hoạt một hành động như tải thứ gì đó xuống thì nó trở nên mơ hồ. Dù vậy, nếu xem đó là danh từ như “bản tải xuống” hay “trình tải xuống” thì nó vẫn là danh từ
Đây có lẽ là một cuộc tranh luận Internet mà tôi sẽ giữ đến cùng
Lời kêu gọi hành động là một vấn đề khác, nhưng một trang chỉ gắn link vào mỗi từ “here” là một thất bại rõ ràng của người viết trong việc hiểu bản chất của môi trường hypertext
“click here” trông giống như một chỉ dẫn sân khấu bị để sót lại do nhầm lẫn
Phần lớn người viết khi viết không đặt mình trong ngữ cảnh hypertext, và lấy kiểu chỉ dẫn sân khấu làm mặc định thay vì cú pháp liên kết như Markdown
Nhớ tới một bài viết về liên kết có nội dung “I forgot my password”
Tôi từng nghĩ liệu viết “click here if...” có khá hơn không, nhưng theo trực giác tôi biết như vậy cũng không đúng
Việc bỏ qua các yếu tố vô dụng trên trang web là một kỹ năng mà một số người không có, và tôi không biết phải dạy điều đó như thế nào
Tôi luôn nghĩ tới chuyện này mỗi khi giúp người không có kiến thức nền sử dụng web. Có người dùng dù mục đầu tiên trên trang ghi đúng nguyên văn là “Please enable notifications” thì vẫn cân nhắc nó rất cẩn thận trước cả khi nhìn đến mục thứ hai
Giờ ngay cả Google Search cũng hiển thị mấy màn hình đầy rác trước khi đến kết quả thật, nên chuyện này càng đúng hơn
Một vấn đề liên quan là có những người không hiểu địa vị nhận thức luận của các loại văn bản khác nhau trong trang
Ví dụ, có người nhìn vào liên kết có thể nhấp “I forgot my password” và tin rằng đó không phải là chỗ để bấm khi họ quên mật khẩu, mà là một câu thông báo rằng họ đã quên mật khẩu
Tất nhiên, cái chết của sự chuẩn hóa UI khiến vấn đề này tệ hơn rất nhiều
https://mstdn.io/@mattskala/113188291223682980
Tôi nhớ thời Microsoft loại bỏ rất nhiều nút trong UI và thay chúng bằng các liên kết văn bản tô màu mơ hồ. Sau đó việc biết phải bấm vào đâu trở nên khó hơn hẳn
Người dùng thích nghi với máy móc bằng trực giác, còn nhà phát triển thích nghi với người dùng, tạo thành một vòng phản hồi
Nói cách khác, rất có thể chính vì đã có vô số website và ứng dụng dùng liên kết “I forgot my password” mà ý nghĩa của ngôn ngữ cũng thay đổi theo
Ít nhất trong ngữ cảnh đó, đa số mọi người sẽ thích nghi để hiểu được ý định
Thế hệ trẻ không biết cách khác có khi còn chẳng thấy đó là điều đáng bận tâm
Vì vậy dù tách riêng ra thì quy ước có thể vô lý, việc duy trì quy ước vẫn có giá trị
Nếu tất cả ví dụ đều nhất quán với giả định là thật sự tải xuống “Amaya”, thì chỉ cần siêu liên kết Download Amaya sẽ tốt hơn
Nếu có thể, cũng nên có biểu tượng tải xuống để cho thấy đó là đường dẫn tới tệp thật
Vì như vậy có thể biết đó không phải là một nút tải xuống giả dẫn sang trang khác, bị giấu giữa 4 quảng cáo
Dragan Espenschied (despens) đã viết một bài năm 2022 về việc văn bản liên kết đã thay đổi theo thời gian như thế nào: https://despens.systems/2022/06/button-pushes-you/
Ông chỉ ra sự chuyển dịch từ các câu kêu gọi hành động sang văn bản trên nút mô tả chính người dùng
Đại ý là: “Thay vào đó, chúng phải tái cấu trúc trạng thái của người dùng. Người dùng phải chấp nhận câu thần chú được viết ra và thay đổi thái độ của mình trước khi tiếp cận thông tin tiếp theo”
“Get Amaya.”, “Tell me more about Amaya.” trông không được tao nhã lắm