Dotyczy wersji: 2024 R1 i powyżej; autor: Krystyna Gawryał
Wprowadzenie
W dobie postępu technologicznego coraz większy nacisk kładzie się na zapewnienie równego dostępu do informacji, edukacji, pracy, rozrywki i usług dla wszystkich osób, niezależnie od ich miejsca zamieszkania, zasobów, umiejętności, czy ograniczeń. Wiele z tych podstawowych aspektów życia jest obecnie realizowanych za pośrednictwem Internetu, dlatego temat dostępności cyfrowej zyskał w ostatnich latach na znaczeniu. W celu zapewnienia takiej dostępności wypracowano szereg standardów, wśród których kluczową rolę odgrywają wytyczne dotyczące dostępności treści internetowych WCAG (Web Content Accessibility Guidelines). Zgodnie z nimi dostawcy stron internetowych i aplikacji mobilnych powinni publikować swoje treści z uwzględnieniem określonych kryteriów, umożliwiając tym samym dostęp do tych treści jak największej grupie odbiorców, również osobom, które do tej pory były w tym względzie marginalizowane, np. osobom ze stałymi lub tymczasowymi ograniczeniami poznawczymi, ograniczeniami związanymi z obsługą urządzeń, lub które mają specjalne potrzeby lub preferencje w tym zakresie.
W związku z powyższym, wersja 2024 R1 WEBCON BPS Portal została dostosowana w taki sposób, aby zapewnić możliwie najwyższą zgodność z wytycznymi WCAG, przy czym pierwsze powiązane modyfikacje pojawiły się już w wersji 2023 R3.
Niniejszy artykuł stanowi opis zmian i ułatwień, jakie wprowadzono w ramach tej funkcjonalności.
Zasady WCAG
Zbiór międzynarodowych wytycznych WCAG został opracowany przez World Wide Web Consortium (W3C) i w pierwszej odsłonie (1.0) pojawił się już w 1999 roku. Kolejne wersje standardu opublikowano odpowiednio w latach 2008 (2.0) i 2018 (2.1), a ich treść posłużyła do opracowania powiązanych norm europejskich i międzynarodowych. Pod koniec 2023 roku wersja 2.2 wytycznych zyskała status oficjalnie obowiązującego standardu sieciowego. Zgodnie z WCAG o dostępności treści internetowych można mówić, jeżeli spełniają one kryteria według następujących zasad:
- Postrzegalność (Perceivable): treści i elementy interfejsu użytkownika powinny być łatwe w odbiorze dla osób z różnymi ograniczeniami.
- Funkcjonalność (Operable): interfejsy i elementy nawigacji powinny być dostępne dla wszystkich użytkowników, niezależnie od wykorzystywanych urządzeń.
- Zrozumiałość (Understandable): informacje prezentowane na witrynach i wykonywane operacje powinny być klarowne dla wszystkich użytkowników.
- Solidność (Robust): strony (w tym ich działanie i struktura) powinny spełniać standardy odpowiednie dla zastosowanych technologii; treści witryn powinny być dostępne dla różnych technologii asystujących, takich jak czytniki ekranowe czy programy przekształcające tekst na inne formaty.
W odniesieniu do każdej z tych zasad obowiązują bardziej szczegółowe wytyczne wraz z wymiernymi kryteriami dla osób odpowiedzialnych za projektowanie treści internetowych. Z kolei stopień spełnienia każdego z kryteriów rozpatrywany jest w oparciu o trzy poziomy dostępności: A (najniższy), AA (średni), AAA (najwyższy).
Obecnie trwają prace nad standardem WCAG 3.0, a publikacja jego ostatecznej wersji planowana jest na najbliższe lata. Jak podaje W3C na swojej oficjalnej stronie WCAG 3.0 swoim zakresem będzie obejmować już nie tylko statyczne i dynamiczne treści internetowe, ale także treści interaktywne i streamingowe, rzeczywistość wirtualną i rozszerzoną w celu zaspokojenia rosnących potrzeb związanych z dostępnością w miarę rozwoju technologii. Zgodnie z zapowiedziami i przygotowanym projektem, w ramach standardu wprowadzane zostaną nowe, bardziej szczegółowe kryteria oceny dostępności oraz narzędzia kontroli dla audytorów.
Dostępność cyfrowa Portalu
Zwiększenie dostępności cyfrowej WEBCON BPS Portal wiązało się z wprowadzeniem szeregu zmian i modyfikacji, tak aby struktura, forma prezentowania treści, elementy interfejsu były zgodne z wymogami WCAG, gwarantując intuicyjną i bezproblemową obsługę witryny dla użytkowników końcowych o zróżnicowanych potrzebach.
Nawigacja i obsługa Portalu bez użycia myszy
Wprowadzone zmiany polegały na umożliwieniu użytkownikom wygodnego i szybkiego poruszania się po wybranych obszarach Portalu za pomocą klawiatury (klawisze Tab, Enter, Esc, spacja, strzałki kierunkowe) oraz innych narzędzi do interakcji z urządzeniem (np. TalkBack, VoiceOver). Wśród tych obszarów znalazły się, m.in.:
- Strona główna,
- Strona aplikacji,
- Panel zadań,
- Górny pasek menu,
- Formularz (w tym akcje, ścieżki oraz panel informacyjny),
- Panel boczny i jego wybrane podstrony (np. Analityka),
- Wybrane sekcje Panelu administracyjnego,
- Strona wyszukiwania globalnego,
- Raporty i ich widoki.
Zmiany mają zastosowanie do elementów, które użytkownik końcowy może przeglądać lub edytować, z wyłączeniem okien konfiguracyjnych poszczególnych funkcjonalności.
Dodatkowo zwiększono widoczność fokusu i ujednolicono jego domyślne obramowanie dla wszystkich obsługiwanych elementów Portalu, tak aby użytkownik poruszający się po jego stronach za pomocą urządzeń innych niż mysz jednoznacznie widział, w którym miejscu się znajduje. Ustawienia te będą pobierane z konfiguracji motywu, niezależnie od rodzaju i ustawień przeglądarki.
Rys. 1 Przykład domyślnego fokusu na stronie głównej Portalu
Definiując motyw kolorystyczny można teraz zadecydować o szerokości jego obramowania. Standardowe obramowanie wynosi 1 px, zmiana na 2 px sprawi, że jest on bardziej widoczny dla użytkowników, którzy mają takie potrzeby. Funkcjonalność jest dostępna z poziomu Panelu administracyjnego (Motywy kolorystyczne → Edytuj motywy kolorystyczne (ikona ołówka)).
Rys. 2. Wybór szerokości fokusu
Po zmianie fokus będzie widoczny również w przypadku korzystania z motywu kontrastu w ustawieniach systemowych Windows.
Strona główna i stałe elementy Portalu
Bezpośrednio po przejściu na stronę główną Portalu nawigacja przy użyciu klawisza Tab pozwala włączyć komponent Szybkich linków nawigacyjnych. Komponent ten umożliwia ustawienie fokusu kolejno na logo, a następnie poszczególne sekcje panelu bocznego (Przejdź do nawigacji), obszar wyboru aplikacji (Przejdź do wyboru aplikacji), obszar wyszukiwania w górnym menu (Przejdź do wyszukiwania), a także wyświetlenie nowego okna z opcjami dostępności (Przejdź do opcji dostępności).
Rys. 3. Nawigacja do sekcji wyboru aplikacji z wykorzystaniem
Szybkich linków nawigacyjnych
Na stronie głównej Portalu możliwe jest teraz ustawienie fokusu m.in. na ikonach i zdjęciu użytkownika w górnym menu, widżetach i elementach Dashboardu systemowego i innych Dashboardów zdefiniowanych przez użytkowników.
Rys. 4. Poruszanie się po stronie głównej Portalu za pomocą klawiatury
Strona aplikacji
Podobne rozwiązanie wprowadzono również na stronach aplikacji – użytkownicy będą teraz mogli szybciej poruszać się bez użycia myszy po jej elementach, takich jak np. Sugerowane dashboardy i raporty (w tym je przypinać) czy Ostatnie aktywności, gdzie umożliwiono otwieranie podglądu elementu obiegu na podstawie wybranego linku.
Rys. 5. Otwieranie podglądu elementu
z poziomu Ostatnich aktywności za pomocą klawiatury
Strona wyszukiwania globalnego i formularz
W ramach funkcjonalności umożliwiono łatwiejszą nawigację na stronie wyników wyszukiwania globalnego, a także obsługę filtrów i sugestii oraz sortowanie wyników za pomocą klawiatury.
Rys. 6. Nawigacja po stronie wyszukiwania globalnego bez użycia myszy
Z kolei na formularzu użytkownicy będą mogli w analogiczny sposób nawigować po edytowalnych polach wprowadzania danych, Przyciskach menu i wybierać Ścieżki przejścia. Fokus będzie można ustawić również na Panelu informacyjnym, sekcjach Załączników i Komentarzy i ich elementach.
Rys. 7. Nawigacja po formularzu za pomocą klawiatury
Raporty i ich widoki
W przypadku raportów tabelarycznych, posługując się klawiaturą będzie można łatwo wybierać Przyciski menu, ikony bezpośrednio związane z konfiguracją i filtrowaniem raportu, nagłówki kolumn raportu, jego wiersze, Sygnatury prowadzące do elementów obiegu, menu akcji, a także elementy wszystkich powiązanych menu kontekstowych. W podobny sposób użytkownicy będą mogli swobodnie poruszać się po widokach raportów typu Wykres (legenda, obsługa serii), Kalendarz, czy KPI.
Rys. 8. Nawigacja po elementach raportu tabelarycznego bez użycia myszy
Kontrast na stronach Portalu
Możliwość łatwego odróżnienia treści od tła to jeden z kluczowych elementów dostępności cyfrowej. Wbrew pozorom nie dotyczy to tylko osób słabowidzących. Kontrast jest bowiem istotny dla zachowania należytej czytelności treści, niezależnie od warunków otoczenia czy też indywidualnych predyspozycji odbiorcy. Wprowadzone zmiany miały na celu dostosowanie palety kolorów w taki sposób, aby współczynnik kontrastu wynosił co najmniej 4,5:1, a tym samym odpowiadał poziomowi AA według wymogów WCAG 2.2.
Rys. 9. Licznik aktywnych zadań po zmianach kontrastu
w motywie WEBCON Light
Kolory dla poszczególnych motywów systemowych dobrano tak, aby zapewnić jak najlepszą czytelność treści dla możliwie najszerszego grona odbiorców, a więc nadano im bardziej uniwersalny charakter.
Jedną z powiązanych zmian było wprowadzenie w oknie edycji motywów kolorystycznych parametrów Czcionka pól edycyjnych i Tło pól edycyjnych, za pomocą których będzie można definiować odpowiednio kolor czcionki i kolor tła w polach służących do wprowadzania danych wejściowych w Portalu, a także powiązanych ikon i symboli (np. w polach formularza).
Rys. 10. Nowe parametry w konfiguracji motywów kolorystycznych
Wybór kolorów czcionki i tła w polach edycyjnych jest dostępny w odniesieniu do własnych motywów kolorystycznych, natomiast w przypadku motywów systemowych obowiązywać będą kolory domyślne.
Rys. 11. Przykład pola edycyjnego w motywie WEBCON Dark
Po aktualizacji wersji w motywach zdefiniowanych wcześniej przez użytkowników pola edycyjne będą wyświetlane zgodnie z kolorystyką, która była dotychczas stosowana dla tego typu pól.
Nowy, kontrastowy motyw systemowy i powiązane zmiany
Poza zmianami związanymi z zapewnieniem właściwego kontrastu na stronach Portalu, wśród systemowych motywów kolorystycznych pojawił się nowy motyw o nazwie WEBCON Contrast Black Yellow, który został przygotowany specjalnie z myślą o osobach z dysfunkcją narządu wzroku oraz szczególnymi potrzebami w tym zakresie. Charakterystyczną cechą tego motywu jest wyższy współczynnik kontrastu: dane tekstowe są prezentowane w kolorze żółtym lub białym, tło stron w kolorze czarnym (przy czym takie tło będzie pojawiać się również tam, gdzie wcześniej wyświetlane były zdjęcia), a elementy graficzne, np. związane z aplikacją, kafelkami startu, ulubionymi, czy szczegółami zadań i komentarzami na formularzu, będą akcentowane kolorem niebieskim. Domyślnym kolorem fokusu dla tego motywu jest kolor różowy.
Rys. 12. Strona główna Portalu z włączonym motywem
WEBCON Contrast Black Yellow
Kolorowanie wierszy raportu, wierszy Listy pozycji, nadpisywanie kolorów atrybutów i przycisków ścieżek przejścia oraz innych elementów formularza jest domyślnie wyłączone dla systemowego motywu kontrastowego, jednak w bazie danych dodano nowy parametr CustomColoringInContrastThemeEnabled, który w razie potrzeby umożliwi zastosowanie niestandardowych kolorów wymienionych elementów w motywie kontrastowym.
Ponadto umożliwiono przygotowanie dodatkowych motywów kontrastowych bazujących na innej palecie kolorów. Do tego celu w oknie edycji każdego z motywów udostępniono dedykowane pole wyboru Kontrastowy:
Rys. 13. Oznaczenie motywu jako kontrastowy przy użyciu nowego parametru
Konfigurując motyw kontrastowy, administrator będzie mógł samodzielnie wskazać odpowiednio dobrze kontrastujące się kolory poszczególnych elementów Portalu, które będą dostosowane do indywidualnych potrzeb użytkowników.
Pole wyboru jest widoczne również na stronie głównej motywów kolorystycznych (Menu użytkownika → Administracja → Motywy kolorystyczne).
Opcje dostępności
W związku z wprowadzonymi zmianami górny pasek menu w Portalu przystosowano w taki sposób, aby zapewnić łatwy i szybki dostęp do nowych funkcjonalności. Dodano ikonę 
, po kliknięciu na którą wyświetlane jest okno Opcje dostępności.
Rys. 14. Okno z opcjami dostępności
Za jego pośrednictwem można szybko zmienić motyw Portalu na systemowy motyw WEBCON Contrast Black Yellow lub inny własny motyw oznaczony jako kontrastowy. Po odznaczeniu wybranego motywu przywracany jest motyw domyślny. Okno pełni również rolę edukacyjną: znajdują się tutaj uniwersalne podpowiedzi dla użytkownika dotyczące zmiany wielkości ekranu za pomocą myszy lub klawiatury, które różnią się w zależności od wykorzystywanego systemu operacyjnego.
Aby ikona dostępności była wyświetlana w menu górnym w Portalu, konieczne jest zaznaczenie nowego, dedykowanego pola wyboru Przycisk dostępności w konfiguracji WEBCON BPS Designer Studio (Konfiguracja systemu → Parametry globalne → Wygląd).
Rys. 15. Parametr w Designer Studio determinujący widoczność
okna z Opcjami dostępności
Opcje dostępności można również otworzyć na stronie głównej Portalu, korzystając ze wspomnianych wcześniej Szybkich linków nawigacyjnych i wybierając opcję Przejdź do opcji dostępności za pomocą klawisza Tab.
Rys. 16. Link nawigacyjny prowadzący do Opcji dostępności
Komunikaty w Portalu
Wytyczne WCAG stanowią, że kolor nie może być jedynym nośnikiem informacji. Użytkownicy powinni mieć możliwość polegania również na dodatkowych elementach interfejsu, tak aby, opierając się na wrażeniach zmysłowych, mogli bez problemu odróżniać wyświetlane informacje i ich znaczenie, a następnie podejmować odpowiednie działania na stronie.
W odpowiedzi na te wymagania, w Portalu ujednolicono kolor tekstu wykorzystywanego w komunikatach błędów, ostrzeżeniach i wszelkich informacjach wyświetlanych w wyniku sprawdzania przez system operacji podejmowanych przez użytkownika oraz poprawności wprowadzanych danych. Dodatkowo tego typu komunikaty, ostrzeżenia i powiadomienia będą oznaczone jedną spójną ikoną z wykrzyknikiem w kolorze tekstu. W tym samym kolorze wyświetlana będzie gwiazdka informująca o wymagalności uzupełnienia pola / wybrania opcji w Portalu.
Rys. 17. Przykład komunikatu na formularzu
W przypadku systemowego motywu kontrastowego wyżej wymienione elementy będą wyświetlane w kolorze różowym, zapewniającym większy kontrast niż czerwień.
Rys. 18. Przykład komunikatu w motywie
WEBCON Contrast Black Yellow
ARIA i semantyczny HTML – korzystanie z czytników głosowych w Portalu
ARIA (Accessible Rich Internet Applications) to zestaw atrybutów i technik, które pozwalają na poprawę dostępności i interakcji użytkownika z treściami dynamicznymi, takimi jak aplikacje internetowe. ARIA rozszerza możliwości HTML i JavaScript poprzez dodanie nowych atrybutów, które dokładniej opisują elementy interfejsu użytkownika, ich role, właściwości i stany dla osób korzystających z technologii asystujących.
Zwiększenie dostępności cyfrowej Portalu wiązało się z ułatwieniem nawigacji po jego stronach osobom korzystającym z takich technologii. W tym celu dodano brakujące tagi ARIA oraz poprawiono strukturę HTML w obszarach dostosowanych do wymogów WCAG. Wprowadzono znaczniki rodzaju treści (tzw. landmarki) i przypisano poszczególnym fragmentom stron odpowiednie role, co pozwoliło skrócić czas niezbędny do odnalezienia określonego kontentu lub elementów nawigacji Portalu. Dzięki wprowadzonym zmianom informacje pochodzące z Portalu i przetwarzane przez czytniki głosowe (np. Windows Narrator, VoiceOver, TalkBack) będą bardziej przystępne i zrozumiałe dla użytkowników korzystających z tych narzędzi.
Badanie zgodności z wytycznymi WCAG
Na rynku istnieje wiele narzędzi, które analizują zgodność stron internetowych z kryteriami i zasadami WCAG i skanują je w poszukiwaniu problemów z dostępnością. Wśród nich można wyróżnić m.in. Lighthouse – narzędzie deweloperskie przeglądarki Google Chrome, Wave Web Accessibility Evaluation Tool (dostępne w wersji przeglądarkowej i jako dodatek do przeglądarek), Siteimprove Accessibility Checker, czy axe – wtyczka do różnych narzędzi deweloperskich przeglądarek internetowych oraz biblioteka JavaScript.
Przeprowadzone dotychczas badania z wykorzystaniem wybranych narzędzi nie wykazują błędów z dostępnością w obszarach, które podlegały aktualizacji podyktowanej zapewnieniem ich zgodności z WCAG.
Rys. 19. Wynik analizy dostępności Portalu przeprowadzonej
za pomocą dodatku Wave Web Accessibility Evaluation Tool
Podsumowanie
Uniwersalność stron internetowych jest jednym z ważniejszych założeń towarzyszących projektowaniu treści udostępnianych w sieci. Aspekt ten dodatkowo zyskał na znaczeniu w związku z opracowaniem międzynarodowych standardów WCAG, które określają dokładne kryteria, jakie treści internetowe muszą spełniać, aby mogły być uznane za „dostępne” dla wszystkich. Mając na uwadze rosnące zapotrzebowanie na tego typu treści, wprowadzono liczne zmiany w Portalu, dostosowując jego strony do obowiązujących wytycznych, które w niedalekiej przyszłości mogą stać się dla dostawców obligatoryjne. Przeprowadzone modyfikacje wiązały się m.in. z ułatwieniem nawigacji po Portalu bez użycia myszy (w tym za pośrednictwem nowych komponentów), dostosowaniem kolorów i ich kontrastu w motywach systemowych, poprawą widoczności fokusów, kontrolek i pól, dodaniem opisów do elementów interfejsu, ujednoliceniem wyglądu komunikatów, dodaniem specjalnych atrybutów ARIA, czy też dostosowaniem obszarów Portalu do obsługi z wykorzystaniem technologii asystujących. Badania wykonywane przy użyciu dostępnych narzędzi jasno wskazują, że dostępność cyfrowa Portalu została znacznie zwiększona, czyniąc go uniwersalnym narzędziem pracy dla szerokiej grupy użytkowników.
