Wytyczne WCAG, czyli jak powinno się tworzyć strony www?

Standardy w3c dla stron www

XXI wiek to nieustanna obecność nowoczesnych technologii w codziennym życiu. Ich wykorzystanie jest zależne wyłącznie od woli i potrzeb indywidualnych użytkowników, którzy różnią się wymaganiami i funkcjonowaniem w świecie. Jedno nie ulega wątpliwości, komunikacja interpersonalna oparta jest na cyfrowych urządzeniach, popularnych w każdym zakątku globu. Jak zatem sprawić, aby dotrzeć do maksymalnie dużej grupy odbiorców, jednocześnie dbając o ich komfort i wygodę korzystania?

Podstawą współczesnych stron internetowych jest responsywność, a więc elastyczny, dopasowujący się do wszystkich wykorzystywanych urządzeń. Należy bowiem pamiętać, iż przeciętny użytkownik może korzystać z tradycyjnego komputera, ale równie dobrze, poszukiwanie wszelakich informacji może mieć miejsce przy pomocy podręcznych tabletów, czy też najbardziej rozpowszechnionych – smartfonów. W końcu każdy odbiorca zasługuje na maksymalną wygodę i odbiór prezentowanych przez Ciebie treści w niezakłóconym stanie.

Krok pierwszy – dbałość o różnorodne potrzeby użytkowników

Ważnym, aspektem odniesienia sukcesu w internecie jest wielopłaszczyznowe spojrzenie. Należy wyjść poza własne uprzedzenia i uświadomić sobie, że każdy użytkownik w odmienny sposób wyszukuje treści w Internecie. Istnieje bowiem cała paleta możliwości, poza klasycznym przesuwaniem palców po dotykowym ekranie.

W społeczeństwie funkcjonują osoby z różnymi problemami, które mimo wszystko chcą być ‘na bieżąco’ i móc korzystać z sieci. Mowa tu na przykład o osobach z dużą wadą wzroku, wykorzystujących specjalne czytniki ekranu do słuchania treści zawartych na danej stronie www.

 

strona w3c

 

Są również użytkownicy, stosujący wyszukiwanie treści poprzez pałeczkę czy rysik trzymany w ustach – ich możliwości motoryczne stanowią spore ograniczenie, z którym jednak można dać sobie radę. Na co dzień zdrowy człowiek zapomina o tak podstawowych wyzwaniach, bowiem nie są one częścią jego świata. Tym czasem sprawa jest na tyle poważna, że powstały specjalne wytyczne WCAG (Web Content Accessibility Guidelines), pozwalające na zebranie najważniejszych wskazówek dla społeczności programistów. Oto niektóre z nich.

Rola obrazów dla odbiorców stron

Projektowanie stron jest czynnością czasochłonną, która wymaga zastosowania pewnych, sprawdzonych rozwiązań. Obecnie, w mediach społecznościowych coraz częściej opowiada się daną historię nie słowami, a znakami wizualnymi, do których zalicza się: infografiki czy wielobarwne zdjęcia. Choć pozwalają one na zachowanie maksymalnej różnorodności, dla osób niedowidzących nie stanowią właściwie żadnej wartości.

Teksty alternatywne (ALT) są rozwiązaniem, które opisuje obrazy w danej witrynie www dla wszystkich niedowidzących użytkowników, korzystających z czytników ekranów. Coraz częściej zapomina się jednak o opisach alternatywnych, co może poważnie zaszkodzić popularności danej strony. Warto więc, o ile obrazy nie stanowią wyłącznie dekoracji, zadbać o przemyślane, a jednocześnie proste opisy ALTów.

W jaki sposób? Zasada jest banalnie prosta…. Zamiast napisać „słodki pies” ( co jest absolutnie niepomocne i mało obrazowe), można posłużyć się słowami „niewielki buldog niosący w pysku zieloną piłkę”, umożliwiając opowiedzenie historii w sposób przejrzysty i czytelny – nawet dla osób niedowidzących.

Warto tu zwrócić uwagę na ilość znaków w opisach – najlepiej sprawdzają się te nie przekraczające 125 znaków, gdyż czytniki ekranów interpretują je bez większego problemu.

 

Atrybut Alt

 

Dodawanie atrybutu ALT w obrazach jest także pomocne gdy obrazy z jakichś powodów nie zostały wczytane. Dodatkowo ich prawidłowa konstrukcja może mieć pozytywny odbiór przez roboty indeksujące, ponieważ nie analizują one tego co jest na obrazie. Więcej na ten temat przeczytasz w dziale o optymalizacji stron.

Popularną praktyką, jest również wykorzystywanie treści wideo, które zwykle przyciągają uwagę potencjalnych odbiorców. Aby mogły spełniać swoją funkcję, nagrania powinny być dodatkowo opatrzone właściwą transkrypcją i napisami. Animacje nie zawierające dźwięku dobrze jest urozmaicić dodając oddzielną ścieżkę dźwiękową, pozwalającą na dokładne opisanie sytuacji mających miejsce na nagraniu.

Logiczna organizacji treści na stronie

