Dostępne pliki SVG: idealne wzory dla użytkowników czytników ekranu

Chociaż skalowalna grafika wektorowa (SVG) została po raz pierwszy wprowadzona pod koniec lat 90., w ciągu ostatniej dekady zyskała na popularności ze względu na ich wyjątkową elastyczność, wysoką wierność i względną lekkość w świecie, w którym przepustowość i wydajność mają większe znaczenie niż kiedykolwiek. . Postępy w JavaScript i wprowadzenie zapytań o media CSS, takich jak @prefers-color-scheme i @prefers-reduced-motion, rozszerzyły funkcjonalność SVG znacznie poza ich początkowy przypadek użycia, polegający na prostym wyświetlaniu obrazów wektorowych na stronie internetowej.

Wraz z postępem technologii SVG, nasze zrozumienie tego, jak projektujemy i rozwijamy SVG, również musi się rozwijać. Część tego postępu obejmuje rozważenie wpływu takich projektów i kodu na rzeczywistych ludzi, czyli naszych użytkowników końcowych.

W tym artykule opisano dwanaście różnych wzorców SVG znalezionych „na wolności”, a każdy alternatywny opis jest ogłaszany podczas uzyskiwania dostępu przez różne kombinacje systemów operacyjnych, przeglądarek i czytników ekranu.

Oczywiście poniższe przykłady nie są wyczerpującą listą wszystkich możliwych wzorców używanych w sferze cyfrowej, ale podkreślają niektóre z bardziej popularnych lub wszechobecnych wzorców SVG, które możesz napotkać. Czytaj dalej, aby dowiedzieć się, których wzorców SVG należy unikać, a które są najbardziej inkluzywne!

Podstawowe alternatywne opisy przy użyciu <img>

Pierwsza grupa czterech wzorców korzysta ze <img> łączącego się z plikiem SVG. To dobry wybór w przypadku prostych, nieskomplikowanych obrazów w witrynie, aplikacji lub innym produkcie cyfrowym. Chociaż wadą korzystania z tego wzorca jest to, że nie można łatwo kontrolować wielu elementów wizualnych lub animacji jako wbudowanego pliku SVG, ten wzorzec powinien ogólnie renderować jaśniejsze i szybsze obrazy oraz umożliwiać łatwiejszą konserwację plików SVG, których używasz w wielu lokalizacjach.

Wzorzec #1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Wzorzec #2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Wzorzec #3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Wzorzec #4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Podstawowe alternatywne opisy przy użyciu <svg>

Druga grupa czterech wzorców wykorzystuje znacznik <svg> z wbudowanym plikiem SVG. Chociaż dodanie kodu SVG bezpośrednio do znaczników może potencjalnie spowolnić ładowanie strony, ta niewielka nieefektywność zostanie zniwelowana przez większą kontrolę nad elementami wizualnymi lub animacjami obrazów. Dodając swój plik SVG bezpośrednio do kodu HTML, masz również więcej opcji, jeśli chodzi o dostarczanie informacji o obrazie użytkownikom czytników ekranu.

Wzorzec 5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Wzorzec #6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

Wzorzec nr 7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Wzorzec 8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

Rozszerzone alternatywne opisy przy użyciu <svg>

Ostatnia grupa czterech wzorców wykorzystuje znacznik <svg> z wbudowanym plikiem SVG, podobnie jak druga grupa. Jednak w tym przypadku rozszerzamy proste alternatywne opisy o dodatkowe informacje ze względu na złożoność obrazu.

Byłby to dobry wybór wzoru dla bardziej skomplikowanych obrazów, które wymagają więcej wyjaśnień. Należy jednak pamiętać, że niektóre osoby niepełnosprawne — na przykład zaburzenia poznawcze — mogą skorzystać na tym, że te dodatkowe informacje o obrazie będą łatwo dostępne na ekranie zamiast zakopywać je w kodzie SVG.

W zależności od rodzaju i ilości informacji, które musisz dodać do swojego SVG, możesz rozważyć zupełnie inne podejście.

Wzorzec #9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

Wzorzec nr 10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Wzorzec 11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Wzorzec #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

