Dostępne SVG

  1. Grafika i tekst alternatywny
  2. 1. Czy grafika wymaga alternatywnego tekstu?
  3. 2. Jaki jest kontekst grafiki i otaczającego tekstu?
  4. 3. Czy grafika ma funkcję? Jeśli tak, to powinien zostać przekazany użytkownikowi.
  5. Sposoby łączenia SVG ze stroną
  6. 1. SVG w img src
  7. 2. Inline SVG
  8. 3. Osadzanie SVG za pomocą obiektu lub ramki iframe
  9. Ikony
  10. Przykład numer 1: oddzielna ikona ze znaczeniem
  11. Przykład 2: oddzielna ikona dekoracyjna
  12. Przykład nr 3: link do ikony bez tekstu
  13. Przykład 4: icon-link z tekstem statycznym
  14. Przykład 5: icon-link z dynamicznym tekstem
  15. Wyrafinowane obrazy: dostępna grafika

Skalowalna grafika wektorowa (SVG, Scalable Vector Graphic) staje się coraz częściej preferowanym formatem graficznym w Internecie. Możesz również użyć SVG. zamiast czcionki ikony lub grafiki w jpg, gif i png. Zastanów się, w jaki sposób wpływa to na użytkowników technologii wspomagających i co jest potrzebne do zapewnienia każdemu dobrego doświadczenia użytkownika.

Grafika i tekst alternatywny

Zanim przejdziemy do aktualnie dostępnego SVG, spójrzmy na kilka podstawowych pytań dotyczących grafiki, dostępności i alternatywnego tekstu.

1. Czy grafika wymaga alternatywnego tekstu?

Jeśli grafika odgrywa rolę czysto dekoracyjną, nie jest potrzebny tekst alternatywny.

Znaczniki <img> muszą mieć atrybut alt dla ważności, ale mogą być puste (bez spacji), <img src = "pathtofile.svg" alt = ""> znaczniki będą nadal ważne.

2. Jaki jest kontekst grafiki i otaczającego tekstu?

Jeśli grafika jest otoczona tekstem lub treścią zawierającą tekst alternatywny, nie jest potrzebny żaden dodatkowy tekst alternatywny w atrybucie alt. Na przykład:

Zobacz pióro SVG jako img src dla figury z figcaptionem autor: Heather Migliorisi ( @hmig ) na Codepen .

Który tekst alternatywny jest najbardziej odpowiedni dla grafiki, która wymaga atrybutu alt (patrz przykład 4)? W zależności od zawartości obrazu może być inna:

Zobacz pióro SVG jako img src dla figury z figcaptionem autor: Heather Migliorisi ( @hmig ) na Codepen .

3. Czy grafika ma funkcję? Jeśli tak, to powinien zostać przekazany użytkownikowi.

Na przykład zamiast dokładnego opisu tego, co jest prezentowane na ikonach ...

Przykład złego kodu:

<a href="http://codepen.io/username"> <img src = "codepen_icon.png" alt = "Logo CodePen"> </a>

... podaj ikony kontekstu użytkownika.

Przykład dobrego kodu:

<a href="http://codepen.io/username"> <img src = "codepen_icon.png" alt = "Zobacz dołączone pianki"> </a>

Aby uzyskać pełniejsze zrozumienie, przeczytaj artykuł WebAIM „Tekst alternatywny” i Wytyczne dotyczące dostępności obrazu W3C .

Przykłady w artykule działają z przeglądarkami obsługującymi SVG (IE 10+, FF, Chrome i Safari) i najczęściej używane czytniki ekranu : Szczęki, NVDA, VoiceOver (VO) i Narrator.

Sposoby łączenia SVG ze stroną

Dla najbardziej podstawowej implementacji SVG mamy następujące opcje:

1. SVG w img src

Zobacz pióro SVG jako img src autor: Heather Migliorisi ( @hmig ) na Codepen .

Przed kontynuowaniem sprawdź statystyki przeglądarek odwiedzających Twoją witrynę. Jeśli używasz Safari Desktop w wersji 9.1.1 lub iOS w wersji 9.3.2, a także późniejszej wersji, ten kod jest wystarczający.

