Web Content Accessibility Guidelines (WCAG) to wytyczne dotyczące dostępności treści internetowych, opracowane przez konsorcjum W3C. Obecnie obowiązuje wersja WCAG 2.2, która została opublikowana jako standard internetowy „W3C Recommendation” 5 października 2023 r.
Wytyczne WCAG stanowią fundament legislacyjny w wielu krajach, również w obrębie Europejskiego Obszaru Gospodarczego (EEA), gdzie są powiązane z przepisami prawa unijnego. Szczególnie istotne jest tu odniesienie do Europejskiego Aktu o Dostępności (European Accessibility Act – EAA), czyli Dyrektywy (UE) 2019/882, która zobowiązuje państwa członkowskie do zapewnienia dostępności produktów i usług cyfrowych, w tym dokumentów elektronicznych, zgodnie z zasadami WCAG. W praktyce oznacza to, że organizacje działające na rynku europejskim muszą testować swoje dokumenty i treści cyfrowe pod kątem zgodności z WCAG – zazwyczaj co najmniej na poziomie AA.
Dostępność w systemie Ferryt
W platformie Ferryt zarówno procesy, jak i generowane dokumenty mogą z powodzeniem spełniać standardy WCAG. Kluczowe aspekty dostępności WCAG w tym kontekście obejmują:
Postrzegalność
Alternatywy tekstowe: Obrazy i grafiki są opisywane za pomocą atrybutu alt.
Przykład: W procesie klienta pojawia się ikona informująca o pomyślnym zakończeniu operacji. Ikona ta ma atrybut alt=”Operacja zakończona pomyślnie”. Dzięki temu, użytkownik korzystający z czytnika ekranu usłyszy tę informację, nawet jeśli nie widzi ikony.
Skalowalność
Treści są czytelne przy powiększeniu do 200%.
Przykład: Formularz, w którym klient wypełnia dane osobowe, jest responsywny i czytelny zarówno na ekranie monitora, jak i na urządzeniu mobilnym. Elementy formularza (pola tekstowe, etykiety, listy z oznaczeniem, przyciski) skalują się proporcjonalnie do wielkości ekranu.
class MyElement extends LitElement {
static styles = [listCheckmarkStyle];
render() {
return html`
<ul class="list--checkmark">
<li>Bananas</li>
<li>Oranges</li>
<li>Coconuts</li>
</ul>
`;
}
}
customElements.define('my-element', MyElement);
export const overview = () => previewHtml`<my-element></my-element>`;Struktura nagłówków
Nagłówki są logicznie uporządkowane (H1-H6).
Przykład: Wniosek jest podzielony na sekcje za pomocą nagłówków o różnym poziomie
<h1>Nazwa własna</h1>
<h2>Tekst<h/h2>
<h3>Tekst1</h3>Funkcjonalność
- Nawigacja za pomocą klawiatury: Użytkownicy mogą korzystać z platformy bez użycia myszy.
Przykład: Użytkownik przechodzi przez proces składania wniosku korzystając wyłącznie z klawiatury. Może poruszać się po polach formularza za pomocą klawisza Tab czy zatwierdzać wybory za pomocą klawisza Enter.
- Unikanie pułapek klawiaturowych: Platforma zapobiega sytuacjom, w których użytkownik nie może opuścić elementu za pomocą klawiatury.
Przykład: W trakcie procesu pojawia się okienko z prośbą o potwierdzenie operacji. Użytkownik może bez problemu zamknąć to okienko za pomocą klawisza „Esc” lub przycisku „Anuluj”, nie zostając „uwięzionym” w tym oknie.
- Widoczny fokus: Elementy interfejsu wybrane za pomocą klawiatury są oznaczone.
Przykład: Podczas wypełniania formularza, aktywne pole, w którym aktualnie znajduje się kursor, jest wyraźnie zaznaczone niebieską ramką[DM1] [WA2] o wyróżnieniu względem tła min. 3:1. To ułatwia użytkownikowi orientację i śledzenie, w którym miejscu formularza się znajduje, szczególnie gdy korzysta z klawiatury.
Zrozumiałość
- Jasny język: Używany jest prosty i zrozumiały język.
- Pomocne komunikaty o błędach: W przypadku błędów są wyświetlane czytelne instrukcje.
Przykład: Jeśli użytkownik pominie obowiązkowe pole w formularzu, wyświetli się komunikat „Pole 'Imię’ jest wymagane. Uzupełnij brakujące dane i spróbuj ponownie”. Komunikat jasno informuje o rodzaju błędu i wskazuje, jak go naprawić.
Solidność
- Kompatybilność z technologiami wspierającymi
Przykład: Proces składania wniosku jest interaktywny z popularnymi czytnikami ekranu, takimi jak NVDA i JAWS.
- Standardowe elementy HTML: Używane są semantyczne znaczniki HTML.
Przykład: Formularz w procesie został zbudowany z użyciem semantycznych znaczników HTML. Pola tekstowe są oznaczone tagiem <input>, etykiety pól tagiem <label>, a przyciski akcji tagiem <button>. Takie podejście ułatwia interpretację struktury formularza przez czytniki ekranu i inne technologie asystujące.
Komponenty platformy Ferryt zgodne z WCAG
Elementy platformy Ferryt, takie jak przyciski, linki, formularze i menu nawigacyjne mogą być zaprojektowane zgodnie z zasadami WCAG, m.in. poprzez odpowiednie oznaczanie, zapewnienie odpowiedniego rozmiaru, poprawne powiązanie etykiet z polami formularzy oraz umożliwienie nawigacji za pomocą klawiatury.
Przyciski i linki
Powinny mieć odpowiednie oznaczenia (np. `aria-label` lub widoczny tekst), aby technologie wspierające mogły je poprawnie identyfikować.
Rozmiar klikanych elementów powinien wynosić co najmniej 44×44 piksele.
1 – etykieta, komponent Input Label,
2 – tekst pomocniczy, komponent Helper Text,
3 – przycisk obrysowy ( Outline button )
4 – ikona wiodąca
5 – lista plików
6 – ikona końcowa ( Trailing icon )
7 – tekst pomocniczy, używa komponentu powiadomienia wbudowanego
8 – separator
Formularze
Pola formularzy muszą być powiązane z etykietami za pomocą `for` i `id`, co ułatwia ich obsługę przez czytniki ekranowe.
Obowiązkowe pola powinny być wyraźnie oznaczone, a w przypadku błędów formularz powinien generować czytelne komunikaty.
Menu nawigacyjne
Powinno być dostępne z poziomu klawiatury, z możliwością przechodzenia między pozycjami za pomocą klawisza Tab.
TAB – przenosi fokus do następnego interaktywnego komponentu
Strzałka lewo / prawo – przechodzi do następnego pola w grupie
Strzałka góra / dół – przenosi fokus do pola powyżej lub poniżej grupy
Dokumenty generowane w procesach na Ferryt
Struktura i formatowanie
Dokumenty powinny mieć odpowiednio oznaczone nagłówki (np. H1, H2, H3), aby zachować logiczną hierarchię treści.
Listy wypunktowane i numerowane muszą być oznaczone semantycznie, a nie za pomocą czystego formatowania wizualnego.
Alternatywy tekstowe
Wszystkie grafiki, wykresy i ilustracje umieszczane w dokumentach powinny być opisane za pomocą tekstu alternatywnego.
Kontrast i kolory
Tekst i tło dokumentów muszą spełniać wymagania kontrastu (minimum 4.5:1 dla tekstu głównego). Ważne elementy, np. tabele czy wykresy, powinny być czytelne niezależnie od ustawień kolorów.
Tabele
Tabele muszą zawierać nagłówki kolumn i wierszy, a także opisy dla osób korzystających z czytników ekranowych.
Należy unikać skomplikowanych struktur tabeli, takich jak zagnieżdżone tabele, które mogą być trudne do odczytania przez technologie wspierające.
Dokumenty w formacie PDF
Linki w dokumentach PDF powinny być aktywne i opisane (np. „Kliknij tutaj, aby przeczytać więcej o WCAG”, zamiast ogólnego „Kliknij tutaj”).
Obsługa klawiaturą
Dokumenty muszą być w pełni dostępne za pomocą klawiatury, umożliwiając nawigację pomiędzy sekcjami, linkami i innymi elementami interaktywnymi.
Narzędzia do testowania
- Adobe Acrobat Pro: Analiza struktury dokumentu PDF (tagi, kontrast, formatowanie).
- NVDA: Czytnik ekranu do testowania dostępności.
- Color Contrast Analyzer (CCA): Narzędzie do sprawdzania kontrastu tekstu i tła.
Testowanie dokumentów
Testowanie koncentruje się na dokumentach generowanych w procesach na platformie Ferryt. W skład testów wchodzi:
- Dokument z oznaczeniem „WZÓR” (taki dokument jest widoczny przed zakończeniem procesu).
- Dokument generowany dla klienta.
Testy obejmują
- Weryfikacja tekstu
Sprawdzenie poprawności ortograficznej i interpunkcyjnej oraz oznaczenie błędów i dodanie komentarzy.
- Weryfikacja parametrów
Testy wizualne (frontend): Rozmiar dokumentu, marginesy, kontrast kolorów (Color Contrast Analyzer), nagłówki i typografia, punktory i numeracja, pola podpisu (dokumenty generowane w oddziale), logo i ikony (opis alternatywny, poprawne osadzenie).
Testy techniczne (backend): Tytuł dokumentu (odczytywany przez czytniki ekranu), język dokumentu (z oznaczeniem wyjątków dla języka angielskiego), opisy alternatywne (np. logo banku), spis treści i zakładki, poprawnie oznaczone hiperlinki.
- Testy za pomocą NVDA:
- Odsłuchiwanie dokumentu za pomocą czytnika ekranu.
- Weryfikacja nawigacji za pomocą klawiatury.
- Sprawdzenie struktury dokumentu.
Podsumowanie
Testowanie procesów oraz dokumentów zgodnie z WCAG 2.2 jest kluczowe dla zapewnienia dostępności treści dla wszystkich użytkowników. W Ferryt testy obejmują weryfikację wizualną i techniczną wspieraną narzędziami takimi jak NVDA i Color Contrast Analyzer natomiast testy dokumentów obejmują zakres z wykorzystaniem wszystkich wyżej wymienionych narzędzi oraz Adobe Acrobat PRO. Kompleksowe podejście do testowania gwarantuje zgodność procesów i dokumentów z WCAG i poprawia ich dostępność.