Có OK để có một thẻ neo rỗng không?

Question

Tôi biết rằng tôi có thể làm như sau nếu tôi muốn chuyển một hình ảnh vào một liên kết nhấp thể:

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a> 

Nhưng tôi muốn sử dụng một hình ảnh nền CSS để tôi có thể có một trạng thái hover:

<a class="twitter" href="http://twitter.com/username"></a> 

# css 
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")} 

này hoạt động tốt, ngoại trừ tôi không chắc chắn đó là hoàn toàn hợp lệ để có một liên kết anchor có chứa gì. Chrome làm cho nó tốt, cũng như FF, nhưng tôi không chắc chắn nếu những người khác là như nhau.

Tôi nhận ra rằng tôi chỉ có thể đặt một số văn bản bên trong liên kết và ẩn nó bằng text-indent: -9999px, nhưng tôi chưa bao giờ thích cách tiếp cận đó, cho variousreasons. Mã của tôi có tương thích với trình duyệt chéo không?

Answer 1

Đó là hợp lệ, nhưng tốt nhất nếu bạn đã đặt một cái gì đó ở đó và sử dụng cái gì đó như

font-size: 0; 

để ẩn nó đi. Bằng cách này, nếu ai đó không có CSS ​​(ví dụ như trình đọc màn hình), anh ta vẫn có thể biết được liên kết là gì.

Here's a great article on the subject

Answer 2

Nó là hoàn toàn hợp lệ, nhưng nếu bạn muốn, bạn có thể đặt một khoảng trống bên trong: &nbsp;

Answer 3

Nó không phải là OK ở tất cả, vì nó phá vỡ nguyên tắc tiếp cận cơ bản. Không có cách nào để chỉ định văn bản thay thế cho hình nền, giống như cách bạn có thể và nên chỉ định nó bằng cách sử dụng thuộc tính alt trong thẻ img cho hình ảnh nội dung. Xem WCAG 2.0 Guideline 1.1.

Nếu bạn muốn thay đổi hình ảnh khi di chuột qua, có các kỹ thuật CSS và JavaScript cho điều đó.

Answer 4

Sử dụng & nbsp; như văn bản, và bạn tốt.

Answer 5

Tại Markup.tips, gần đây chúng tôi đã thực hiện một số thử nghiệm trợ năng trong iOS 8 và phát hiện ra rằng VoiceOver sẽ không điều hướng đến các liên kết trống. Phải có ít nhất là một không gian không phá vỡ. Cho dù điều này có nên được coi là một lỗi iOS hay không, chúng tôi không chắc chắn.