Jednak wielu użytkowników nadal używa starszych wersji Safari lub IOS, więc musimy dodać role = "img", w ten sposób: <img src = "linktofile.svg" alt = "Piksele, mój super słodki kot" rola = "img" >.

I dzięki programistom, którzy naprawili ten błąd. Safari / WebKit .

Ten przykład jest dobry jako najłatwiejszy sposób na połączenie SVG, ale nie daje nam dostępu do treści SVG za pomocą AT (technologia wspomagająca) lub CSS / JS. Dlatego, jeśli potrzebujemy większej kontroli nad SVG, umieszczamy go bezpośrednio w HTML.

2. Inline SVG

Inline SVG zapewnia większą kontrolę i bardziej przewidywalne wyniki niż w przypadku użycia z <use> lub <img>, ponieważ źródła SVG są bezpośrednio dostępne w DOM, a DOM jest całkowicie otwarty na API technologii wspomagających.

Weź ten sam podstawowy SVG z przykładu z <img> i spróbuj dodać ruch oczu. Możemy to zrobić za pomocą javascript, jeśli osadzimy SVG bezpośrednio w HTML.

Zobacz pióro Podstawowe SVG - Cat autor: Heather Migliorisi ( @hmig ) na Codepen .

Ponieważ w SVG nie ma widocznego tekstu opisującego grafikę, musimy dodać tekst alternatywny:

  • wewnątrz <svg>, dodając <title> krótki tytuł SVG </ title>, który powinien być pierwszym potomkiem elementu nadrzędnego - będzie to używane jako wskazówka po najechaniu kursorem.
  • opis, jeśli to konieczne (nie zostanie odczytany).

Według Specyfikacja W3C , nie musimy robić nic więcej, z wyjątkiem dodawania <title> i, ewentualnie, <desc>, ponieważ są one dostępne przez API ułatwień dostępu. Niestety obsługa przeglądarki jest nadal niewystarczająca (patrz Chrome i Firefox ).

Aby zapewnić dostęp AT do <title> i <desc>:

Dodaj odpowiedni identyfikator do <title> i <desc>:

  • <title id = "uniqueTitleID"> Tytuł SVG </ title>
  • <desc id = "uniqueDescID"> Dłuższy i pełniejszy opis złożonej grafiki. </ desc>

W tagu <svg> dodaj:

  • aria-labelledby = "uniqueTitleID uniqueDescID" używa tytułów i opisów; połączenie i nazwy oraz opisy zapewniają lepszą obsługę czytników ekranu niż opisana w arii.

Kolejny punkt:

  • w tagu <svg> dodaj role = "img" (w ten sposób SVG nie przejdzie przez przeglądarki, które dodają rolę grupy do SVG).

Dodajemy animację (mrugnięcie oczami):

setInterval (funkcja blinkeyes () {var tl = new TimelineLite (); tl.to (". eye", .4, {scaleY: .01, powtórz: 3, repeatDelay: .4, yoyo: true, transformOrigin: "50 % 70% ", łatwość: Power2.easeInOut}); zwrot tl;}, 5000); var master = new TimelineLite (); master.add (blinkeyes ());

Zaktualizuj tytuł / opis, aby dokładnie opisał obraz:

<desc id = "catDesc"> Ilustrowany szary kot z jasnozielonymi migającymi oczami. </ desc>

Zobacz pióro Simple Inline Accessible SVG Cat - używając tytułu i opisu autor: Heather Migliorisi ( @hmig ) na Codepen .

3. Osadzanie SVG za pomocą obiektu lub ramki iframe

Teraz staram się trzymać z dala od używania <obiektu> lub <ramki>. Są niewystarczające pod względem korzystania z czytnika ekranu.

Tak było ze mną.

Wybierz metodę zagnieżdżania SVG i dodaj tabindex = „0”:

<object type = "image / svg + xml" data = "/ path-to-the-svg / filename.svg" width = "50%" tabindex = "0"> <img src = "Fallback_image.jpg" alt = "alt content here"> </ object> <iframe src = "/ path-to-the-svg / filename.svg" width = "65%" height = "500" sandbox tabindex = "0"> <img src = "Fallback_image.jpg" alt = "alt content here"> </ iframe>

