Intercity to największy w Polsce przewoźnik kolejowy. Należy on do grupy PKP i oferuje swoje usługi pod markami Tanie Linie Kolejowe (TLK), InterCity, Express InterCity oraz Express InterCity Premium, obsługiwany za pomocą szybkich i oferujących wysoką jakość podróży pociągów Pendolino. Są to składy produkowane we Włoszech przez francuski koncern Alstom, jednego z największych na świecie producentów pojazdów szynowych. Warto w tym miejscu podkreślić, że pociągi Pendolino poruszają się z największą w Polsce prędkością wynoszącą 200 km/h. Prędkość ta jest rozwijana na około 140-kilometrowym odcinku linii kolejowej nr 4 oraz na 113-kilometrowym odcinku linii kolejowej nr 9.
Spółka InterCity oferuje szynowe przewozy pasażerskie w relacjach międzymiastowych i międzyregionalnych. Za pośrednictwem strony internetowej intercity.pl można nabyć bilet na pociąg tej spółki. Jak ten zakup wygląda z perspektywy osoby niewidomej można będzie się dowiedzieć z lektury niniejszego artykułu.
Załóżmy – w ramach tych testów – że po wejściu na powyższy adres internetowy, chcę zalogować się na swoje konto, a następnie dokonać zakupu biletu w wybranej przeze mnie relacji.
Osoby niewidome czy słabowidzące korzystające z programu udźwiękawiającego przeglądają strony internetowe za pomocą odpowiednich klawiszy nawigacyjnych, których obsługa dodana jest przez czytnik ekranu. Są to m.in. litera „H”, która pozwala poruszać się pomiędzy nagłówkami, „cyfry od 1 do 6”, które pozwalają przemieszczać się pomiędzy konkretnymi stopniami nagłówków, litera „K” skacze nam po hiperłączach, litera „V” przeskakuje na odwiedzony link, a literą „F” oraz „B” przemieszczamy się pomiędzy polami formularzy i przyciskami na danej witrynie internetowej. Powyższe klawisze mogą się nieco różnić, zależnie od używanego programu udźwiękawiającego, ale są to zawsze litery lub cyfry na klawiaturze alfanumerycznej komputera. Dodatkowo klawisz Enter pozwala na otworzenie danego linku czy przycisku, a strzałkami góra/dół czytamy poprzednie/następne kilkadziesiąt znaków na stronie internetowej. Dlatego niezwykle ważne jest dla takich osób, aby wszystkie elementy strony, takie jak nagłówki, linki, przyciski, pola wyboru, pola edycji, listy rozwijane i inne elementy, były odpowiednio zaprogramowane w kodzie strony.
Na początku przejrzyjmy całą stronę internetową tego przewoźnika. Poruszając się za pomocą klawiszy nawigacyjnych programu udźwiękawiającego, możemy zauważyć, że występuje tam nieprawidłowa hierarchia nagłówków, ponieważ mamy najpierw nagłówek stopnia pierwszego, a potem od razu występują nagłówki poziomu czwartego i na samym końcu strony występuje stopień drugi nagłówka. Dlatego należałoby na tej witrynie internetowej poprawić kolejność nagłówków od „<h1>” do „<h6>”, ponieważ ułatwi to poruszanie się po zawartości witryny osobom niewidomym.
Następne błędy dostępności, które odnajdziemy na stronie internetowej intercity.pl, związane są z umieszczeniem przycisków oraz linków w jednej linii, co osobom niewidomym, które przeglądają witrynę internetową za pomocą strzałek góra/dół, utrudni to dotarcie do konkretnej funkcji zawartej pod danym przyciskiem lub hiperłączem. Sytuacja taka występuje między innymi na początku strony przy przyciskach „Zaloguj się” i „Załóż konto” oraz zaraz pod tym w następujących linkach: kup bilet, wyszukaj połączenie, sprawdź godzinę odjazdu.
Ten błąd dostępności można na tej witrynie internetowej naprawić na dwa różne sposoby. Po pierwsze poprzez wstawienie znacznika HTML „<br />” w kodzie strony pomiędzy przyciskami lub hiperłączami, co pozwoli przenieść te elementy do nowych linii. Niestety, ten sposób ma jedną wadę, ponieważ po zastosowaniu znacznika „<br />” zawartość wizualna strony może źle wyglądać dla osób widzących. Dlatego lepszym pomysłem jest drugi sposób, czyli użycie znacznika „inline-grid” w stylach CSS w odniesieniu do powyżej opisanych hiperłączy oraz przycisków. Ostatnią nieprawidłowością, jaką odnajdziemy na głównej stronie, są dwa niezaetykietowane linki, które znajdują się przed tekstem „Jak działamy?”.
Gdy już odnajdziemy na stronie hiperłącze „Zaloguj się” i wejdziemy w nie, naciskając klawisz Enter, a następnie za pomocą klawisza nawigacyjnego „F” przejdziemy do pól formularzy, które są poprawnie zaetykietowane i czytelne dla osób niewidomych, gdzie możemy bez żadnych problemów wpisać swoje dane logowania. Po aktywowaniu elementu „Zaloguj” strona się przeładowuje i przeglądając wyświetloną zawartość, możemy szybko stwierdzić, że jesteśmy już na naszym koncie. Wszystkie błędy dostępności, które zostały opisane powyżej, występowały również po zalogowaniu się do konta użytkownika. Dodatkowo podczas przeszukiwania całej zawartości strony, możemy zauważyć, że różne kategorie nie są umieszczone pod nagłówkami, na przykład „<h3>Połączenia</h3>”, co ułatwiłoby bardzo poruszanie się po witrynie osobom korzystającym z programów udźwiękawiających. Ponadto, przed nagłówkiem „<h2>Szczegóły wyszukiwania</h2>” znajdowało się znowu jedenaście niezaetykietowanych hiperłączy, co należałoby poprawić, aby osoby mające problemy z widzeniem, wiedziały, gdzie się przeniosą po aktywowaniu danego linku. Dodatkowo przed tymi niedostępnymi elementami, były też dwa niezaetykietowane przyciski, które – nie wiedząc dlaczego – czasami znikały i program udźwiękawiający ich w ogóle nie czytał, więc to też trzeba byłoby poprawić.
Następnie spróbujmy wyszukać dane połączenie, aby sprawdzić jego cenę oraz opis i dodać je do naszego wirtualnego koszyka. W tym celu ponownie literą „F” szybko przeskoczymy do pierwszego pola edycyjnego o nazwie „Czego szukasz”, które akurat jest poprawnie zaetykietowane. Niestety, pod spodem nie znajdziemy żadnego przycisku o nazwie, na przykład, „Wyszukaj”, które po jego aktywowaniu pozwoliłoby na znalezienie wpisanej w powyższym polu danej frazy. Jednak po napisaniu „Gdynia” i naciśnięciu klawisza Enter, strona na szczęście się przeładowuje i po jednokrotnym naciśnięciu litery „H”, szybko możemy przeskoczyć do pierwszego nagłówka, gdzie mamy już wyświetloną liczbę znalezionych połączeń.
Następną czynnością, którą powinniśmy wykonać na stronie, jest znalezienie w wyszukiwarce dogodnego połączenia, z którego mamy zamiar skorzystać. W tym celu klawiszem szybkiej nawigacji, czyli literą „E”, przechodzimy do pola edycji z wyszukiwarką połączeń, które było poprawnie zaetykietowane „Wyszukaj połączenie”. Niestety, pod tym polem wyszukiwania, nigdzie nie było przycisku „Szukaj”, który mówiłby nam, że po jego wciśnięciu rozpocznie się wyszukiwanie wpisanej frazy w bazie tego przewoźnika. Nic jednak nie szkodzi, ponieważ uda nam się wyszukać połączenie po wpisaniu nazwy docelowej stacji, a następnie po naciśnięciu klawisza Enter, będąc cały czas w tym polu. Niestety, po przeładowaniu strony znowu występuje nieprawidłowa hierarchia nagłówków, ponieważ jedyny nagłówek, który jest na stronie, ma stopień 3 „<h3></h3>”. Pod nagłówkiem z nazwą wyszukiwanej stacji mamy dostępne opcje sortowania i filtrowania, które są wykonane w formie dostępnych dla programu udźwiękawiającego przycisków. Niestety, stacje docelowe nie są wstawione jako nagłówki, tylko jako linki, co trochę utrudnia ich przeglądanie z programem udźwiękawiającym. Kiedy już zdecydujemy się na konkretny pociąg i klikniemy Enter na przycisku „Dodaj do koszyka”, wtedy wyświetla się nam okno, gdzie musimy podać nasz kod pocztowy. W tym oknie znajdują się dwa przyciski w języku angielskim, co może stanowić problem dla osób, które nie są obeznane z tym językiem. Te przyciski to „modal close” oraz „open”. Po wpisaniu kodu pocztowego, pod polem, pojawia się przycisk z tym kodem, na którym naciskamy klawisz Enter. Po tej czynności kursor wraca znowu na przycisk „Dodaj do koszyka”, który musimy aktywować, aby dodać wybrane połączenie. Po jego kliknięciu pojawiają się trzy niezaetykietowane przyciski. Pierwszym możemy zmniejszyć liczbę wybranych połączeń, drugim możemy rozwinąć i wybrać strzałką w dół oraz klawiszem Enter ilość miejscówek, a trzecim przyciskiem możemy zmienić godzinę odjazdu. Wszystkie te powyższe przyciski powinny być odpowiednio zaetykietowane, najlepiej poprzez dodanie atrybutu „aria-label”, tak aby każdy użytkownik wiedział, co się wydarzy po ich wciśnięciu. Po wpisaniu w polu wyszukiwania dwóch kolejnych stacji docelowych „Wejherowo” oraz „Szczecin” nie napotkamy już innych problemów i dodamy wybrane połączenia do koszyka.
Następnie spróbujmy odszukać nasz koszyk, aby wybrać wyszukane połączenie i sfinalizować zamówienie. Niestety, na stronie nigdzie nie było przycisku lub linku z etykietką „Koszyk” i jedynie po wyświetlonej cenie na początku strony możemy domyślić się, że niezaetykietowany przycisk z ceną pozwoli rozwinąć nam opcję połączenia. W tym przypadku również warto byłoby oznaczyć przycisk pozwalający na przejście do zawartości koszyka atrybutem „aria-label”. Koszyk wyświetla nam się od razu pod łączną ceną zamówienia. W tym przypadku warto byłoby oddzielić trochę samą zawartość koszyka od reszty strony, na przykład elementem „<br />”, co byłoby dla osób niewidomych bardziej przejrzyste i zrozumiałe. Dodatkowo sama nazwa „Koszyk” umieszczona jest w nagłówku stopnia 5, więc tutaj też warto byłoby poprawić hierarchię, ponieważ przed tym nagłówkiem nie ma innego elementu tego typu na tej stronie. Tak samo błędem jest umieszczenie cen połączeń w koszyku w nagłówkach stopnia 6, ponieważ dezorganizuje to wykonywanie zakupów osobom niewidomym. W tym przypadku najlepiej byłoby, jakby każde połączenie w koszyku miało oddzielny nagłówek stopnia 2 lub 3, zależnie od występującej hierarchii, co ułatwiłoby ich przeglądanie z programem udźwiękawiającym. W koszyku mamy możliwość zmiany ilości dodanych połączeń, dzięki tak samo niezaetykietowanym przyciskom jak przy dodawaniu do koszyka, więc i tutaj warto byłoby zastosować atrybut „aria-label”. Na końcu zawartości koszyka, znajduje się przycisk „Do kasy”. Po jego aktywowaniu za pomocą litery „H” możemy przeskoczyć do pierwszego nagłówka, pod którym znajdują się już opcje do dokończenia zamówienia. Zanim jednak do tego dojdziemy, natkniemy się na dwa elementy, które dla programu udźwiękawiającego są zwykłym tekstem. Po naciskaniu na nich klawiszem Enter zmieniała się zawartość umieszczona pod spodem, więc te elementy powinny być zaprogramowane najlepiej jako zaetykietowane przyciski. Po aktywowaniu konkretnej opcji z dniem podróży – okno znika i znowu znajdujemy się na poprzedniej stronie. Przeglądając wyświetloną stronę, zobaczymy kolejny niezaetykietowany przycisk znajdujący się pod polem edycyjnym do wpisania ewentualnego kodu kuponu promocyjnego, więc i tutaj należałoby ten element poprawić, najlepiej poprzez wstawienie atrybutu „aria-label”. Nie znajdziemy nigdzie na wyświetlonej stronie możliwości wyboru godziny połączenia, więc po prostu klikamy Enter na przycisku „Dalej”. Kursor wskoczy nam znowu na okno, gdzie wybieramy datę, więc musimy jeszcze raz znaleźć przycisk z interesującym nas dniem i nacisnąć na nim klawisz Enter. Po tej czynności zostaniemy przeniesieni na stronę, gdzie były do uzupełnienia wszystkie pozostałe opcje potrzebne przy zamawianiu biletu. Cała strona jest dobrze pooznaczana nagłówkami, aczkolwiek znowu są one ułożone nie po kolei. Możemy tu zauważyć jeden błąd dostępności dla programu udźwiękawiającego w polach edycyjnych, gdzie wpisujemy dane podróżującego. Przed każdym polem prawidłowo znajduje się tekst, oznajmiający, co trzeba wpisać w poniższe pole, natomiast same pola edycyjne już nie zawierają etykietki, w związku z czym osoby niewidome, które przeglądają stronę samymi klawiszami nawigacyjnymi na klawiaturze, nie wiedziałyby, co należy wpisać w dane pole. Pod polem do wpisania uwag znajduje się przycisk do złożenia zamówienia.
Pod tym elementem znajdują się opcje filtrowania, z których możemy bez problemu skorzystać za pomocą programu udźwiękawiającego i dzięki temu uda nam się zmienić zakres cen wyświetlanych połączeń. Podstawowe opisy każdego połączenia są podane w czytelny i dostępny sposób, a po wejściu już w konkretną rzecz, możemy szybko za pomocą nagłówków przeskoczyć do szerszego opisu wybranego połączenia. Po zapoznaniu się z opisem kilku wybranych połączeń, znajdziemy najbardziej nam pasujące i możemy wtedy kliknąć na przycisk „Do koszyka”. Następnie, przeglądając stronę internetową od samej góry, szybko odnajdziemy link „Koszyk”, pod którym znajdziemy wybrane połączenie oraz jego łączną cenę. Po kliknięciu klawiszem Enter na hiperłączu „Do kasy”, strona nam się przeładuje i znajdziemy się w oknie, gdzie wybieramy szczegóły wybranej miejscówki.
Z wymienionych powyżej powodów zakup biletu kolejowego jest utrudniony dla osób niewidomych i słabowidzących. Zalecane jest, aby twórcy strony intercity.pl skonsultowali jej działanie z osobami z dysfunkcją wzroku i dokonali stosownych poprawek.