Panel Klienta

Dostępność cyfrowa stron internetowych

Znak dostępności cyfrowej
Michał Okoń

W tym wpisie chciałbym podzielić się z Tobą moim doświadczeniem i obserwacjami jeśli chodzi o dostępność cyfrową w internecie. Jestem w trakcie realizacji projektu strony internetowej dla szkoły, która musi wg. ustawy z 4 kwietnia 2019r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych spełniać wymagania WCAG2.1. Przeglądając inne strony internetowe podobnych instytucji powstało w mojej głowie wiele pytań, na które szukałem odpowiedzi. W efekcie wszystkich zebranych informacji powstał ten artykuł.

Web Accessability czyli dostępność cyfrowa stron internetowych – co to jest?

Dostępność cyfrowa jest bardzo szerokim i stosunkowo nowym tematem. Mówiąc wprost, dostępność cyfrowa ma zapewniać osobom z niepełnosprawnościami (np. wzroku, słuchu, ruchu) swobodne poruszanie się w internecie niezależnie czy jest to aplikacja mobilna, strona internetowa, sklep online itp. Oznacza to, że taka strona musi spełniać konkretne wymagania stawiane przez WAI (Web Accessibility Initiative – W3C), które występują w trzech poziomach dostosowań A, AA oraz AAA.

Dostosowanie strony nie jest jednorazowym zabiegiem. Strona internetowa stworzona zgodnie z wytycznymi np. WCAG2.1 (są to wytyczne dotyczące dostępności treści internetowych) nie będzie dostosowana już zawsze. Trzeba pamiętać, że stworzenie dostępnej strony internetowej, to tylko początek, należy jeszcze w odpowiedni sposób zamieszczać na niej treści. O dostępność zatem należy dbać cały czas, nie jest to jednorazowa akcja.

Błędnie interpretowana dostępność cyfrowa stron internetowych

Spotykałem się już z wieloma przypadkami, gdzie dostępność cyfrowa strony internetowej była zaimplementowana błędnie. Wielu twórców uważa, że wystarczy umieścić na stronie specjalny panel dostępności cyfrowej, który pozwoli na zmianę wielkości czcionki, kolorystyki itp. Na rynku jest mnóstwo wtyczek do popularnych systemów CMS, które teoretycznie sprawiają w cudowny sposób, że strona staje się zgodna z wytycznymi WCAG. Niestety, ale nic bardziej mylnego. Te wtyczki nie zapewnią dostępności dla strony internetowej, a jedynie mogą ją nieznacznie poprawić. To nie na tym polega dostosowywanie stron do wytycznych WCAG. Instalacją wtyczki czy samym paskiem dostępności z możliwością powiększenia tekstu tego nie załatwimy.

Przeważnie taka implementacja nie jest widoczna na pierwszy rzut oka. Wchodząc na taką stronę moglibyśmy powiedzieć, że jest to zwykła strona i wygląda tak samo jak przed implementacją dostępności. Kluczem wszystkiego jest tak naprawdę prawidłowo napisany kod strony internetowej. Oczywiście, oprócz dobrych praktyk jeśli chodzi o pisanie kodu, który będzie spełniał wymagania np. na poziomie AA należy pamiętać również o wizualnych aspektach projektu strony internetowej. Dla przykładu o odpowiednim kontraście między pierwszym a drugim planem, o efektach interaktywnych strony internetowej, aby były łatwe do zidentyfikowania, o wyglądzie linków, aby wszędzie były w takim samym, niezmiennym stylu itp.

Gdzie szukać informacji na temat dostępności cyfrowej stron internetowych?

Pierwszym źródłem informacji o dostępności cyfrowej jest oczywiście wspomniana już ustawa, w której wszystko jest opisane. Wiele informacji można również znaleźć na stronie rządowej gov.pl – dostępność cyfrowa. Od tej strony zacząłem własne poszukiwania. Niestety, poza wieloma ogólnymi bardzo informacjami nie znalazłem nic konkretnego. Znajduje się na niej wiele informacji, lecz same ogólniki związane z zagadnieniami tłumaczącymi co to jest dostępność cyfrowa, dlaczego jest tak ważna jeśli chodzi o podmioty publiczne, jakie są przepisy itp.

Dużo więcej praktycznej wiedzy znalazłem na stronie w3.org, która poświęcona jest w dużej mierze standardom dostępności stron internetowych z praktycznymi przykładami. Na stronie możemy uzyskać informacje praktycznie w każdym interesującym nas obszarze. Niezależnie czy szukamy informacji jako deweloperzy stron internetowych, projektanci, twórcy treści czy też ewaluatorzy, testerzy aplikacji internetowych pod kątem dostępności – w każdej z tych kategorii znajdziemy odpowiednie informacje.

W moim przypadku szukałem informacji jako deweloper. Bardzo zaskoczył mnie ogrom informacji jaki znalazłem na stronie włączając w to praktyczne przykłady kodu. Uświadomiło mi to również jak bardzo poważnie podchodzi się do tematu dostępności cyfrowej. Temat jest bardzo obszerny i wymaga poświęcenia dużej ilości czasu, aby zrozumieć i umieć wykorzystać w praktyce zdobytą wiedzę.

Konkretne przykłady

Poniżej przedstawiam niektóre przykłady, które znalazłem na stronie w3.org. To jedynie kilka z nich. Trzeba pamiętać o tym, że tworzenie stron, które mają być zgodne ze standardami narzuconymi przez WAI nie jest takie proste i oczywiste jak tworzenie zwykłych stron internetowych takich jak formowe strony czy sklepy internetowe. Należy bardzo dokładnie zapoznać się z dokumentacją dostępną na stronie w3.org i analizując zdobyte informacje pisać kod, który pozwoli tworzonej stronie internetowej być przyjazną dla osób z niepełnosprawnościami. A teraz konkrety.

