Twój obraz prawdopodobnie nie jest dekoracyjny

Atrybut alt elementu img może mieć wartość „null”, co polega na ustawieniu go na pusty ciąg zamiast opisu tekstowego. Nullowanie opisu alternatywnego oznacza brak informacji między cytatem otwierającym i zamykającym. Puste miejsce nie zostanie uznane za nieważne:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

Co oznacza „dekoracyjny”?

Zerowanie obrazu oznacza, że ​​służy on wyłącznie do celów dekoracyjnych.

W tym kontekście dekoracyjny oznacza, że ​​obraz nie komunikuje wizualnie informacji , które są ważne dla zrozumienia celu strony lub widoku oraz dlaczego obraz jest częścią tego.

Dekoracyjny nie oznacza, że ​​obraz zawiera treści, które są uważane za dekorację.

“

Na przykład witryna sprzedająca tapety będzie chciała mieć alternatywne opisy próbek tapet:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Innym przykładem może być witryna internetowa muzeum, na której prezentując dzieło z ich kolekcji można skorzystać zarówno z alternatywnego opisu, jak i podpisu:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Upewnij się, że alternatywny opis również zawiera znaki interpunkcyjne!

Dlaczego chcesz, aby obraz był dekoracyjny?

Technologia wspomagająca pomija puste obrazy i nie informuje o ich obecności. Powody, dla których warto to zrobić, są w większości historyczne.

Stare techniki układu

Wczesne techniki tworzenia stron internetowych opierały się na obrazach, aby zapewnić spójny układ w różnych systemach operacyjnych, przeglądarkach i wersjach przeglądarek. Najczęstszym tego przykładem był spacer.gif , przezroczysty piksel 1×1, który został rozciągnięty do różnych rozmiarów, aby umieścić zawartość na miejscu.

Ta technika zazwyczaj wykorzystuje wiele obrazów odstępów do tworzenia projektu wizualnego. Bez możliwości wyciszenia ich obecności, obrazy te zaśmiecałyby ogłoszone przez technologię wspomagającą i sprawiały, że nawigacja i podejmowanie działań na treści internetowej byłyby mylące i czasochłonne.

Stare techniki projektowania

Zanim pojawiły się właściwości CSS, takie jak box-shadow , programiści musieli użyć technik, które ucinały stylizację dekoracyjną, aby działała z treścią o nieokreślonej wysokości lub szerokości. Ta technika została nazwana skalowaniem 9-plasterkowym, terminem odnoszącym się do 9 sekcji treści, które trzeba by utworzyć.

Podobnie jak w przypadku obrazów dystansujących, skalowanie 9-plasterkowe wykorzystywało wiele obrazów do uzyskania pożądanego efektu wizualnego. Podobnie jak w przypadku obrazków dystansowych, jedynym sposobem na usunięcie bałaganu , jaki te obrazy stworzyły, było oznaczenie ich jako dekoracyjne.

Zbędne ogłoszenia

Istnieje rzadki scenariusz, w którym obraz powtarza się na stronie lub w widoku, a jego powtarzające się miejsca docelowe nie zapewniają dodatkowego kontekstu. W takiej sytuacji należy zachować ostrożność przy oznaczaniu obrazu jako dekoracyjnego, ponieważ brak ogłoszenia dla widocznego obrazu może być mylący dla osoby słabo widzącej, która korzysta z czytnika ekranu.

Dodatkowe ikony

Łącza i przyciski korzystające z ikon powinny zawsze mieć dostępną nazwę, która informuje o funkcjonalności. Jeśli projekt zawiera również ikonę, projekt ikony nie musi być komunikowany.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Jeśli komponent używa tylko ikony, sam obraz powinien zostać użyty do stworzenia dostępnej nazwy:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Pamiętaj, że preferowaną techniką jest widoczna etykieta tekstowa. Widoczna etykieta tekstowa może być przetłumaczona i bardziej bezpośrednio komunikuje cel.

Współczesne zastosowanie

Nowoczesne techniki układania i stylizacji CSS oznaczają, że umieszczanie obrazów jest teraz wysoce celowe. Oznacza to, że jeśli używany jest obraz, najprawdopodobniej będzie wymagał alternatywnego opisu.

Opisy alternatywne powinny informować o celu obrazu . Obejmuje to treść obrazu, ale może również obejmować powód, dla którego został on umieszczony w kontekście na stronie lub w widoku, w którym został umieszczony. Jest to jeden z powodów, dla których alternatywne opisy obrazów nigdy nie będą w pełni zautomatyzowane.

Inne sposoby wyświetlania obrazów

Istnieje kilka innych sposobów wyświetlania obrazu na stronie lub widoku. Ważne jest, aby zapewnić alternatywny opis, jeśli obraz zawiera sensowną treść — niezależnie od zastosowanej techniki.

Element picture

Element picture nie odgrywa dorozumianej roli, co oznacza, że ​​jego obecność nie komunikuje żadnego celu technologii wspomagającej. Oznacza to, że nie można go użyć do semantycznego opisania obecności „obrazu”.

Element picture to kontener na elementy source i img . Użyj atrybutu alt elementu img , aby podać alternatywny opis nadrzędnego elementu picture .

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Obrazy tła

Możemy użyć CSS do zadeklarowania obrazu jako tła elementu HTML. Jest to najczęściej używane, aby nadać projektowi wrażenie tekstury.

Jednak inną popularną techniką jest użycie background-image do umieszczenia obrazu w taki sposób, aby programista nie miał kontroli nad rozmiarem przesyłanego obrazu . background-image w połączeniu z innymi właściwościami, takimi jak background-size , zapewni wyświetlanie treści o nieznanym rozmiarze bez naruszania projektu.

W takim scenariuszu nasz stary przyjaciel spacer.gif może być znowu pomocny!

Wbudowany SVG

SVG można wyświetlić, łącząc się z nim za pomocą atrybutu src w elemencie img lub umieszczając kod SVG w wierszu na stronie lub w widoku.

Jeśli używasz wbudowanego SVG, musisz użyć elementu title (i potencjalnie desc ) SVG zamiast atrybutu alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Równoważne doświadczenie

W nowoczesnym projektowaniu i tworzeniu stron internetowych wyświetlanie obrazu jest działaniem wysoce zamierzonym. Opisy alternatywne pozwalają nam wyjaśnić treść obrazu, a tym samym komunikować, dlaczego warto dołączyć .

To, że obraz przedstawia coś fantazyjnego, nie oznacza, że ​​nie warto go opisywać. Ogłoszenie jej obecności gwarantuje, że każdy, niezależnie od umiejętności czy okoliczności, może w pełni zrozumieć Twoje cyfrowe wrażenia.

Dalsze czytanie na SmashingMag:

• Ułatwienia dostępu w Chrome DevTools
• Kompletny przewodnik po narzędziach ułatwień dostępu
• Dostępne obrazy, gdy są najważniejsze
• Dostępne pliki SVG: idealne wzory dla użytkowników czytników ekranu
• Projektowanie ze zredukowanym ruchem dla czułości ruchu
• Przeczytaj więcej artykułów na temat dostępności, użyteczności i UX.