Znacznik HTML img: atrybut tytułu czy atrybut alt?


110

Przeglądałem Amazon i zauważyłem, że podczas wyszukiwania „ 1 TB ”, jeśli najedziesz kursorem myszy na obraz oceny w gwiazdkach, zobaczysz wynik tylko w przypadku korzystania z IE. Jeśli używasz innej przeglądarki, wynik nie zostanie wyświetlony.

Ocena 3,8 i ocena 4,2 są wyświetlane jako 4 gwiazdki. Oczywiście 3,8 gwiazdki w porównaniu z 4,2 gwiazdki (76% vs 84% ​​wynik) może mieć znaczenie!

Dzieje się tak, ponieważ standardowym sposobem wyświetlania alttekstu jest wyłączenie grafiki lub „odczytanie” przeglądarki (np. Przeglądarka dla osób niedowidzących). IE pokazuje go jednak po najechaniu kursorem.

Myślę więc, że jeśli Amazon ma to wyświetlać niezależnie od przeglądarki użytkownika, to titlepowinien być używany dodatkowo alt. Zgodziłbyś się?

Odpowiedzi:


64

Poszedłbym na oba. Tytuł pokaże ładną podpowiedź we wszystkich przeglądarkach, a alt poda opis podczas przeglądania w przeglądarce bez obrazów.

To powiedziawszy, chciałbym zobaczyć statystyki pokazujące, ilu „internautów” udaje się do „sklepu”, aby przeglądać towary, w rzeczywistości ma wyłączone obrazy lub korzysta z przeglądarki, która nie obsługuje obrazów. Myślę, że czasy, w których 90% populacji używa modemu 28k do łączenia się z InterWeb, już dawno się skończyły.


54
Korzystanie z alt nie polega tylko na tym, aby mieć coś do wyświetlenia, gdy obrazy są poddawane obróbce ze względu na przepustowość. Niektóre przeglądarki przeznaczone na przykład dla osób niedowidzących będą często używać alt.
AnthonyWJones

8
... ale: czasami obrazy się nie ładują; są też niewidoczne przeglądarki dla niewidomych; funkcje mowy w Safari czytaj stronę, w tym atrybuty alt z obrazów; optymalizacja wyszukiwarki; itp. wiele dobrych powodów, aby nie zakładać 100% wyświetlania obrazu.
jwl

2
@ Anthony, okrutny - zgodził się. Istnieją różne hmmm "skrajne przypadki", w których podanie alt jest bardzo pomocne (i nie sugeruję, aby go porzucać) - Jednak jeśli istnieje "znacząca informacja" do podania użytkownikowi w formie podpowiedzi, to z pewnością powinno być atrybutem tytułu - ponieważ po to służy. Kiedy mówię powyżej „skrajny przypadek”, uważam, że całkowity procent użytkowników korzystających z JAWS lub podobnych jest dość niski w porównaniu z przeglądarkami Firefox, Chrome, IE, Opera, Safari, Konqueror itd.
scunliffe

Tagi ALT są przyjazne dla SEO. Powinien być umieszczony tak samo, jak tytuły.
HelpNeeder

Jeśli jesteś niepełnosprawny i potrzebujesz czytnika ekranu, jestem pewien, że nie doceniłbyś, by nazywano go „skrajnym przypadkiem”.
Matt Fletcher,

164

Są używane do różnych rzeczy. altAtrybut jest używany zamiast obrazu. Jeśli obrazu nie można wyświetlić, a także w czytnikach ekranu.

titleAtrybut jest pokazane wraz z obrazem, typowo podpowiedzi najechania kursorem.

Jeden nie powinien być używany „zamiast” drugiego. Każdy powinien być właściwie używany , aby robić rzeczy, do których został zaprojektowany.


2
Zwróć uwagę, ponieważ atrybut alt HTML5 jest obowiązkowy. W niektórych krajach, jeśli robisz projekt dla instytucji państwowej, korzystanie z niego jest NIELEGALNE. Podczas gdy tytuł, jak stwierdził Jalf, to tylko „projekt”.
jave.web

2
I nie wierzę - wiem, że czytniki ekranu czytają alt zamiast obrazu.
jave.web

4
@ jave.web Specyfikacje HTML5 sugerują i wskazują wiele rzeczy na temat atrybutu alt w3.org/html/wg/drafts/html/master/ ... jednak nie posuwa się do stwierdzenia, że ​​jest on „obowiązkowy”. W szczególności, gdy obraz jest czysto dekoracją, wartość atrybutu alt w rzeczywistości nie jest oczekiwana.
scunliffe