Używając naszego migającego kota z ostatniego przykładu, musimy zastąpić rolę = "img" rolą = "grupa".

<svg id = "cat" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 800 800" aria-labeledby = "pixels-title pixels-desc" role = "group">

Od tego momentu wszystko się pogarsza.

Dodaj element do SVG <text>, który będzie zawierał zawartość <title> i ewentualnie <desc> (dla NVDA):

<text id = "nvda-title"> Śliczny, szary kot o zielonych oczach. Ilustracja kota autorstwa Heather Migliorisi. </ Text>

Następnie dodaj klasę, aby wizualnie ukryć tekst, pozostawiając zawartość dostępną dla czytników ekranu. Możemy to zrobić, określając rozmiar czcionki: 0.

.sr-only {font-size: 0; }

Doszliśmy więc do wniosku, że <title> (i, jeśli to możliwe, zarówno <desc>), jak i <text> zawierają tę samą treść do obsługi JAWS i NVDA.

Uwagi:

  • <object> i <iframe> nie działają w Chrome. Chrome widzi zawartość fallbacku (img src), dzięki czemu możesz usunąć cały tekst, kopiując go przez trzeci (lub czwarty) czas.
  • JAWS nie czyta treści <tekst> (z wyjątkiem treści oznaczonych aria-labelled przez / opisane przez)

Zalecam (w oparciu o obsługę przeglądarki i czytnika ekranu), jeśli to możliwe, <img src = "svg.svg>. Ale to nie zawsze jest dostępne, ponieważ obrazy nie mają interaktywności i animacji obiektów i ramek, ale alternatywne opcje dość skomplikowane.

Ikony

Istnieje kilka artykułów na temat wymiany kultowych czcionek SVG. Byłem ciekawy, czy użycie SVG dla ikon ułatwi wdrożenie ich dostępności. Czy przeglądarki mogą obsługiwać <title> określone w głównym SVG podczas korzystania z <use>. Niestety, nie mogą. Ale można to zrobić za pomocą samej ikony, a teraz pokażę, jak.

Po utworzeniu pliku SVG zawierającego ikony (lubię to używać) icomoon ) i podłącz go do dokumentu , musimy określić wzory wymagane dla witryny (ikona + link, ikona + tekst, tylko ikona). Na podstawie tych wzorców możemy opracować odpowiednią metodę stosowania alternatywnego tekstu.

Na początku kod ikony zazwyczaj wygląda tak jak ten z generatora ikon:

<svg> <title> phone </ title> <użyj xlink: href = "# icon-phone"> </ use> </ svg>

Przykład numer 1: oddzielna ikona ze znaczeniem

Ikony ze znaczeniem wymagają alternatywnego tekstu. Ta metoda jest podobna do SVG inline.

  • Zaktualizuj tekst nazwy, aby odzwierciedlał cel ikony, powiedzmy, jest to obsługa serwisowa urządzeń mobilnych.
  • dodaj role = "img" do <svg> (ponieważ SVG nie jest połączony szeregowo, nie zawsze jest rozpoznawany przez AT. Na przykład następujące opcje nie działają na Macu - VoiceOver + Chrome lub Safari, Windows - NVDA + FF).
<svg role = "img"> <title> Obsługuje urządzenia mobilne </ title> <użyj xlink: href = "# icon-phone"> </ use> </ svg>

Jeszcze raz musimy sprawdzić statystyki przeglądarki, aby dowiedzieć się, czy musimy zrobić coś innego. Jeśli użytkownicy strony Chrome 49.1 lub nowszej, możemy się tam zatrzymać.

Jeśli jednak większość użytkowników ma starsze wersje Chrome, musimy dodać id = "xxxx" do <title> i aria-labelledby = "xxxx" do <svg>.

Tutaj warto raz jeszcze podziękować twórcom Chrome za naprawiony błąd .

Zobacz pióro Przykład 1: Samodzielna ikona SVG, Znacząca autor: Heather Migliorisi ( @hmig ) na Codepen .

