Atrybut alt obrazu tła CSS

To jest ten, z którym wcześniej nie musiałem się zmierzyć. Muszę używać tagów alt na wszystkich obrazach w witrynie, w tym tych używanych przez atrybut CSS background-image.

O ile wiem, nie ma takiej właściwości CSS, więc jaki jest najlepszy sposób na zrobienie tego?

Obrazy tła z pewnością mogą przedstawiać dane! W rzeczywistości jest to często zalecane, gdy prezentacja ikon wizualnych jest bardziej zwarta i przyjazna dla użytkownika niż równoważna lista notatek tekstowych. Takie podejście może przynieść korzyści przy każdym użyciu obrazków .

Często zdarza się, że ikony ofert hoteli wyświetlają udogodnienia. Wyobraź sobie stronę, na której wymieniono 50 hoteli i każdy hotel miał 10 udogodnień. Sprite CSS byłby idealny do tego rodzaju rzeczy - lepsze wrażenia użytkownika, ponieważ jest szybszy. Ale jak zaimplementować tagi ALT dla tych obrazów? Przykładowa witryna .

Odpowiedź jest taka, że ​​w ogóle nie używają alttekstu, ale zamiast tego używają titleatrybutu na zawierającym element div.

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;
}

Zgodnie z W3C (patrz linki powyżej), atrybut tytułu służy temu samemu celowi, co atrybut alt

Tytuł

Wartości atrybutu tytułu mogą być renderowane przez programy użytkownika na różne sposoby. Na przykład przeglądarki wizualne często wyświetlają tytuł jako „wskazówkę” (krótki komunikat, który pojawia się, gdy urządzenie wskazujące zatrzyma się nad obiektem). Programy użytkownika audio mogą wypowiadać informacje o tytule w podobnym kontekście. Na przykład ustawienie atrybutu w łączu umożliwia agentom użytkownika (wizualnym i niewizualnym) poinformowanie użytkowników o naturze połączonego zasobu:

alt

Atrybut alt jest zdefiniowany w zestawie tagów (mianowicie img, area i opcjonalnie dla danych wejściowych i apletu), aby umożliwić Ci zapewnienie odpowiednika tekstowego dla obiektu.

Odpowiednik tekstowy przynosi następujące korzyści Twojej witrynie i jej odwiedzającym w następujących typowych sytuacjach:

• obecnie przeglądarki internetowe są dostępne na bardzo wielu różnych platformach i mają bardzo różne możliwości; niektóre w ogóle nie mogą wyświetlać obrazów lub tylko ograniczonego zestawu typów obrazów; niektóre można skonfigurować tak, aby nie ładowały obrazów. Jeśli twój kod ma ustawiony atrybut alt w swoich obrazach, większość tych przeglądarek wyświetli opis, który podałeś zamiast obrazów
• niektórzy z twoich gości nie widzą obrazów, czy to niewidomi, daltoniści, niedowidzący; atrybut alt jest bardzo pomocny dla osób, które mogą na nim polegać, aby zorientować się, co jest na Twojej stronie
• boty wyszukiwarek należą do dwóch powyższych kategorii: jeśli chcesz, aby Twoja witryna była indeksowana tak dobrze, jak na to zasługuje, użyj atrybutu alt, aby upewnić się, że nie przegapią ważnych sekcji Twoich stron.

W tym artykule Yahoo Developer Network ( link zarchiwizowany ) sugeruje się, że jeśli bezwzględnie musisz użyć obrazu tła zamiast elementu img i atrybutu alt, użyj atrybutów ARIA w następujący sposób:

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

Przypadek użycia w artykule opisuje, w jaki sposób Flickr zdecydował się na użycie obrazów tła, ponieważ znacznie poprawiono wydajność na urządzeniach mobilnych.

Myślę, że powinieneś przeczytać ten post Christiana Heilmanna. Wyjaśnia, że ​​obrazy tła są TYLKO dla estetyki i nie powinny być używane do prezentowania danych, a zatem są wyłączone z zasady, że każdy obraz powinien mieć tekst zastępczy.

Fragment (moje podkreślenie):

Obrazy tła CSS, które z definicji mają jedynie wartość estetyczną, a nie wizualną zawartość samego dokumentu . Jeśli chcesz umieścić na stronie obraz, który ma znaczenie, użyj elementu IMG i nadaj mu alternatywny tekst w atrybucie alt.

Zgadzam się z nim.

Jak wspomniano w innych odpowiedziach, nie ma (obsługiwanego) atrybutu alt dla znacznika DIV tylko dla znacznika img.

Prawdziwe pytanie brzmi: dlaczego musisz dodać atrybut alt do wszystkich obrazów tła witryny? Opierając się na tej odpowiedzi, pomoże ci to określić, którą trasę obrać w swoim podejściu.

Wizualne / tekstowe: jeśli po prostu próbujesz dodać tekstową wartość zastępczą dla użytkownika, jeśli obraz się nie załaduje, po prostu użyj atrybutu tytułu. Większość przeglądarek zapewnia wizualną wskazówkę (okno komunikatu), gdy użytkownik najedzie kursorem na obraz, a jeśli obraz nie zostanie załadowany z jakiegokolwiek powodu, zachowuje się tak samo, jak atrybut alt prezentujący tekst, gdy obraz się nie powiedzie. Ta technika nadal pozwala witrynie przyspieszyć czas ładowania, zachowując obrazy ustawione na tło.