1
@scunliffe nieużywający atrybutu alt w HTML5 oznacza, że ​​HTML5 jest nieprawidłowy. Jeśli obraz jest czysto dekoracji - nie powinien być stosowany jako <img>znacznik - należy użyć CSS stylu div zamiast;)
jave.web

5
@ jave.web czytasz więcej w specyfikacji, niż określono. Są one silnie sugerują, że to atrybut alt ale istnieją wyjątki w3.org/html/wg/drafts/html/master/... a nie sztywne egzekwowanie które są wymagane , aby mieć atrybut alt. Żadne miejsce w specyfikacji nie wskazuje, że jest to „obowiązkowe” lub „wymagane”. - w rzeczywistości wymieniają kilka przypadków, w których nie określono atrybutu alt lub celowo jest on pusty.
scunliffe

10

Alt i title służą do różnych rzeczy, jak już wspomniano. Chociaż atrybut tytułu zapewnia podpowiedź, alt jest również ważnym atrybutem, ponieważ określa tekst, który ma być wyświetlany, jeśli obraz nie może zostać wyświetlony. (W niektórych przeglądarkach, takich jak Firefox, zobaczysz również ten tekst podczas ładowania obrazu)

Kolejną kwestią, o której myślę, że powinienem być, jest to, że atrybut alt jest wymagany do walidacji jako dokument XHTML, podczas gdy atrybut tytułu jest po prostu „dodatkową opcją”.


7

Dzieje się tak, ponieważ służą one różnym celom i oba powinny być używane nie tylko jeden nad drugim.

„Alt” odnosi się do tego, co już powiedzieliście, więc możesz zobaczyć, o co chodzi w obrazie, jeśli obrazu nie można wyświetlić (z jakiegokolwiek powodu), a także pozwala osobom niedowidzącym zrozumieć, o czym jest obraz.

Atrybut „tytuł” ​​jest prawidłowym atrybutem do wyświetlania podpowiedzi z tytułem obrazu.


6

Moim zdaniem tekst alternatywny powinien zawsze opisywać to, co jest widoczne na obrazku, w przypadku, gdy obraz nie jest wyświetlany.

alt = tekst [CS] W przypadku programów klienckich, które nie mogą wyświetlać obrazów, formularzy lub apletów, ten atrybut określa tekst alternatywny. Język tekstu alternatywnego jest określony przez atrybut lang.

w3.org


3

Uważam, że alt jest wymagany do ścisłej zgodności z XHTML.

Jak zauważyli inni, tytuł dotyczy podpowiedzi (dobrze mieć), a alt oznacza dostępność. Nie ma nic złego w używaniu obu, ale alt zawsze powinien tam być.


1

Atrybut ALT jest przeznaczony dla użytkowników niedowidzących, którzy korzystaliby z czytnika ekranu. Jeśli w dowolnym tagu obrazu brakuje ALT, zostanie odczytany cały adres URL obrazu. Jeśli obrazy są częścią projektu witryny, nadal powinny mieć ALT, ale można je pozostawić puste, aby nie trzeba było czytać adresu URL w każdej części witryny.


1

Atrybut ALT

altAtrybut definiuje z zestawu znaczników (mianowicie img, areai ewentualnie do inputa applet), co pozwala, aby zapewnić równoważne tekstu dla obiektu.

Ekwiwalent tekstowy przynosi następujące korzyści Twojej witrynie internetowej 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
  • roboty 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 pominą one ważnych sekcji Twoich stron.

Atrybut tytułu

Celem tej techniki jest zapewnienie pomocy kontekstowej dla użytkowników podczas wprowadzania danych w formularzach poprzez dostarczanie informacji pomocy w titleatrybucie. Pomoc może zawierać informacje o formacie lub przykłady danych wejściowych.