Formularz wyszukiwania

To jeden z najbardziej powszechnych komponentów na stronach internetowych, który jest praktycznie na każdej z nich.

Wygląd formularza:

Search records by customer id or name

Kod formularza:

<form action="#" method="post">
  <div role="search">
    <label for="search">Search for</label>
    <input type="search" id="search" aria-describedby="search-help">
    <div id="search-help">Search records by customer id or name</div>
    <button type="submit">Go</button>
  </div>
</form>

Poprawna budowa formularzy jest bardzo ważna dla osób, które korzystają np. z czytników ekranu. W powyższym przykładzie widzimy oprócz standardowych atrybutów, atrybuty specjalnie wykorzystywane właśnie do ułatwienia dostępności – np. aria-description, który ma za zadanie wskazać id elementu, który zawiera opis formularza.

Często jednak jest tak, że w takiej prostej wyszukiwarce poza elementem input oraz button nie ma takiego opisu, co wtedy? Wtedy taki formularz, z zachowaniem standardów dostępności cyfrowej stron internetowych mógłby wyglądać tak jak poniżej:

Wygląd formularza:

Kod formularza:

<form action="#" method="post">
  <div role="search">
    <label for="search" class="screen-reader">Search records by customer id or name</label>
    <input type="search" id="search" aria-label="Text for search, min one word">
    <button type="submit">Go</button>
  </div>
</form>

Klasy CSS wykorzystane w formularzu:

.screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
}

Dzięki takiemu formularzowi czytniki ekranu oraz inne technologie wspomagające będą mogły odczytać zawartość praktycznie ukrytego elementu label, który technicznie rzecz biorąc jest widoczny w kodzie strony. Do ukrycia zawartości możnaby użyć również stylu display: none; lub visibility: hidden; jednak takie użycie styli w tym przypadku nie jest zalecane. Jak można przeczytać na stronie w3.org takie stylowanie elementów może przyczynić się również do ukrycia ich nie tylko dla przeglądarki, ale również dla czytników ekranów i innych technologii wspomagających.

Obrazy na stronie

Z obrazami jest nieco inaczej, ponieważ tutaj jest kilka zależności. Jednak ogólnie rzecz biorąc obrazy muszą mieć swój opis alternatywny, który mówi o informacjach przedstawionych na obrazie lub jaką pełni funkcję. Ten opis umieszczamy w atrybucie alt.

Co daje nam taki opis jeśli chodzi o kwestie wizualne?

Jeśli obraz jest dostępny, to opisu alternatywnego w ogóle nie widzimy na ekranie monitora, natomiast gdy obraz, który umieszczony jest na stronie został np. usunięty lub po prostu nie ma go w podanej lokalizacji, zamiast obrazu wyświetla nam się dodany tekst alternatywny.

Dzięki obrazom o wiele łatwiej zwizualizować nam pewne trudniejsze zagadnienia. Wspomagamy się wtedy zdjęciami, rysunkami czy też wykresami. Grafiki, które nie posiadają opisów alternatywnych są ogromną barierą dla osób z dysfunkcjami wzroku.

Dla osób korzystających z czytników ekranu, tekst zawarty w opisie alternatywnym takiej grafiki może być odczytany na głos lub przerobiony na Braille. Dzięki temu taka osoba może zachować cały wcześniejszy kontekst z uwzględnieniem umieszczonej w tekście grafiki lub zdjęcia.

Przykłady poprawnie umieszczonych zdjęć – kod

W przypadku artykułu

<img src="studenci.jpg" alt="Grupa studentów dyskutujących w parku">

W przypadku grafiki funkcyjnej. Np. link w logo prowadzący do strony głównej

<a href="https://mikehomestudio.pl/">
  <img src="mhs_logo.png" alt="MIKE HOME STUDIO - Strona Główna">
</a>

W przypadku gdy grafika ma wyłącznie charakter dekoracyjny, taki opis nie jest potrzebny. W takim przypadku grafika tego typu nie wnosi nic do samej treści, więc nie ma sensu dodawać jej jakiegokolwiek opisu alt="".

Podsumowanie

Jak widzisz, temat dostępności stron internetowych nie jest taki łatwy i na pewno żadna wtyczka (w przypadku systemów CMS) nie sprawi, że strona internetowa będzie spełniać wymagania WCAG w wersji 2.1, które obowiązują aktualnie. Przedstawione tutaj przykłady, to tylko jedne z najłatwiejszych do wdrożenia, a przecież strona internetowa od strony technicznej nie jest zbudowana z samych grafik i formularzy. Wykorzystujemy do tego sekcje, odpowiednie elementy języka HTML5 takie jak <nav>, <header>, <main>, <section>, <footer>, <aside> czy <article>, które również ułatwiają nam pisanie kodu spełniającego wymagania strony dostępnej cyfrowo.

Przydatne linki

Polskie tłumaczenie wytycznych WCAG 2.1

Jak samodzielnie zbadać dostępność cyfrową strony internetowej?

Walidator dostępności

1 1 vote
Jak bardzo przydał/spodobał Ci się ten artykuł?

Bądź na bieżąco z nowymi wpisami

Włącz subskrypcję i bądź na bieżąco z nowymi wpisami na blogu i promocjami w sklepie! ZERO spamu, same konkrety!

Subscribe
Powiadom o
guest
0 komentarzy
najnowszy
najstarszy oceniany
Inline Feedbacks
View all comments