Chủ đề về việc vô hiệu hóa các liên kết đã xuất hiện tại nơi làm việc của tôi vào một ngày khác. Bằng cách nào đó, một kiểu neo “bị vô hiệu hóa” đã được thêm vào kiểu chữ của chúng tôi vào năm ngoái khi tôi không tìm kiếm. Tuy nhiên đang có một vấn đề. không có cách thực sự nào để vô hiệu hóa liên kết
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
2 [với thuộc tính a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
3 hợp lệ] trong HTML. Chưa kể, tại sao bạn thậm chí muốn? Tại một thời điểm nhất định, có vẻ như đồng nghiệp của tôi sẽ không chấp nhận sự thật này, vì vậy tôi bắt đầu nghĩ cách thực hiện điều này. Biết rằng sẽ mất rất nhiều công sức, tôi muốn chứng minh rằng không đáng để bỏ công sức và viết mã để hỗ trợ một tương tác độc đáo như vậy, nhưng tôi sợ rằng bằng cách cho thấy điều đó có thể thực hiện được, họ sẽ bỏ qua tất cả các cảnh báo của tôi và chỉ sử dụng ví dụ của tôi làm ví dụ. . Điều này vẫn chưa hoàn toàn rõ ràng đối với tôi, nhưng tôi nghĩ rằng chúng ta có thể xem xét nghiên cứu của mình
Đầu tiên, những thứ đầu tiên
Chỉ cần không làm điều đó
Một liên kết bị vô hiệu hóa không phải là một liên kết, nó chỉ là văn bản. Bạn cần suy nghĩ lại về thiết kế của mình nếu nó yêu cầu vô hiệu hóa một liên kết
Bootstrap có các ví dụ về việc áp dụng lớp
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
4 cho các thẻ neo và tôi ghét chúng vì điều đó. Ít nhất họ đề cập rằng lớp chỉ cung cấp một kiểu bị vô hiệu hóa, nhưng điều này gây hiểu nhầm. Bạn cần phải làm nhiều hơn là chỉ làm cho một liên kết có vẻ như bị vô hiệu hóa nếu bạn thực sự muốn vô hiệu hóa nócách chắc chắn. xóa href
Nếu bạn đã quyết định rằng bạn sẽ phớt lờ cảnh báo của tôi và tiến hành vô hiệu hóa một liên kết, thì việc xóa thuộc tính
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
3 là cách tốt nhất mà tôi biết.Trực tiếp từ chính thức
Thuộc tính
3 trên các phần tửa { /* Disabled link styles */ } a:link, a:visited { /* or a[href] */ /* Enabled link styles */ }
7 vàa { /* Disabled link styles */ } a:link, a:visited { /* or a[href] */ /* Enabled link styles */ }
8 là không bắt buộc;a { /* Disabled link styles */ } a:link, a:visited { /* or a[href] */ /* Enabled link styles */ }
Một định nghĩa dễ hiểu hơn từ MDN
Thuộc tính này có thể được bỏ qua [kể từ HTML5] để tạo liên kết giữ chỗ. Liên kết giữ chỗ giống như siêu liên kết truyền thống, nhưng không dẫn đến đâu cả
Đây là mã JavaScript cơ bản để đặt và xóa thuộc tính
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
3/*
* Use your preferred method of targeting a link
*
* document.getElementById['MyLink'];
* document.querySelector['.link-class'];
* document.querySelector['[href="//unfetteredthoughts.net"]'];
*/
// "Disable" link by removing the href property
link.href = '';
// Enable link by setting the href property
link.href = '//unfetteredthoughts.net';
Tạo kiểu này thông qua CSS cũng khá đơn giản
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
Đó là tất cả những gì bạn cần làm
Như thế vẫn chưa đủ, tôi muốn thứ gì đó phức tạp hơn để trông thông minh hơn
Nếu bạn hoàn toàn phải thiết kế quá mức một số giải pháp cực đoan, đây là một số điều cần xem xét. Hy vọng rằng bạn sẽ chú ý và nhận ra rằng những gì tôi sắp cho bạn thấy là không đáng để bạn nỗ lực.
Trước tiên, chúng ta cần tạo kiểu cho liên kết của mình để liên kết có vẻ như bị vô hiệu hóa
.isDisabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
Disabled Link
Disabled Link1 sẽ ghi đè con trỏ .isDisabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
3 đẹp mắt của chúng tôi, vì vậy giờ đây, người dùng chuột sẽ không nhận được thêm dấu hiệu trực quan rằng liên kết đã bị vô hiệu hóa. Điều này đã bắt đầu sụp đổ. Bây giờ chúng ta phải thay đổi đánh dấu và CSS….isDisabled {
cursor: not-allowed;
opacity: 0.5;
}
.isDisabled > a {
color: currentColor;
display: inline-block; /* For IE11/ MS Edge bug */
pointer-events: none;
text-decoration: none;
}
Disabled Link
Gói liên kết trong một
Disabled Link
3_______12_______4Disabled Link
5 và thêm lớp Disabled Link
6 mang lại cho chúng tôi một nửa phong cách hình ảnh khuyết tật của chúng tôi. Một tác dụng phụ thú vị ở đây là lớp bị vô hiệu hóa hiện là chung chung và có thể được sử dụng trên các phần tử khác, như các nút và phần tử biểu mẫu. Thẻ neo thực tế hiện có .isDisabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
4 và Disabled Link
8 được đặt thành Disabled Link
1Còn người dùng bàn phím thì sao? .
.isDisabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
4 chỉ dành cho con trỏ, không có sự kiện bàn phím. Chúng tôi cũng cần ngăn kích hoạt các trình duyệt cũ hơn không hỗ trợ .isDisabled {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
4. Bây giờ chúng ta phải giới thiệu một số JavaScriptĐưa vào JavaScript
// After using preferred method to target link
link.addEventListener['click', function [event] {
if [this.parentElement.classList.contains['isDisabled']] {
event.preventDefault[];
}
}];
Hiện tại, liên kết của chúng tôi có vẻ đã bị vô hiệu hóa và không phản hồi kích hoạt thông qua các lần nhấp, chạm và phím
.isDisabled {
...
pointer-events: none;
}
0. Nhưng chúng ta vẫn chưa xong. Người dùng trình đọc màn hình không có cách nào biết rằng liên kết này đã bị tắt. Chúng tôi cần mô tả liên kết này là bị vô hiệu hóa. Thuộc tính .isDisabled {
...
pointer-events: none;
}
4 không hợp lệ trên các liên kết, nhưng chúng tôi có thể sử dụng .isDisabled {
...
pointer-events: none;
}
5Disabled Link
Bây giờ tôi sẽ nhân cơ hội này để tạo kiểu cho liên kết dựa trên thuộc tính
.isDisabled {
...
pointer-events: none;
}
6. Tôi thích sử dụng các thuộc tính ARIA làm móc nối cho CSS vì các phần tử có kiểu dáng không phù hợp là dấu hiệu cho thấy khả năng truy cập quan trọng bị thiếu.isDisabled {
cursor: not-allowed;
opacity: 0.5;
}
a[aria-disabled="true"] {
color: currentColor;
display: inline-block; /* For IE11/ MS Edge bug */
pointer-events: none;
text-decoration: none;
}
Bây giờ các liên kết của chúng tôi có vẻ bị vô hiệu hóa, hành động bị vô hiệu hóa và được mô tả là bị vô hiệu hóa
Thật không may, ngay cả khi liên kết được mô tả là bị vô hiệu hóa, một số trình đọc màn hình [JAWS] vẫn sẽ thông báo liên kết này là có thể nhấp được. Nó làm điều đó cho bất kỳ phần tử nào có trình nghe nhấp chuột. Điều này là do nhà phát triển có xu hướng tạo các phần tử không tương tác như
.isDisabled {
...
pointer-events: none;
}
7 và Disabled Link
4 dưới dạng các phần tử giả tương tác với một trình nghe đơn giản. Không có gì chúng ta có thể làm về điều đó ở đây. Mọi thứ chúng tôi đã làm để xóa bất kỳ dấu hiệu nào cho thấy đây là một liên kết đều bị phá vỡ bởi công nghệ hỗ trợ mà chúng tôi đang cố đánh lừa, trớ trêu thay vì chúng tôi đã cố đánh lừa nó trước đâyNhưng nếu chúng ta di chuyển người nghe đến cơ thể thì sao?
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
0Chúng ta xong chưa? . Tại một số điểm, chúng tôi sẽ cần kích hoạt các liên kết này, vì vậy chúng tôi cần thêm mã bổ sung sẽ chuyển đổi trạng thái/hành vi này
a {
/* Disabled link styles */
}
a:link, a:visited { /* or a[href] */
/* Enabled link styles */
}
1Đó là nó. Hiện tại, chúng tôi có một liên kết bị vô hiệu hóa về mặt trực quan, chức năng và ngữ nghĩa đối với tất cả người dùng. Chỉ mất 10 dòng CSS, 15 dòng JavaScript [bao gồm 1 trình nghe trên phần thân] và 2 phần tử HTML