Dzisiaj z pewnością nikt nie wyobraża sobie życia bez komputera czy smartfona z dostępem do internetu. Codziennie korzystamy ze wszystkich dobrodziejstw tego świata , nie zastanawiając się nawet, jak ogromną rolę pełnią one w naszym życiu.
Internet oknem na świat dla niepełnosprawnych
Dla wielu osób Internet jest tylko rozrywką, ale dla osób niepełnosprawnych jest on podstawowym narzędziem pracy oraz nauki, a czasami jedyną formą kontaktu ze światem. Niestety pomimo rozwoju technologi wiele stron i miejsc jest dla nich niedostępna.W poniższym artykule pod lupę weźmiemy dostępność strony Politechniki Gdańskiej dla osób niewidomych oraz z dysfunkcjami narządu wzroku. Jest to szczególnie ważne, ponieważ coraz więcej osób niewidomych i niedowidzących decyduje się na podjęcie nauki na studiach wyższych.
Czy strona Politechniki Gdańskiej jest dostępna?
Niestety jak wiele stron w Internecie i ta należąca do Politechniki Gdańskiej nie jest w całości przystosowana do potrzeb niewidzących i słabowidzących. Poniżej wymieniam główne problemy jakie napotkałem podczas przeglądania strony.
Nieprawidłowo zastosowane atrybuty alt
Wchodząc na główną stronę Politechniki Gdańskiej, widzimy sporą ilość grafik, których opisy alternatywne nie przekazują sensownych treści. Zamieszczanie tego typu atrybutów alt w witrynie wydaje się bezcelowe, ponieważ nie mają one wpływu zarówno na dostępność, jak i pozycjonowanie strony. Osoba niewidoma i niedowidząca napotka tu niemałe trudności, ponieważ informacje nie są zbyt czytelne, a ich zamieszenie wydaje się chaotyczne i niespójne.<img src="/files/styles/home_slider/public/2021-10/slajder%201280x853.jpg?itok=6Yf47VIk"alt="napis Pismo PG "typeof="foaf:Image" class="img-fluid">W tym przypadku atrybut alt niekoniecznie mówi nam o tym co znajduje się na grafice. Z punktu widzenia osoby niewidomej znajduje się tam tylko napis „Pismo PG”, a to nieprawda. Obrazek poza napisem zawiera również grafikę przedstawiającą naszą planetę.<a href="https://faru.edu.pl/" class="d-inline-block text-center logo-footer-pg-link-zf"><img src="/themes/custom/politechnika_gdanska/images/ZUF_logotyp_pl.svg"alt="Strona główna - Związek Uczelni Fahrenheita" class="logo-footer-zf"></a><img src="/files/styles/home_slider/public/2021-11/debaty___2-1.jpg?itok=Up7e2yd8"alt="Niebieska grafika z rysunkiem Motławy "typeof="foaf:Image" class="img-fluid">Powyższy kod obrazuje za to niezbyt dobre opisanie obrazka. Górna część, czyli opis logo w ogóle nie jest odczytywany przez Screen Reader lub jest bardzo ciężko dostępny. Informacje z kodu powyżej powinny być umieszczone tak, aby wtyczka odczytywała je zaraz przed odczytaniem nagłówka. Ewentualnie wszystkie informacje można było umieścić w jednym miejscu stosując atrybut longdesc=”Tu należy wpisać co jeszcze znajduje się na grafice”.
Źle zaprojektowana nawigacja
Przechodząc do menu głównego można zauważyć, że osoba korzystająca z nawigacji za pomocą klawiatury oraz wtyczek typu Screen Reader, będzie miała niemały problem z poruszaniem się po stronie. Menu rozwija się automatycznie po najechaniu kursorem na daną kolumnę, co sprawia, że musimy przejrzeć każdy link, zanim dotrzemy do interesującego nas miejsca lub informacji, których faktycznie poszukujemy na witrynie. Nie ma też możliwości przeskoczenia do interesującego nas elementu menu, nawet jeżeli znamy już je na pamięć.Pierwszy problem rozwiązujemy na przykład za pomocą dodania do każdego elementu w menu atrybutu aria-expand=”false”.<nav><div> // to element menu o nazwie Studenci z dwoma przykładowymi rozwijanymi elementami Koronawirus oraz studia<li class="list-inline-item"><a href="https://pg.edu.pl/studenci"data-drupal-link-system-path="node/1" aria-expanded=”false”>Studenci</a> //Wstawiony atrybut aria-expanded zapobiegający automatycznemu otwieraniu<ul class="list-unstyled next-level rounded-bottom"><li><a href="https://pg.edu.pl/koronawirus"data-drupal-link-system-path="node/2313">Koronawirus</a></li><li><a href="https://pg.edu.pl/studenci/studia"data-drupal-link-system-path="node/5">Studia</a></li></ul></li></div></nav>Problem z wybieraniem określonego elementu menu da się naprawić dopisując do elementów menu atrybut tabindex. Pozwala on przejść do poszczególnych pozycji za pomocą jednego przycisku.<li><a tabindex="2" href="https://pg.edu.pl/pracownicy"data-drupal-link-system-path="node/46">Pracownicy </a></li>W powyższym przykładzie tabindex="2" oznacza, że po naciśnięciu dwójki na klawiaturze przeniesie nas ona do sekcji pracownicy. Niestety takich rozwiązań na stronie nie znajdziemy.
Kolejne niedociągnięcia w umieszczeniu opisów zdjęć oraz brak atrybutów alt
Po przejściu przez rozbudowane menu, znajdują się sekcje wyróżnione. Znowu pojawiają się grafiki, które posiadają nieczytelny i dość bezsensownie użyty atrybut alt. Dodatkowych informacji o tym co znajduje się na grafikach próżno szukać, ponieważ prezentowany obrazek nie zawiera żadnych głębszych danych.Niestety w przypadku osób z uszkodzonym narządem wzroku jest niezwykle ważne, aby pod umieszczanymi zdjęciami, czy grafikami zamieszczać jak najbardziej rozbudowane opisy alternatywne. Tylko umieszczenie ich pozwala na zapoznanie się takiego użytkownika z tym, co jest zamieszczone na grafice. Projektanci stron powinni wczuć się w role niewidomego, który nigdy w życiu takiej strony nie widział i na tej podstawie stworzyć adekwatny opis zdjęcia czy grafiki.
Brak polskiego tłumaczenia przycisków nawigujących
Kolejną przywara strony są przyciski nawigujące, które wyświetlają się pomiędzy slajdami. Nie posiadają opisów w języku polskim. W tym przypadku wystarczy zmienić atrybut aria-label, jak na poniższym przykładzie.<button class="splide__arrow splide__arrow--next"type="button"aria-controls="splide01-track"aria-label="Next slide" // aria-label=”Następny slajd”><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 40 40" width="40"height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></button>
Brak możliwości zmiany fontu i kontrastu
Niestety, na stronie nie pojawia się także możliwość zmiany kontrastu i rozmiaru fontu, co dla osób słabowidzących byłoby sporym udogodnieniem. Zmiana wielkości fontu może być zaimplementowana na przykład tak:HTML<p><a title="Zwiększ rozmiar liter" href="#" onclick="changeFontSize(2); return false">Zwiększ</a><span class="unseen">.</span><ahref="#" title="Przywróć domyślny romiar liter" onclick="revertStyles(); return false">Przywróć</a><span class="unseen">.</span><a href="#" title="Zmniejsz rozmiar liter"onclick="changeFontSize(-2); return false">Zmniejsz</a></p>JSfunction changeFontSize(sizeDifference) {currentFontSize = parseInt(currentFontSize, 10) + parseInt(sizeDifference * 5, 10);if (currentFontSize > 180) {currentFontSize = 180;} else if (currentFontSize < 60) {currentFontSize = 60;}setFontSize(currentFontSize);}W bardzo podobny sposób można również zmienić kontrast. Można również posłużyć się oddzielnymi arkuszami css.<li class="list-inline-item contrast"><a href="#" class="Button-Highcontrast"title="Czarno-biały"><span class="Label">AA</span></a><a href="#" class="Button-Highcontrast2"title="Średni kontrast"><span class="Label">AA</span></a><a href="#" class="Button-Highcontrast3"title="Wysoki kontrast"><span class="Label">AA</span></a></li>Css: przykład.Button-Highcontrast3 {color: black;background-color: #ff0;}
Źle umieszczone nagłówki
Przechodząc dalej,, w sekcji „Aktualności” z linków i nagłówków można odczytać więcej o prezentowanych artykułach. Jednak tutaj użytkownik może nieprawidłowo odczytać zamieszczone treści, ponieważ nagłówek znajduje się pod linkiem, prowadzącym do artykułu. Może to wprowadzać użytkowników w błąd.Kolejnym problemem jest powielona treść z linku umieszczona również w nagłówku. To zdecydowanie utrudnia prawidłowy odbiór strony i sprawia, że użytkownik traci czas na odnalezienie się w treści.<li class="media"><a href="https://pg.edu.pl/aktualnosci/... class="sr-only">Prof. Katarzyna Zielonko-Jung członkinią Rady Klimatycznej </span></a> // tytuł po raz 1<div class="media-body"><h3 class="h5 mt-0 mb-1">Prof. Katarzyna Zielonko-Jung członkinią Rady Klimatycznej </h3> //tytuł po ra drugi<p class="d-lg-none">Dr hab. inż. arch. Katarzyna Zielonko-Jung z Katedry z Wydziału Architektury została powołana...</p></div><img class="img-fluid" src="alt=""></li>W powyższym kodzie wystarczy zdublowano informacje o tytule, a dodatkowo link umieszczony jest wyżej niż nagłówek.
Brak zoomu na klawiaturę
Nawigacji po stronie nie ułatwia fakt, iż strona nie jest w żaden sposób dostosowana do nawigacji za pomocą klawiatury oraz nie posiada zoomu klawiatury. Nie działają też skróty klawiszowe.W związku, z czym osoby całkowicie niewidome będą musiały poświęcić więcej czasu na zapoznanie się z treścią strony.
Nieprawidłowo dodane filmy
Na witrynie Politechniki Gdańskiej nie brakuje również zamieszczonych filmów. Nie mają one opisu, przycisku odtwarzania, ani też możliwości przewijania za pomocą klawiatury. Zastosowanie tych udogodnień pozwoliłoby na łatwiejsze korzystanie ze strony internetowej osobom niewidomym i niedowidzącym.<div class="youtube-embed-wrapper"style="position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden"><iframe allowfullscreen="" frameborder="0" height="360" src="style="position:absolute;top:0;left:0;width:100%;height:100%" width="640"></iframe></div>Jak widać nie ma tutaj ani nagłówka, który mógłby odczytać Screen Reader, ani możliwości sterowania klawiaturą. Problem można naprawić dodając nagłówek lub span z klasą „sr-only”. Sterowanie dodajemy za pomocą dodania funkcji:function start() {var video = document.getElementById("video");var button = document.getElementById("start");if (video.paused || video.ended) {button.title = "pause";button.innerHTML = "pause";video.play();}else {button.title = "play";button.innerHTML = "play";video.pause();}}Powyższy kod pozwala na odpalanie i zatrzymywanie filmu przyciskiem.
Podsumowanie
Podsumowując, niestety strona Politechniki Gdańskiej nie jest odpowiednio przystosowana dlaosób niewidomych i słabowidzących. Nie stawia to uczelni w dobrym świetle, ponieważ osoby,doświadczające tego typu trudności chcą studiować, rozwijać się i zdobywać satysfakcjonującestanowiska pracy.
Osoby z niepełnosprawnościami powinny móc swobodnie poruszać się po każdej stronie internetowej, a materiały i informacje umieszczane na witrynach powinny być przygotowane w taki sposób, aby możliwe było zapoznanie się z ich treścią przez każdą osobę niezależnie od rodzaju niepełnosprawności.
Comments