Co sprawia, że niektóre witryny zachwycają, a inne drażnią? Właściwa i logiczna organizacja treści. Jeśli wszystko zamieszczone na stronie ma jakąś spójną koncepcję, pozwala na swobodne poruszanie się po poszczególnych działach czy zakładkach, wówczas strona zachęca do ponownych odwiedzin i umożliwia płynne wyszukiwanie konkretnych informacji. Co ważniejsze, przed wersją ostateczną, dobrze jest kilkukrotnie sprawdzić, jak czytnik ekranu poradzi sobie z zawartością witryny. Pozwoli to na zapewnienie maksymalnego komfortu użytkowników, a jednocześnie zwiększy zakres potencjalnych odbiorców.

Spójny i nienatarczywy zestaw kolorów

Zły dobór kolorów może nie tylko wywoływać mętlik, ale i skutecznie rozmazywać zamieszczane teksty. Jeśli więc tło będzie zbliżone do liter, słowa staną się niewyraźne. Spójna paleta barw pozwoli na zachowanie maksymalnej harmonii i ułatwi odbiór treści, nawet osobom z problemami ze wzrokiem. WCAG zaleca współczynnik kontrastu 4,5 do 1. Istnieje wiele narzędzi i wtyczek do określenia kontrastu kolorów w projekcie, dlatego warto posiłkować się sprawdzonymi rozwiązaniami, mającymi korzystny wpływ na wygląd całego projektu.

Staranne tworzenie formularzy

Kolejną ważną wskazówką jest ostrożne projektowanie formularzy na stronach. Należy bowiem zdawać sobie sprawę, że właściwie każda strona www takowe posiada. W serwisach randkowych pojawiają się formularze przy wypełnianiu danych osobowych, sklepy internetowe proszą użytkowników o wypełnianie formularzy dotyczących wysyłki konkretnych produktów. Nie jest więc przesadą określenie, że wprowadzanie do sieci jakichkolwiek danych wiąże się najczęściej z wypełnianych formularzy. Nie byłoby w tym nic dziwnego, gdyby nie fakt, że duży odsetek z nich jest niespójny, nielogiczny i stanowi realną przeszkodę dla osób z pewnymi ograniczeniami. Tworząc takie rozwiązanie, należy pamiętać o przejrzystości.

Każde pole musi posiadać konkretną etykietę, gdyż tylko dzięki nim czytniki ekranów są w stanie rozszyfrować niezbędne, dla użytkownika, informacje.

Poniżej zebrano kilka praktycznych uwag, pozwalających na łatwiejsze projektowanie konkretnych formularzy:

  • Długie formularze warto podzielić na kilka etapów, aby nie nużyły użytkownika,
  • Istotna jest obecność spacji pomiędzy okienkami, w przeciwnym razie tekst będzie zapchany, a tym samym trudny do odczytania,
  • Segregacja pól ułatwi wypełnianie danych, tym samym nie zniechęcając do odwiedzin witryny,
  • Warto kilkukrotnie sprawdzić limit czasu na wprowadzanie informacji, aby w razie potrzeby szybko go zresetować,
  • Dobrze jest zachować nawigację pól poprzez tabulację.

 

Czytelny i przejrzysty formularz na Airbnb

Czytelny i przejrzysty formularz na Airbnb

 

Praktyczna typografia w celu zwiększenia użyteczności strony

Nie trzeba chyba nikomu tłumaczyć, że na atrakcyjność ale i odbiór danej strony internetowej ma wpływ również dobór właściwej czcionki. Zbyt fantazyjne rozwiązanie może odstraszać i męczyć, tym bardziej, jeśli tekst jest dość długi. Zastosowanie uniwersalnej koncepcji nie tylko pozwoli na proste skanowanie, ale również umożliwi osobom niedowidzącym zastosowanie odpowiednich programów powiększających.

Wielu programistów stawia także na podkreślenia istotnych fraz w postaci konkretnych, najczęściej dość jaskrawych kolorów. Niestety osoby z ograniczeniami wzrokowymi mogą nie dostrzec intencji i tej formy oznaczania. Dla ułatwienia, można więc zastosować odpowiednie wyjaśnienia bezpośrednio w tekście, gdyż nie zmienią one treści, a pozwolą na jeszcze łatwiejszy odbiór.

 

Przykład minimalistycznego podejścia do typografii

Przykład minimalistycznego podejścia do typografii

 

Odbiór treści w Internecie może być spójny i bezproblemowy, także dla licznej grupy osób z różnorodnymi ograniczeniami. Przecież w codziennym życiu istnieje wiele udogodnień, które można swobodnie przenieść w świat cyfrowy. A wówczas strona internetowa stanie się jeszcze lepsza, a odbiór Twoich treści dotrze do większej ilości osób.

 

Wytyczne WCAG, czyli jak powinno się tworzyć strony www?
Ocena: 4.1 (81.54%) 13

Joanna Nowicka

Od lat jestem pasjonatką nowych technologii. Interesuję się przede wszystkim marketingiem internetowym i tworzeniem stron. Moją ogromną pasją jest SEO.

Powiązane artykuły

2 komentarze
  • wilq

    Ciągle jakieś nowe zasady i standardy a gdzie miejsce na spontaniczność? Ale spoko, może i jest to konieczne.

    Marzec 28, 2018 Odpowiedz
  • cris

    W3C to już od ’94 wyznacza standardy. Nie stosowanie się do tych reguł jest nierozsądne. Założył to w zasadzie twórca www, więc wiedział zapewne co robi. Wszystko oczywiście ewoluuje.

    Marzec 28, 2018 Odpowiedz

Leave a Comment