CSS thuộc tính hình ảnh nền alt

Đây là một trong những điều tôi chưa từng phải giải quyết trước đây. Tôi cần sử dụng thẻ alt trên tất cả các hình ảnh trong một trang web, kể cả những thẻ được sử dụng bởi thuộc tính hình ảnh nền CSS.

Theo như tôi biết thì không có thuộc tính CSS nào, vậy cách tốt nhất để làm điều này là gì?

Hình nền chắc chắn có thể trình bày dữ liệu! Trong thực tế, điều này thường được khuyến nghị khi trình bày các biểu tượng trực quan nhỏ gọn và thân thiện hơn so với một danh sách mờ văn bản tương đương. Bất kỳ việc sử dụng các họa tiết hình ảnh có thể được hưởng lợi từ phương pháp này.

Nó là khá phổ biến cho các biểu tượng danh sách khách sạn để hiển thị tiện nghi. Hãy tưởng tượng một trang liệt kê 50 khách sạn và mỗi khách sạn có 10 tiện nghi. CSS Sprite sẽ hoàn hảo cho loại điều này - trải nghiệm người dùng tốt hơn vì nó nhanh hơn. Nhưng làm thế nào để bạn thực hiện các thẻ ALT cho những hình ảnh này? Trang web ví dụ .

Câu trả lời là họ hoàn toàn không sử dụng altvăn bản mà thay vào đó sử dụng titlethuộc tính trên div chứa.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

Theo W3C (xem các liên kết ở trên), thuộc tính title phục vụ nhiều mục đích giống như thuộc tính alt

Tiêu đề

Giá trị của thuộc tính tiêu đề có thể được đưa ra bởi các tác nhân người dùng theo nhiều cách khác nhau. Chẳng hạn, các trình duyệt trực quan thường hiển thị tiêu đề dưới dạng "mẹo công cụ" (một thông báo ngắn xuất hiện khi thiết bị trỏ tạm dừng trên một đối tượng). Tác nhân người dùng âm thanh có thể nói thông tin tiêu đề trong một bối cảnh tương tự. Ví dụ: đặt thuộc tính trên một liên kết cho phép các tác nhân người dùng (trực quan và không trực quan) cho người dùng biết về bản chất của tài nguyên được liên kết:

alt

Thuộc tính alt được xác định trong một tập hợp các thẻ (cụ thể là img, khu vực và tùy chọn cho đầu vào và applet) để cho phép bạn cung cấp một văn bản tương đương cho đối tượng.

Một văn bản tương đương mang lại những lợi ích sau cho trang web của bạn và khách truy cập của nó trong các tình huống phổ biến sau:

• ngày nay, các trình duyệt Web có sẵn trong rất nhiều nền tảng với các khả năng rất khác nhau; một số không thể hiển thị hình ảnh ở tất cả hoặc chỉ một bộ hình ảnh hạn chế; một số có thể được cấu hình để không tải hình ảnh. Nếu mã của bạn có thuộc tính alt được đặt trong hình ảnh của nó, hầu hết các trình duyệt này sẽ hiển thị mô tả bạn đã đưa ra thay vì hình ảnh
• một số khách truy cập của bạn không thể nhìn thấy hình ảnh, có thể bị mù, mù màu, nhìn kém; thuộc tính alt giúp ích rất nhiều cho những người có thể dựa vào đó để có ý tưởng hay về những gì trên trang của bạn
• bot công cụ tìm kiếm thuộc hai loại trên: nếu bạn muốn trang web của mình được lập chỉ mục cũng như nó xứng đáng, hãy sử dụng thuộc tính alt để đảm bảo rằng chúng sẽ không bỏ lỡ các phần quan trọng của trang của bạn.

Trong bài viết này của Yahoo Developer Network ( liên kết lưu trữ ), bạn nên sử dụng một hình nền thay vì phần tử img và thuộc tính alt, sử dụng các thuộc tính ARIA như sau:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Trường hợp sử dụng trong bài viết mô tả cách Flickr chọn sử dụng hình nền vì hiệu suất được cải thiện rất nhiều trên thiết bị di động.