Przykład 1: menu rozwijane, które ogranicza zakres
wyszukiwania Formularz wyszukiwania wykorzystuje menu rozwijane, aby ograniczyć zakres wyszukiwania. Menu rozwijane znajduje się bezpośrednio obok pola tekstowego używanego do wprowadzenia wyszukiwanego hasła. Relacja między polem wyszukiwania a menu rozwijanym jest jasna dla użytkowników, którzy widzą projekt wizualny, w którym nie ma miejsca na widoczną etykietę. titleAtrybut jest używany do identyfikacji selectmenu. titleAtrybut może być używany przez czytniki ekranu lub wyświetlane jako podpowiedzi dla osób korzystających z lupy ekranem.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Przykład 2: Pola wprowadzania numeru telefonu
Strona internetowa zawiera elementy sterujące do wprowadzania numeru telefonu w Stanach Zjednoczonych z trzema polami na numer kierunkowy, giełdę i cztery ostatnie cyfry.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Przykład 3: Funkcja wyszukiwania Strona internetowa zawiera pole tekstowe, w którym użytkownik może wprowadzić wyszukiwane terminy oraz przycisk oznaczony „Wyszukaj” w celu wykonania wyszukiwania. titleAtrybut jest używany do identyfikacji i kontroli formularz przycisk jest umieszczony zaraz po polu tekstowym tak, że jest oczywiste dla użytkownika, że pole tekstowe jest, gdy termin wyszukiwania powinny być wprowadzone.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Przykład 4: Tabela danych kontrolek formularza
Tabela danych kontrolek formularza musi powiązać każdą kontrolkę z nagłówkami kolumn i wierszy dla tej komórki. Bez tytułu (lub etykiety LABEL poza ekranem) użytkownikom niewizualnym trudno jest wstrzymywać i sprawdzać odpowiednie wartości nagłówków wierszy / kolumn za pomocą technologii pomocniczej podczas przewijania formularza.

Na przykład formularz ankiety ma cztery nagłówki kolumn w pierwszym wierszu: Pytanie, Zgadzam się, Niezdecydowany, Nie zgadzam się. Każdy kolejny wiersz zawiera pytanie i przycisk opcji w każdej komórce odpowiadający wybranej odpowiedzi w trzech kolumnach. Atrybut tytułu dla każdego przycisku radiowego jest połączeniem wyboru odpowiedzi (nagłówek kolumny) i tekstu pytania (nagłówek wiersza) z łącznikiem lub dwukropkiem jako separatorem.

Img Element

Dozwolone atrybuty wymienione w MDN .

  • alt
  • crossorigin
  • decoding
  • height
  • importance (eksperymentalne API)
  • intrinsicsize (eksperymentalne API)
  • ismap
  • referrerpolicy (eksperymentalne API)
  • src
  • srcset
  • width
  • usemap

Jak widać titleatrybut nie jest dozwolony wewnątrz imgelementu. Użyłbym altatrybutu, a jeśli tego wymaga, użyłbym CSS (przykład: pseudoklasa :hover) zamiast titleatrybutu.


0

Nie, myślę, że altjest lepszy, ponieważ celem tego atrybutu jest dostarczenie „alternatywnego” tekstu w przypadku, gdy obrazu nie można wyświetlić (niezależnie od tego, czy brakuje obrazu, czy też sama przeglądarka nie jest w stanie go wyświetlić).


1
więc myślę, że nie obchodzi cię, czy to 3,8 gwiazdki, czy 4,2 gwiazdki?
polaryzacji

0

MVCFutures for ASP.NET MVC zdecydowali się zrobić jedno i drugie. W rzeczywistości, jeśli podasz „alt”, automatycznie utworzy „tytuł” ​​o tej samej wartości dla Ciebie.

Nie mam pod ręką kodu źródłowego, ale szybkie wyszukiwanie w Google pokazało przypadek testowy!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Więc działa tak jak IE7 i poniżej, co jest uważane za złe zachowanie. robertnyman.com/2009/05/07/…
Robin Daugherty

0

Nie należy używać atrybutu title dla elementu img. Przyczyna tego jest dość prosta:

Przypuszczalnie informacje o podpisach to ważne informacje, które powinny być domyślnie dostępne dla wszystkich użytkowników. Jeśli tak, przedstaw tę treść jako tekst obok obrazu.

Źródło: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 zawiera ogólne porady dotyczące używania atrybutu tytułu:

Poleganie na atrybucie tytułu jest obecnie odradzane, ponieważ wiele programów użytkownika nie ujawnia atrybutu w przystępny sposób, zgodnie z wymaganiami niniejszej specyfikacji (np. Wymaganie urządzenia wskazującego, takiego jak mysz, w celu wyświetlenia etykiety narzędzi, co wyklucza użytkowników korzystających tylko z klawiatury i użytkownicy korzystający tylko z dotyku, na przykład każdy z nowoczesnym telefonem lub tabletem).

Źródło: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Jeśli chodzi o dostępność i różne czytniki ekranu:

  • Szczęki 10-11: domyślnie wyłączone
  • Window-Eyes 7.02: domyślnie włączone
  • NVDA: nieobsługiwane (brak opcji wsparcia)
  • VoiceOver: nieobsługiwane (brak opcji pomocy)

Stąd, jak słusznie ujął to Denis Boudreau : zdecydowanie nie jest to zalecana praktyka .

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.