Przykład 2: oddzielna ikona dekoracyjna

Dekoracyjne ikony (to znaczy ikony, które powielają informacje przesyłane tekstem lub nie mają specjalnego znaczenia) nie wymagają alternatywnego tekstu, muszą być ukryte przed czytnikiem ekranu. W poniższym przykładzie ukrywamy SVG za pomocą aria-hidden = "true".

<p> <svg aria-hidden = "true"> <title> zaznacz </ title> <użyj xlink: href = "# icon-checkmark"> </ use> </ svg> Sukces! Twoje zamówienie przeszło. </ p>

Zobacz pióro yJYVpa autor: Heather Migliorisi ( @hmig ) na Codepen .

Przykład nr 3: link do ikony bez tekstu

W przypadku ikon linków bez tekstu możemy użyć etykiety aria w elemencie <a>, aby dodać opisowy tekst alternatywny. W naszym przypadku do łącza dodawana jest aria-label = „Zobacz wybrane długopisy”.

<a href="link" aria-label="See Picked Pens"> <svg> <użyj xlink: href = "# icon-codepen"> </ use> </ svg> </a>

Zobacz pióro Przykład 3: Ikona połączona bez tekstu autor: Heather Migliorisi ( @hmig ) na Codepen .

Przykład 4: icon-link z tekstem statycznym

W przypadku ikon linków z tekstem użyj etykiety aria w linku, dodając tekst alternatywny z opisem.

Z etykietą aria w tagu czytnik ekranu nie czyta tekstu wewnątrz linku, więc dodaliśmy aria-label = „Zobacz wybrane długopisy” w a.

<a href="link" aria-label="See Picked Pens"> <svg> <użyj xlink: href = "# icon-codepen"> </ use> </ svg> CodePen </a>

Zobacz pióro Połączona ikona ze statycznym tekstem autor: Heather Migliorisi ( @hmig ) na Codepen .

Przykład 5: icon-link z dynamicznym tekstem

Załóżmy więc, że w linku mamy dynamiczny tekst wartości + ikonę. W tym przypadku nie powinniśmy używać etykiety aria w łączu, ponieważ wartość tekstu dynamicznego zostanie utracona. W tym przypadku możemy użyć znacznika zakresu i tekstu ukrytego za ekranem. Wartość liczbowa w id = "itemsInCart" znacznika zakresu jest dynamicznie dodawanym elementem.

  • dodaj dodatkowy zakres z resztą tekstu alternatywnego (np. „przedmioty w koszyku”);
  • dodaj do niego span class = "offscreen-text", aby go wizualnie ukryć;
  • dodaj aria-hidden = "true" do svg.
<a href="http://example.com" id="cart"> <span id = "itemsInCart"> 0 </ span> <span class = "offscreen-text"> elementy w koszyku </ span > <svg aria-hidden = "true"> <użyj xlink: href = "# icon-cart"> </ use> </ svg> </a>

Zobacz pióro Przykład 5: Ikona połączona z tekstem dynamicznym autor: Heather Migliorisi ( @hmig ) na Codepen .

Wszystkie próbki ikon:

Zobacz pióro Dostępne ikony SVG autor: Heather Migliorisi ( @hmig ) na Codepen .

Wyrafinowane obrazy: dostępna grafika

To wspaniałe, że możemy używać SVG zamiast PNG i JPG, zwłaszcza podczas wyświetlania złożonych treści, takich jak wykresy. Przekazywanie wszystkich informacji z wykresu w atrybucie alt byłoby nadmierne, więc ustawienie alternatywnego tekstu na obrazie będzie trudne. Ale używając SVG, możemy udostępnić cały tekst bezpośrednio.

1. Czy grafika wymaga alternatywnego tekstu?
2. Jaki jest kontekst grafiki i otaczającego tekstu?
3. Czy grafika ma funkcję?
1. Czy grafika wymaga alternatywnego tekstu?
2. Jaki jest kontekst grafiki i otaczającego tekstu?
Który tekst alternatywny jest najbardziej odpowiedni dla grafiki, która wymaga atrybutu alt (patrz przykład 4)?
3. Czy grafika ma funkcję?