Zwycięzcy i przegrani wzorców SVG

Uruchamiając różne czytniki ekranu w różnych kombinacjach systemów operacyjnych i przeglądarek, widzimy określone wzorce pojawiające się w końcowej tabeli wyników. Jest kilka wyraźnych zwycięzców i przegranych wzorców SVG , a także kilka wzorców gdzieś pośrodku, które możesz wdrożyć, o ile jesteś świadomy i możesz zaakceptować ich ograniczenia. Patrząc na tabelę wyników, możemy stwierdzić, co następuje:

Podstawowe alternatywne opisy przy użyciu <img> (grupa 1)

Najlepszy na wystawie

• Wzorzec 2 : <img> + role="img" + alt="[words]"
• Wzorzec 3 : <img> + role="img" + aria-label="[words]"

Użyj Uwaga!

• Wzorzec 4 : <img> + role="img" + aria-labelledby="[ID]"

Niepolecane

• Wzorzec 1 : <img> + alt="[words]"

Podstawowe alternatywne opisy przy użyciu <svg> (grupa 2)

Najlepszy na wystawie

• Wzorzec 5 : <svg> + role="img" + <title>
• Wzorzec 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

Użyj Uwaga!

• Wzorzec 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

Niepolecane

• Wzorzec 6 : <svg> + role="img" + <text>

Rozszerzone alternatywne opisy przy użyciu <svg> (grupa 3)

Najlepszy na wystawie

• Wzorzec 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

Uwaga : chociaż ten wzorzec nie jest doskonały, ponieważ powtarzał alternatywne opisy, nie zignorował żadnego z elementów w testowaniu, w przeciwieństwie do wzorców „uważaj”.

Użyj Uwaga!

• Wzorzec 9 : <svg> + role="img" + <title> + <text>
• Wzorzec 10 : <svg> + role="img" + <title> + <desc>
• Wzorzec 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

Niepolecane

• Żaden z wzorców w tej grupie nie oblał całkowicie testów.

Wyniki testów

Zawijanie

Należy zauważyć, że częścią interpretacji wyników testów wzorców SVG jest zrozumienie, że twórcy każdego czytnika ekranu mają zalecane przeglądarki , które w pełni obsługują. Nie oznacza to, że nie powinieneś lub nie możesz używać czytnika ekranu w innej przeglądarce, oznacza to po prostu, że jeśli to zrobisz, wyniki mogą nie być tak dokładne, jak w przypadku korzystania z zalecanych.

Testy wzorców dla tego artykułu obejmowały pewne kombinacje przeglądarek i czytników ekranu , które mogą należeć do kategorii „pobocznych”, ale są też uwagi na temat tego, które kombinacje systemów operacyjnych, przeglądarek i czytników ekranu są zalecane do własnych testów. Wyniki tych testów powinny pomóc w podjęciu najlepszej możliwej decyzji dotyczącej wzorca SVG, w oparciu o potrzeby i ograniczenia dotyczące wzorca.

Przypomnienie, że zanim zdecydujesz się na wzór, upewnij się, że znasz podstawy tego, jak i kiedy tworzyć dostępne obrazy oraz że w pełni rozumiesz wymagane alternatywne informacje potrzebne dla różnych typów obrazów.

Jeśli potrzebujesz dodatkowej pomocy w podjęciu decyzji o wyborze wzorca w swoim środowisku, zapoznaj się z artykułem Good, Better, Best: Untangling The Complex World Of Accessible Patterns, który pomoże Ci poruszać się po trudnych wodach dostępnych wzorców. Uzbrojone we wszystkie te informacje i przy odrobinie wysiłku, Twoje pliki SVG są na dobrej drodze, aby były bardziej otwarte dla wszystkich.

Uwaga redaktora : Najlepsze praktyki w zakresie ułatwień dostępu można poznać z Carie podczas jej nadchodzących warsztatów online na temat wzorców dostępnych interfejsów użytkownika — z wytycznymi, narzędziami testowymi, technologią wspomagającą i włączającymi wzorcami projektowymi. Online i na żywo.