HTML5Boilerplate và Image Alternative Class text-indent -999em

Question

Tôi đã sử dụng HTML5Boilerplate cho hầu hết các dự án của mình, vì nó là một khung công tác tuyệt vời nhưng tôi và nhà phát triển khác đã đi qua lại về lớp thay thế hình ảnh và sử dụng văn bản thụt lề: -999em.

Ông đã gửi cho tôi hai liên kết sau đây:

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

http://www.youtube.com/watch?v=fBLvn_WkDJ4

Tôi biết đội HTML5Boilerplate đã làm rất nhiều nghiên cứu khi họ cùng nhau đưa các kiểu, và tôi biết điều đó là một kỹ thuật chung mà rất nhiều nhà phát triển sử dụng. Các bạn nghĩ gì về nó? Tôi có nên bắt đầu sử dụng một kỹ thuật khác để các trang web của chúng tôi không bị phạt hoặc có chấp nhận sử dụng nó không?

Cảm ơn!

Answer 1

Cả hai của những liên kết tham khảo đặc biệt để Logos, nơi con đường ngữ nghĩa nhất là thêm logo như một thẻ hình ảnh với một thuộc tính alt:

<img src="/path/to/logo.png" alt="Foo bar baz! The best way to fizz buzz" /> 

Những gì họ không bao gồm những trường hợp nơi bạn có thể muốn sử dụng hình ảnh cũ thay thế đồng bằng. Khi nhúng phông chữ đang trở nên phổ biến hơn và được hỗ trợ, thay thế hình ảnh ít vấn đề hơn vì nó ít phổ biến hơn, tuy nhiên, vẫn còn nhiều trường hợp khi cách duy nhất là sử dụng hình ảnh thay thế.

Điều này đặc biệt phổ biến trên các tiêu đề vì các nghệ sĩ có xu hướng muốn phát triển thịnh vượng.

Nếu có thể, hãy sử dụng hình ảnh nội tuyến có thuộc tính alt, vì đó là cách ngữ nghĩa nhất để hiển thị nó. Việc nắm bắt là bạn có thể hoặc có thể không có quyền truy cập trực tiếp vào đánh dấu nếu bạn đang sử dụng CMS, vì vậy trong nhiều trường hợp, cách thoát ra là sử dụng thay thế hình ảnh CSS hoặc JS.

Nếu bạn phải sử dụng CSS, đừng lo lắng quá nhiều về text-indent: -9999px;. Thay thế hợp pháp sẽ không khiến bạn bị đưa vào danh sách đen từ Google, chỉ cần không cố gắng chơi trò chơi trên hệ thống bằng cách cố gắng ẩn nội dung khỏi người dùng chỉ hiển thị với Google.