Tôi nghĩ bạn nên đọc bài viết này của Christian Heilmann. Ông giải thích rằng hình ảnh nền chỉ dành cho tính thẩm mỹ và không nên được sử dụng để trình bày dữ liệu và do đó được miễn quy định rằng mọi hình ảnh nên có văn bản thay thế.

Đoạn trích (nhấn mạnh của tôi):

Hình nền CSS theo định nghĩa chỉ có giá trị thẩm mỹ - không phải nội dung trực quan của chính tài liệu . Nếu bạn cần đặt một hình ảnh trong trang có ý nghĩa thì hãy sử dụng một yếu tố IMG và cung cấp cho nó một văn bản thay thế trong thuộc tính alt.

Tôi đồng ý với anh ấy.

Như đã đề cập trong các câu trả lời khác, không có thuộc tính alt (được hỗ trợ) cho thẻ div chỉ dành cho thẻ img.

Câu hỏi thực sự là tại sao bạn cần thêm thuộc tính alt cho tất cả các hình nền cho trang web? Dựa trên câu trả lời này, nó sẽ giúp bạn xác định tuyến đường nào sẽ đi theo cách tiếp cận của bạn.

Trực quan / Văn bản: Nếu bạn chỉ đơn giản là cố gắng thêm một văn bản rơi lại cho người dùng nếu hình ảnh không tải được, chỉ cần sử dụng thuộc tính tiêu đề. Hầu hết các trình duyệt sẽ cung cấp một mẹo công cụ trực quan (hộp thông báo) khi người dùng di chuyển qua hình ảnh và nếu hình ảnh không được tải vì bất kỳ lý do gì, nó hoạt động giống như một thuộc tính alt trình bày văn bản khi hình ảnh bị lỗi. Kỹ thuật này vẫn cho phép trang web tăng tốc thời gian tải bằng cách giữ hình ảnh được đặt thành nền.

Trình đọc màn hình: Tùy chọn giữa đường, tùy chọn này thay đổi vì về mặt kỹ thuật giữ hình ảnh của bạn làm nền và sử dụng phương pháp tiếp cận thuộc tính tiêu đề sẽ hoạt động như gợi ý ở trên, "Tác nhân người dùng âm thanh có thể nói thông tin tiêu đề trong ngữ cảnh tương tự." Tuy nhiên, điều này không được đảm bảo để hoạt động trong mọi trường hợp, kể cả một số độc giả có thể bỏ qua tất cả cùng nhau. Nếu bạn cuối cùng chọn cách tiếp cận này, bạn cũng có thể thử thêm nhãn aria để giúp đảm bảo trình đọc màn hình chọn những cách tiếp cận này.

Công cụ SEO / Tìm kiếm: Đây là một công cụ lớn, nếu bạn giống như tôi, bạn đã thêm hình ảnh nền của mình, tất cả đều tốt. Sau đó nhiều tháng, khách hàng (hoặc có thể là chính bạn) nhận ra rằng bạn đang bỏ lỡ một số vàng SEO chính bằng cách không có alt cho hình ảnh của bạn. Hãy nhớ rằng, thuộc tính tiêu đề không có bất kỳ trọng lượng nào trên các công cụ tìm kiếm , từ nghiên cứu của tôi và như được đề cập trong một bài viết ở đây: https://www.searchenginejournal.com/how-to-use-link-title-attribution-c chính xác /. Vì vậy, nếu bạn đang nhắm đến SEO, thì bạn sẽ cần phải có thẻ img với thuộc tính alt. Một cách tiếp cận khả thi là chỉ cần tải hình ảnh thực tế rất nhỏ trên trang web với các thuộc tính alt, bằng cách này bạn có được tất cả SEO và không phải điều chỉnh lại CSS hiện có. Tuy nhiên, điều này có thể dẫn đến thời gian tải bổ sung tùy thuộc vào kích thước và google thực sự nhìn vào đường dẫn hình ảnh khi lập chỉ mục. Nói tóm lại, nếu bạn đang đi theo con đường này, chỉ cần chấp nhận những gì phải làm và bao gồm các hình ảnh thực tế thay vì sử dụng hình nền.

