Z dwóch poprzednich artykułów wprowadzających Czytelników w temat dostępności można dowiedzieć się, czym jest WCAG 2.1.
W tym i następnych artykułach dotyczących WCAG , chcemy przybliżyć wszystkim programistom, twórcom treści, ale w szczególności jednak tym, którzy chcą zamówić i współtworzyć dostępną stronę, lecz nie wiedzą jak do tego podejść i nie rozumieją, czym jest WCAG 2.1 w praktyce.
Pierwszą z czterech zasad, grupujących wytyczne w odpowiednim kontekście, jest zasada postrzegalności. Zasygnalizowana została ogólnie już w poprzednim artykule stanowiącym wprowadzenie do dostępności treści internetowych.
Tutaj opiszemy pierwszą wytyczną związaną z zasadą postrzegalności, czyli jak i kiedy zapewnić alternatywę tekstową dla elementów graficznych i innych treści nietekstowych, gdy jest to potrzebne.
Treść wytycznej 1.1.
Zapewnij tekstowe zamienniki wszystkich treści nietekstowych, aby można je było zamienić na inne formy (np. powiększony druk, brajl, mowa syntetyczna, symbole lub prostszy język).
Po jej odczytaniu wydaje się to dość proste, jednak wcale takie nie jest. Istnieją przecież czytniki ekranowe (screenreadery), wyświetlają zawartość również w brajlu itd. Co może być niedostępnego w stronie internetowej, na której jest głównie tekst i tylko część treści jest grafiką? Okazuje się, że bardzo wiele rzeczy można zrobić nie tak, jak trzeba.
Wytyczną tą uszczegóławia kryterium sukcesu, którego spełnienie umożliwia zapewnienie zgodności z WCAG 2.1 na poziomie A w tym konkretnym obszarze treści.
Kryterium sukcesu 1.1.1 treść nietekstowa, zapewnia zgodność na poziomie a.
Oto jego treść:
Wszelkie treści nietekstowe przedstawione użytkownikowi posiadają swoją tekstową alternatywę, która pełni tę samą funkcję, z wyjątkiem sytuacji opisanych poniżej.
- Kontrolki użytkownika i wprowadzanie danych przez użytkownika: Jeśli treść nietekstowa jest kontrolką użytkownika lub polem wprowadzania danych, wtedy posiada nazwę opisującą jej przeznaczenie. (Kryterium sukcesu 4.1.2 podaje dodatkowe wymagania dotyczące kontrolek oraz wprowadzania danych przez użytkownika.)
- Multimedia: Jeśli treścią nietekstową są media oparte na czasie, wtedy alternatywa tekstowa zawiera przynajmniej opisowe określenie treści nietekstowej. (Wytyczna 1.2 podaje dodatkowe wymagania, jeśli chodzi o media.)
- Test: Jeśli treść nietekstowa jest testem lub ćwiczeniem, które utraciłoby swój sens ze względu na przedstawienie tej samej treści w postaci tekstu, wtedy alternatywa w postaci tekstu podawać powinna przynajmniej opis pozwalający zrozumieć przeznaczenie treści nietekstowej.
- Odczucie zmysłowe: Jeśli treść nietekstowa ma za zadanie przede wszystkim tworzyć konkretne odczucie zmysłowe, wtedy alternatywa w postaci tekstu jest opisem pozwalającym zrozumieć przeznaczenie treści nietekstowej.
- CAPTCHA: Jeśli celem treści nietekstowej jest potwierdzenie, że do treści ma dostęp człowiek, a nie komputer, wtedy dostarcza się alternatywę w postaci tekstu, która identyfikuje oraz opisuje cel treści nietekstowej. Dostarcza się również alternatywnych zabezpieczeń typu CAPTCHA, dostosowanych do różnych możliwości percepcji użytkowników, uwzględniając rozmaite rodzaje niepełnosprawności.
- Cele dekoracyjne, formatowanie, treść niewidoczna: Jeśli treść nietekstowa pełni funkcję czysto dekoracyjną, używana jest do formatowania wizualnego lub też nie jest przedstawiana użytkownikowi, powinna być wdrożona w sposób umożliwiający technologiom wspomagającym jej zignorowanie.
Jak rozumieć to kryterium nieabstrakcyjnie, a na konkretnych przykładach, które możemy napotkać w Internecie na co dzień?
W sytuacji, gdy sprawa jest prosta, należy stosować treść kryterium dosłownie np. gdy twórca treści umieszcza na stronie lub w dokumencie obrazek, na którym znajduje się treść istotna dla odbioru całości treści strony internetowej lub dokumentu np. wykres lub inna treść wizualna wymagająca opisu tekstowego, to powinien również umieścić opis w postaci tekstu alternatywnego, który będą mogły odczytać czytniki ekranowe, z których korzystają osoby niewidome.
Jeżeli można, oprócz wykresów np. z wynikami porównawczymi testów dwóch komputerów warto umieścić dane w postaci tabeli, która jest formą bardziej przystępną dla osób niewidomych. Tam, gdzie to możliwe, należy szukać tekstowej alternatywy w takiej formie, która jak najwięcej będzie w stanie przekazać osobie niemogącej skorzystać z treści nietekstowej.
Kryterium to należy stosować , żeby zapewnić możliwość takiego samego dostępu do treści wszystkim tym, którzy z jakiegoś powodu nie mogą odczytać i przyswoić treści nietekstowej.
Nie należy przy tym obawiać się, że tekst alternatywny opisujący zawartość grafiki będzie widoczny na stronie, zepsuje formatowanie wizualne lub coś podobnego, ponieważ umieszczenie go w znacznikach takich jak np. alttext lub longdesc w przypadku dłuższego opisu spowoduje, że tekst etykiety lub długiego opisu obrazu będą mogły odczytywać screenreadery, a osoby niewidome przeglądające utworzoną treść usłyszą treść tej etykiety lub długiego opisu. Gdy nie zostanie zapewniona alternatywa do treści nietekstowej, to nie będą mogły w pełni odczytać treści strony lub dokumentu.
Twórcom stron i programistom może czasem wydawać się, że alternatywa tekstowa dla grafik i innych treści nietekstowych, to coś zbędnego lub coś w rodzaju komentarzy pomagających porządkować kod, identyfikatory dodawanych do strony grafik a tym czasem to bardzo istotne informacje potrzebne przyszłym odbiorcom tworzonych treści.
Przejdźmy teraz do sześciu wyjątków zawartych w treści kryterium sukcesu.
Pierwszy wyjątek mówi o tym, że jeżeli jakaś treść nietekstowa jest też kontrolką użytkownika lub polem wprowadzania danych np. łącze, przycisk, pole edycji, to taka treść nietekstowa powinna posiadać nazwę opisującą przeznaczenie takiej kontrolki.
Gdy łącze obrazu nie będzie zaetykietowane, to niewidomy użytkownik czytnika ekranu usłyszy tylko informację, że element pod kursorem jest łączem graficznym, ale nie dowie się, gdzie to łącze prowadzi. Gdy napotka przycisk, który nie ma nazwy, będzie wiedział, że można wcisnąć ten przycisk, ale nie będzie wiedział, jaka akcja zostanie wykonana po wciśnięciu takiego przycisku. Użytkownik widzący domyśli się oczywiście z łatwością, że stosowny obrazek, który może kliknąć wykona akcję, której się spodziewa po danej kontrolce.
Odwołania do innych wytycznych i kryteriów sukcesu teraz pomijamy, ponieważ w cyklu artykułów o dostępności opiszemy po kolei w sposób dokładny i zrozumiały wszystkie wytyczne i kryteria sukcesu WCAG 2.1.
Drugim wyjątkiem w kryterium sukcesu są nietekstowe treści multimedialne oparte na czasie. Minimalnym wymaganiem jest, aby przynajmniej zapewniono tekstową informację ogólną, co zawiera umieszczony np. film lub plik dźwiękowy. Temat mediów jest uwzględniony w innej wytycznej, więc tutaj nie będziemy wchodzić w szczegóły, wszak pozostały jeszcze 4 wyjątki do opisania.
Trzeci wyjątek mówi o tym, że jeżeli treść nietekstowa musi taka być, ponieważ jej umieszczenie w postaci tekstu straciłoby cel i sens np. ćwiczenie wizualne, to należy zapewnić tekstowy opis zawierający minimum informacji o tym, czym jest umieszczona treść nietekstowa.
Oczywiście jak wcześniej napisaliśmy informacje te będą mogły być odczytywane przez technologie asystujące np. czytniki ekranu, a inni odbiorcy będą widzieć tylko tą treść, którą twórca chce im ukazać, natomiast alternatywny opis przeznaczenia takiej treści nie ukaże się osobom, które tego nie potrzebują.
Czwarty wyjątek dotyczy treści nietekstowych mających na celu przekaz zmysłowy np. gra na flecie lub sztuka wizualna. Osoba głucha nie usłyszy gry na flecie, ale alternatywa tekstowa powinna przynajmniej zawierać informację, co zawiera taka treść nietekstowa.
Punkt piąty, to kolejny ważny wyjątek. Jeżeli treść nietekstowa jest zadaniem CAPTCHA, które jest umieszczone po to, aby zweryfikować, czy z treści korzysta człowiek, a nie komputer, to wtedy alternatywa tekstowa powinna zawierać opis takiej treści nietekstowej np. obrazka z zadaniem CAPTCHA. Jest tu też mowa o tym, że należy zapewnić alternatywne metody rozwiązania zadania CAPTCHA np. zadanie dźwiękowe dla osób słabowidzących i niewidomych.
Tutaj znowu dłużej się zatrzymamy, ponieważ to bardzo często wielki problem dla osób niewidomych. Twórcy witryn i stron chcą dobrze, chcą chronić się przed manipulacją danymi i spamem, umieszczają więc zadania CAPTCHA, aby ochronić zasoby przed botami.
Jednak większość twórców i programistów nigdy nie miała do czynienia i prawdopodobnie mieć nie będzie z osobami niepełnosprawnymi, więc nawet nie przyjdzie im do głowy, żeby umieszczać dźwiękową alternatywę dla obrazkowych zadań CAPTCHA.
Ostatni, szósty już wyjątek mówi o tym, że jeżeli treść nietekstowa pełni rolę dekoracyjną lub w ogóle nie jest prezentowana, stanowiąc jedynie element formatowania wizualnego, to należy ją umieścić w taki sposób, aby technologie asystujące miały możliwość zignorowania takiej treści.
Najlepszym przykładem będą tutaj osoby korzystające z czytników ekranu. Treści niebędące tekstem, które nic nie wnoszą od strony merytorycznej do danego tekstu, powinny być ukryte przed czytelnikiem niewidomym, ponieważ nie będą przeszkadzać w odbiorze pozostałej istotnej treści, zarówno tej tekstowej, jak i tej zapewnionej przez alternatywy dla treści nietekstowej.
Jak spełnić kryterium sukcesu dla wytycznej 1. Alternatywa tekstowa?
Twórcy treści , powinni wiedzieć, że trzeba stosować opisy dla grafik i multimediów, które umieszczamy na stronach, uwzględniając przy tym 6 wyjątków wymagających odmiennego postępowania, a które opisano powyżej.
Można znaleźć całkiem interesujące dyskusje na temat m. in. Tekstu alternatywnego. Jak długi ma być tekst alternatywny? Jak opisywać różne obrazy? Kiedy stosować etykietę alt, a kiedy najlepiej długi opis obrazu?
Na końcu artykułu znajduje się link do publicznej grupy na Facebooku, na której można znaleźć wiele przydatnych wskazówek od ekspertów do spraw dostępności, twórców, a także samemu zadać pytanie czy podzielić się wątpliwościami dotyczącymi dostępności sieci Web.
Programiści, którzy chcą tworzyć dostępne witryny i strony internetowe też znajdą coś dla siebie, w tym przykłady dobrych praktyk przy tworzeniu kodu strony i porady od innych członków grupy, m. in. Ekspertów ds. dostępności, innych twórców stron, zaawansowanych użytkowników niepełnosprawnych.
Istnieje wiele technik programistycznych umożliwiających spełnienie kryterium sukcesu 1.1.1.
Można je znaleźć na przykład pod tym adresem:
https://wcag.lepszyweb.pl/?showtechniques=111#non-text-content
Jak sprawdzić, czy na stronie znajdują się treści nietekstowe, które wymagają dodania opisu lub etykiety?
W poprzednim artykule zwróciliśmy uwagę na udział Validatorów i różnych automatycznych systemów weryfikujących dostępność strony. Podkreśliliśmy, że nie można automatycznie zapewnić dostępności, ale można użyć ich do weryfikacji miejsc, które mogą być potencjalnie niedostępne.
Można użyć takiego programu pomocniczego w przypadku chęci sprawdzenia, czy na stronie znajdują się elementy będące treścią nietekstową, które są opisane źle lub wcale nie są opisane.
Często systemy zarządzania treścią dodają losowe etykiety tekstowe, w postaci ciągów cyfr np. do obrazów dodawanych do strony lub witryny. Można użyć takiego Validatora, aby szybko odnaleźć takie miejsca i wprowadzić poprawne etykiety tekstowe.
Istnieją zarówno darmowe, jak i płatne narzędzia tego typu.
Dobrym przykładem jest
Po rejestracji można skorzystać z większej ilości testów niż ma to miejsce w wersji demonstracyjnej, bez logowania.
Są oczywiście inne narzędzia, w tym anglojęzyczne o różnej jakości, użycie jednak kilku z nich, nawet w wersji darmowej może pomóc poprawić sytuację i znaleźć niedostrzegane dotąd problemy ze stroną lub witryną.
Redaktorzy treści też mają coraz łatwiej. W najnowszych wersjach kompilacji Office 2016, od początku w Office 2019 i od dłuższego czasu w Microsoft 365, wcześniej Office 365 znajduje się inspektor dostępności, czyli moduł, który pokazuje różne niespójności lub błędy związane z dostępnością np. niezaetykietowane obrazy w dokumentach pakietu Office.
Wystarczy tylko zwrócić uwagę na dostępność, zacząć ją wdrażać i używać wspomnianych narzędzi jako pomocy, a wdrażanie i utrzymanie dostępności stanie się mniej żmudne i trochę bardziej wygodne.
Podsumowanie
W tym artykule omówiliśmy pierwszą z wytycznych WCAG 2.1 z grupy zasady postrzegalności. Wytyczna ta zawiera tylko jedno kryterium sukcesu, w innych jest tych kryteriów więcej. Opisaliśmy również, jak można wspomóc się dodatkowymi narzędziami w procesie udostępniania treści nietekstowych. W następnym artykule omówimy kolejną wytyczną i kryteria sukcesu dla tej wytycznej.
Jeszcze na sam koniec udostępniamy wspomniane wcześniej źródła.
Grupa publiczna na Facebooku poświęcona dostępności sieci WEB:
https://www.facebook.com/groups/dostepnosc
oficjalne polskie tłumaczenie WCAG 2.1