Czytniki ekranu: opcja w środku drogi, ta różni się, ponieważ technicznie utrzymywanie obrazów jako tła i stosowanie podejścia atrybutów tytułu powinno działać zgodnie z powyższą wskazówką: „Oprogramowanie użytkownika audio może wypowiadać informacje o tytule w podobnym kontekście”. Jednak nie gwarantuje to działania we wszystkich przypadkach, w tym niektórzy czytelnicy mogą to wszystko razem zignorować. Jeśli zdecydujesz się na takie podejście, możesz również spróbować dodać etykiety arii, aby upewnić się, że czytniki ekranu je wychwycą.

SEO / Wyszukiwarki: Oto duży, jeśli byłeś podobny do mnie, dodałeś obrazy tła, wszystko było dobrze. Kilka miesięcy później klient (a może Ty sam) zdał sobie sprawę, że tracisz część najlepszego złota SEO, ponieważ nie masz alternatyw dla swoich obrazów. Należy pamiętać, że atrybut tytułu nie ma żadnego znaczenia dla wyszukiwarek , z moich badań i jak wspomniano w artykule tutaj: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. Jeśli więc dążysz do SEO, musisz mieć tag img z atrybutem alt. Jednym z możliwych sposobów jest po prostu załadowanie bardzo małych rzeczywistych obrazów w witrynie z atrybutami alt, w ten sposób uzyskujesz całe SEO i nie musisz ponownie dostosowywać istniejącego CSS. Może to jednak prowadzić do dodatkowego czasu ładowania w zależności od rozmiaru, a Google rzeczywiście patrzy na ścieżkę obrazów podczas indeksowania. Krótko mówiąc, jeśli wybierasz się tą drogą, po prostu zaakceptuj to, co należy zrobić i dołącz rzeczywiste obrazy zamiast używać tła.

Ogólne przekonanie jest takie, że nie powinieneś używać obrazów tła dla rzeczy o znaczącej wartości semantycznej, więc tak naprawdę nie ma właściwego sposobu przechowywania danych alt z tymi obrazami. Ważne pytanie brzmi: co zamierzasz robić z tymi danymi alternatywnymi? Czy chcesz, aby był wyświetlany, jeśli obrazy się nie ładują? Czy potrzebujesz go do jakiejś automatycznej funkcji na stronie? Możesz przechowywać dane dowolnie, używając zmyślonych właściwości css, które nie mają znaczenia (mogą powodować błędy?) LUB dodając ukryte obrazy, które mają obraz i znacznik alt, a następnie, gdy potrzebujesz obrazów tła alt, możesz porównać obraz ścieżki, a następnie obsłuż dane w dowolny sposób, używając niestandardowego skryptu do symulacji potrzebnych. Nie ma sposobu, by przeglądarka automatycznie obsługiwała jakiś atrybut alt dla obrazów tła.

Klasycznym sposobem osiągnięcia tego jest umieszczenie tekstu w div i użycie techniki zastępowania obrazu.

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

z obrazem tła będącym klasą, do której przypisujesz obraz tła, a ir może być klasą zastępującą obraz HTML5boilerplates, poniżej:

/* ==========================================================================
   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%;
}

Ten artykuł z W3C mówi, co ich zdaniem powinieneś zrobić https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

i ma przykłady tutaj http://mars.dequecloud.com/demo/ImgRole.htm

pośród których

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

Jeśli jednak, tak jak w powyższym przykładzie, element zawierający obraz tła jest po prostu pustym kontenerem, ja osobiście wolę umieścić tam tekst i ukryć go za pomocą CSS; tam, gdzie zamiast tego pokazujesz obraz:

<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 */
}

Oto moje rozwiązanie tego typu problemu:

Utwórz nową klasę w CSS i umieść ją poza ekranem. Następnie umieść tekst alternatywny w kodzie HTML tuż przed właściwością, która wywołuje obraz tła. Może być dowolny znacznik, H1, H2, p, itd.

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>

Nie jest dla mnie jasne, czego chcesz.

Jeśli chcesz, aby właściwość CSS renderowała wartość atrybutu alt, być może szukasz na przykład funkcji atrybutu CSS :

IMG:before { content: attr(alt) }

Jeśli chcesz umieścić atrybut alt na obrazie tła, to ... to dziwne, ponieważ atrybut alt jest atrybutem HTML, podczas gdy obraz tła jest właściwością CSS. Jeśli chcesz użyć atrybutu alt HTML, to myślę, że potrzebujesz odpowiedniego elementu HTML, aby go umieścić.

Dlaczego „musisz używać tagów alt na obrazach tła”: czy to z powodów semantycznych, czy z jakiegoś powodu efektu wizualnego (a jeśli tak, to z jakiego powodu lub z jakiego powodu)?

Możesz to osiągnąć, umieszczając alttag w miejscu, w divktórym pojawi się twój obraz.

Przykład:

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