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

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ę?

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.

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.

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ą”.

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.

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

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ć.

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.

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.

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ć).

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

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 .