Về cơ bản, một liên kết kết nối hai tài nguyên Web. Nó có hai đầu với một hướng rõ ràng - nguồn và đích. Liên kết thường được sử dụng để đưa người dùng từ trang Web này sang trang Web khác hoặc từ vị trí này trong trang này sang vị trí khác trong cùng một trang
Một liên kết đơn giản
Mã nguồn
NC State University
Thực hiện
Đại học bang NC
Vấn đề với các liên kết bắt đầu khi các nhà phát triển bắt đầu tận dụng chức năng của các liên kết cho các mục đích thay thế. Liên kết cung cấp một số tiện ích tốt đẹp
- Nhấp vào một liên kết làm cho một số hành động khác xảy ra
- Chuột thường thay đổi hình dạng khi di chuột qua chúng, cho người dùng biết rằng liên kết đang thực hiện điều gì đó
- Chúng tự động theo thứ tự tab, vì vậy người dùng có thể sử dụng bàn phím để tab tới chúng
Ví dụ phổ biến nhất về việc sử dụng liên kết cho các mục đích khác là sử dụng JavaScript để thực hiện một số loại hành động khi liên kết được nhấp vào. Những gì chúng tôi với tư cách là nhà phát triển thực sự muốn là điều này
Không sử dụng neo với sự kiện title mà không có sự kiện phần tử href
Mã nguồn
Do something
Đây là những vấn đề với việc thực hiện này
- Nó có thể khiến trang cuộn trở lại đầu trang
- Nó thêm một mục vào lịch sử trình duyệt, do đó, cần thêm một lần nhấp vào nút quay lại để chuyển đến trang trước
- Nếu người dùng đã tắt JavaScript, sẽ không có gì xảy ra
- Đối với người dùng trình đọc màn hình, họ nghe thấy rằng đây là một “liên kết” và họ có thể cho rằng việc nhấp vào liên kết đó sẽ thực hiện công việc của tất cả các liên kết – đưa họ đến một trang mới
Thực hiện
Làm việc gì đó
Không sử dụng JavaScript cho thuộc tính href
Trong trường hợp này, một hành động javascript được kích hoạt khi liên kết được nhấp thay cho việc đưa người dùng đến một vị trí mới
Mã nguồn
Do something
Đây là những vấn đề với việc thực hiện này
- Nếu người dùng đã tắt JavaScript, sẽ không có gì xảy ra
- Đối với người dùng trình đọc màn hình, họ nghe nói rằng đây là một “liên kết” và họ có thể cho rằng việc nhấp vào liên kết đó sẽ thực hiện công việc của tất cả các liên kết – nó sẽ đưa họ đến một trang mới
Thực hiện
Làm việc gì đó
Không sử dụng JavaScript void cho thuộc tính href và JavaScript cho sự kiện title
Trong trường hợp này, hành vi của thuộc tính href bị ghi đè và thay vào đó, một sự kiện title kích hoạt một số JavaScript
Việc thực hiện này giáp với hài hước. Phần tử neo được chọn vì nó sẽ thực hiện một hành động khi được nhấp vào. Sau đó, khả năng thực hiện một hành động của neo khi được nhấp vào sẽ bị ghi đè. Thay cho hành vi mặc định của nó, một chức năng mới được thêm vào để một lần nữa làm cho mỏ neo thực hiện một hành động khi được nhấp vào
Mã nguồn
Do something
Đây là những vấn đề với việc thực hiện này
- Nếu người dùng đã tắt JavaScript, sẽ không có gì xảy ra
- Đối với người dùng trình đọc màn hình, họ nghe thấy rằng đây là một “liên kết” và họ có thể cho rằng việc nhấp vào liên kết đó sẽ thực hiện công việc của tất cả các liên kết – đưa họ đến một trang mới
Thực hiện
Làm việc gì đó
Khi nào một liên kết không phải là một liên kết?
Nếu bạn muốn người dùng nhấp vào một mục trong một trang và thực hiện một số hành động thông qua JavaScript trong cùng một trang, thì một nút là lựa chọn tốt nhất của bạn
Các nút có JavaScript
Mã nguồn
Thực hiện
Các nút kiểu CSS với JavaScript
Phiên bản này giống với phiên bản trước ngoại trừ việc nó sử dụng CSS để tùy chỉnh nút
Mã nguồn
Thực hiện
Sử dụng nâng cao lũy tiến để thay đổi liên kết thành nút
Phiên bản này thể hiện sự cải tiến liên tục, thử nghiệm để xem trình duyệt có những khả năng gì và sau đó cung cấp mã mà trình duyệt có thể xử lý
Trong trường hợp này, nó bắt đầu bằng một liên kết cơ bản đưa bạn đến một trang khác nơi chức năng diễn ra. Nếu trình duyệt đã bật JavaScript, nó sẽ thay đổi liên kết thành nút và hành vi thành hành động trên cùng một trang. Việc triển khai này giải quyết vấn đề khi người dùng không bật JavaScript