Na pierwszy rzut oka obrazy z ułatwieniami dostępu mogą wydawać się prostym tematem. jakiś „tekst alternatywny” do obrazu – i gotowe. ale poruszany temat jest bardziej złożony, niż sądzą niektórzy. W tej sekcji omówimy:
- Jak zaktualizować kod, aby ułatwić dostęp do obrazów.
- Jakie informacje należy udostępniać użytkownikom i gdzie można je udostępniać.
- Dodatkowe sposoby ulepszania zdjęć z myślą o wsparciu osób z niepełnosprawnościami.
Przeznaczenie i kontekst obrazu
Zanim napiszesz nawet jeden wiersz kodu, musisz najpierw zastanowić się, i sposobach jego wykorzystania. Warto zadać sobie pytania cel i kontekst obrazu pomagają określić, jak najlepiej oddać osobie korzystającej z danych technologia asystyczna (AT) takich jak czytniki ekranu.
Zadaj sobie następujące pytania:
- Czy obraz jest niezbędny do zrozumienia kontekstu funkcji lub strony?
- Jakie informacje chce przekazać obraz?
- Czy obraz jest prosty czy złożony?
- Czy obraz wywołuje emocje lub zachęca użytkownika do działania?
- Czy obraz jest tylko wizualnym „cukierkiem oczu” bez żadnego realnego celu?
wizualny schemat blokowy, np. drzewo decyzyjne dotyczące obrazu, może pomóc w określeniu kategorii, do której należy obraz.
Spróbuj ukryć obrazy w swojej witrynie lub aplikacji internetowej, korzystając z rozszerzenia do przeglądarki lub innymi metodami. Następnie zadaj sobie pytanie: „Czy rozumiem, jaka treść pozostaje?”. Jeśli odpowiedź jest twierdząca, najprawdopodobniej jest to obraz dekoracyjny. W przeciwnym razie obraz jest po prostu informacyjna i trzeba kontekstowo. Gdy już określić przeznaczenie obrazu, znajdować najdokładniejszy sposób kodowania .
Obrazy dekoracyjne
Obraz dekoracyjny to elementu wizualnego, który nie dodaje dodatkowego kontekstu ani informacji umożliwiających w celu lepszego zrozumienia kontekstu. Obrazy dekoracyjne to obrazy uzupełniające i mogą stanowić styl, a nie substancję.
Jeśli zdecydujesz, że obraz ma charakter dekoracyjny, musi zostać automatycznie ukryty od AT. Po zaprogramowaniu obrazu do ukrycia sygnalizuje AT, że jest niezbędna do zrozumienia treści, kontekstu czy czynności strony. OK jest wiele sposobów ukrywania obrazów, w tym użycie alternatywnego tekstu pustego/null, stosując ARIA lub przez dodanie obrazu jako tła CSS. Poniżej znajdziesz kilka przykładów, jak ukryć dekoracyjny obraz wyświetlany przez użytkowników.
Pole alt jest puste lub puste
Pusty lub pusty atrybut tekstowy różni się od brakującego atrybutu alternatywnego atrybutu tekstowego. Jeśli brakuje atrybutu alternatywnego tekstu, AT może odczytać podaj nazwę pliku lub otaczającą go zawartość, aby podać użytkownikowi więcej informacji. dotyczące obrazu.
Rola ustawiona na presentation lub none
rolę ustawioną na presentation lub none;
usuwa semantykę elementu z ekspozycji na ułatwienie dostępu
drzewo. W międzyczasie aria-hidden= "true"
spowoduje usunięcie całego elementu wraz ze wszystkimi jego elementami podrzędnymi
Accessibility API.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Używaj tagu aria-hidden ostrożnie, ponieważ może on ukryć elementy, które
których nie chcesz ukrywać.
Obrazy w CSS
Gdy dodasz obraz tła za pomocą CSS, czytnik ekranu nie wykryje . Przed zastosowaniem tej metody upewnij się, że chcesz ukryć obraz.
Grafiki z informacjami
Obraz informujący to obraz, który przekazuje proste koncepcje, pomysł lub emocje. Mogą to być zdjęcia rzeczywistych obiektów, niezbędne ikony, proste rysunki i obrazy tekstu.
Jeśli obraz ma charakter informacyjny, należy dodać automatyczny tekst alternatywny opisujący przeznaczenie obrazu. Alternatywne opisy obrazów – często w skrócie „tekst alternatywny” – dostarczają użytkownikom AT więcej informacji o obrazie i pomagają im lepiej zrozumieć jego przekaz lub intencję.
Proste opisy alternatywne wykorzystujące
Elementy <img>
aby uzyskać dostęp do atrybutu alt, niezależnie od jego typu
wskazuje na przykład .jpg, .png, .svg i inne.
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Jeśli jednak używasz wbudowanych elementów <svg>, zwróć uwagę na ułatwienia dostępu.
Po pierwsze, ponieważ pliki SVG są kodowane semantycznie, AT domyślnie je pominie.
Jeśli masz dekoracyjne zdjęcie, nie jest to problem – AT zignoruje
zgodnie z oczekiwaniami. Jeśli jednak masz obraz informacyjny, ARIA role="img"
należy dodać do wzorca, aby system AT rozpoznał go jako obraz.
Po drugie, elementy <svg> nie używają atrybutu alt, więc
Należy stosować różne metody kodowania
służy do dodawania alternatywnych opisów do obrazów informacyjnych.
<svg role="img"...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Obrazy funkcjonalne
Obraz funkcjonalny to powiązane z działaniem. Przykładem obrazu funkcjonalnego jest logo, które zawiera link do strony głównej, ikony lupy jako przycisku wyszukiwania ikona przekierowująca do innej witryny lub aplikacji.
Podobnie jak obrazy informacyjne, obrazy funkcjonalne muszą zawierać alternatywną który informuje wszystkich użytkowników o ich przeznaczeniu. W przeciwieństwie do obrazu informacyjnego Każdy obraz funkcjonalny musi opisywać działanie obrazu – nie aspektach wizualnych.
W przykładowym logo obraz ma charakter informacyjny i umożliwia podjęcie działań, ponieważ obrazu, który przekazuje informacje i zachowuje się jak link. W takich przypadkach możesz dodać do każdego elementu alternatywne opisy. .
Jednym ze sposobów dodawania alternatywnych opisów do obrazów jest ukrywanie ich elementów wizualnych. tekstu. Gdy używasz tej metody, czytniki ekranu odczytują tekst, ponieważ jest w DOM, ale jest wizualnie ukryty za pomocą niestandardowego kodu CSS.
We fragmencie kodu widać, że „Przejdź na stronę główną” to a tekst alternatywny obrazu to „Urocze Biedronki dla Trawnik”. Gdy słuchasz kodu logo za pomocą czytnika ekranu, usłyszysz zarówno wizualne i związane z działaniem wyrażone na jednym obrazie.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
</a>
</div>
Złożone obrazy
Często jest to złożony obraz. wymagają więcej wyjaśnień niż dekoracyjny, informacyjny czy informacyjny obrazu funkcjonalnego. Wymaga zarówno krótkiej, jak i długiej alternatywy w opisie z pełnym przekazem. Złożone zdjęcia zawierają infografiki, mapy, wykresy i złożone ilustracje. Podobnie jak w przypadku typów obrazów, możesz dodawać różne metody do bardziej złożonych obrazów.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug."><a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Jednym ze sposobów na wprowadzenie dodatkowego wyjaśnienia do obrazu jest podanie linku do zasobu lub podaj link do obszerniejszego wyjaśnienia w dalszej części strony. Ta metoda to dobry wybór nie tylko dla użytkowników sieci AT, ale także niepełnosprawnością, np. poznawczym, uczącym się i czytaniem osób niepełnosprawnych, które mogą skorzystać z tego dodatkowego zdjęcia łatwo dostępne na ekranie, zamiast zagłębić się w kod.
Możesz też dołączyć atrybut aria-describedby do
<img>. Możesz programowo powiązać obraz z identyfikatorem zawierającym
dłuższy opis. Ta metoda tworzy silne powiązanie między obrazem
i pełny opis. Rozszerzony opis może być wyświetlany na
ekranu lub elementów wizualnych, ale warto zadbać o to, by były widoczne
więcej osób.
Innym sposobem na grupowanie krótkich tekstów alternatywnych z dłuższym jest użycie elementów <figure> i <figcaption> HTML5. Te elementy działają podobnie do elementu aria-describedby, ponieważ grupują je semantycznie, tworząc silniejsze powiązanie między obrazem a jego opisem. Dodanie atrybutu ARIA role="group" zapewnia zgodność wsteczną ze starszymi przeglądarkami, które nie obsługują natywnej semantyki elementu <figure>.
Sprawdzone metody dotyczące tekstu alternatywnego
Oczywiście dołączenie tekstu alternatywnego nie wystarczy. Tekst powinien być także mają znaczenie. Przykładowo, jeśli zdjęcie przedstawia roję biedronek karmiących jest to krzew różany, a tekst alternatywny to „robaki”, będzie oddają pełny przekaz i intencję obrazu? Zdecydowanie nie.
Alternatywne opisy muszą zawierać jak najwięcej istotnych informacji wizualnych być zwięzłe. Chociaż nie ma limitu liczby znaków czytnik ekranu, ale zwykle zalecamy ograniczenie tekstu alternatywnego do Maksymalnie 150 znaków, aby czytelnik nie czuł się zmęczony. Jeśli chcesz dodać więcej do obrazu, możesz użyć jednego ze złożonych wzorców obrazów, dodać lub dokładniej opisać obraz w tekście głównym.
Dodatkowy tekst alternatywny, który najlepiej się sprawdza metody to m.in.:
- Unikaj słów takich jak „obrazek” lub „zdjęcie” w opisie, a czytnik ekranu automatycznie zidentyfikuje te typy plików.
- Nadając obrazom nazwy, zachowaj spójność i dokładność. Grafika są używane w przypadku braku lub zignorowania tekstu alternatywnego.
- Unikaj używania znaków innych niż alfa (np. #, 9 i &) oraz myślników. między słowami, a nie podkreśleniami w nazwach obrazów lub tekście alternatywnym.
- Jeśli to możliwe, stosuj odpowiednie znaki interpunkcyjne. Bez tego opisy obrazów brzmi jak jedno długie, niekończące się zdanie.
- Napisz tekst alternatywny jak człowiek, a nie robot. Upychanie słów kluczowych nie przynoszą żadnych korzyści – osoby korzystające z czytników ekranu będą irytowane, a algorytmy wyszukiwarek nałożą na Ciebie karę.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ARIA i HTML
Co zrobić, aby skomplikowane obrazy były bardziej przystępne?
aria-describedby.