Quan điểm chung là bạn không nên sử dụng hình nền cho những thứ có giá trị ngữ nghĩa có ý nghĩa vì vậy thực sự không có cách nào thích hợp để lưu trữ dữ liệu alt với những hình ảnh đó. Câu hỏi quan trọng là bạn sẽ làm gì với dữ liệu alt đó? Bạn có muốn nó hiển thị nếu hình ảnh không tải? Bạn có cần nó cho một số chức năng lập trình trên trang? Bạn có thể lưu trữ dữ liệu một cách tùy tiện bằng cách sử dụng các thuộc tính css không có ý nghĩa (có thể gây ra lỗi?) HOẶC bằng cách thêm vào các hình ảnh ẩn có hình ảnh và thẻ alt, sau đó khi bạn cần một hình ảnh nền alt, bạn có thể so sánh hình ảnh đường dẫn và sau đó xử lý dữ liệu theo cách bạn muốn bằng cách sử dụng một số tập lệnh tùy chỉnh để mô phỏng những gì bạn cần. Không có cách nào tôi biết để làm cho trình duyệt tự động xử lý một số loại thuộc tính alt cho hình ảnh nền.

Cách cổ điển để đạt được điều này là đưa văn bản vào div và sử dụng kỹ thuật thay thế hình ảnh.

<div class"ir background-image">Your alt text</div>

với hình nền tạo ra lớp trong đó bạn gán hình nền và ir có thể là lớp thay thế hình ảnh HTML5boilersheet, bên dưới:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

Bài viết này từ W3C cho bạn biết những gì họ nghĩ bạn nên làm https://www.w3.org/WAI/GL/wiki/ARIATechnique_USEImgRole_with_aria-label_forCSS-backgroundImage

và có ví dụ ở đây http://mars.dequecloud.com/demo/ImgRole.htm

trong đó

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Tuy nhiên, nếu như trong ví dụ trên, phần tử chứa ảnh nền chỉ là một thùng chứa trống, cá nhân tôi thích đặt văn bản vào đó và ẩn nó bằng CSS; ngay tại nơi bạn hiển thị hình ảnh thay thế:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Đây là giải pháp của tôi cho loại vấn đề này:

Tạo một lớp mới trong CSS và định vị màn hình. Sau đó đặt văn bản thay thế của bạn trong HTML ngay trước thuộc tính gọi hình nền của bạn. Có thể là bất kỳ thẻ, H1, H2, pvv

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Nó không rõ ràng với tôi những gì bạn muốn.

Nếu bạn muốn một thuộc tính CSS hiển thị giá trị thuộc tính alt, thì có lẽ bạn đang tìm kiếm chức năng thuộc tính CSS chẳng hạn:

IMG:before { content: attr(alt) }

Nếu bạn muốn đặt thuộc tính alt trên hình nền, thì ... thật lạ vì thuộc tính alt là thuộc tính HTML trong khi hình nền là thuộc tính CSS. Nếu bạn muốn sử dụng thuộc tính alt HTML thì tôi nghĩ bạn cần một yếu tố HTML tương ứng để đưa nó vào.

Tại sao bạn "cần sử dụng thẻ alt trên ảnh nền": đây là vì lý do ngữ nghĩa hoặc vì lý do hiệu ứng hình ảnh nào đó (và nếu vậy, thì hiệu ứng hay lý do gì)?

Bạn có thể đạt được điều này bằng cách đặt altthẻ vào divhình ảnh của bạn sẽ xuất hiện.

Thí dụ:

<div id="yourImage" alt="nameOfImage"></div>