• Chrzanowskiego 2, 81-198 Kosakowo.
  • 530 262 005
  • biuro@nautil.pl

Przykład strony zgodnej ze standardem WCAG 2.0

Przykład strony zgodnej ze standardem WCAG 2.0

W tym artykule pokażemy przykład strony internetowej zgodnej ze standardem WCAG 2.0 o poziomie AA (podwójne A). Adres prezentowanej strony to www.rewadomki.pl

Audyt strony został wykonany za pomocą bezpłatnego narzędzia WAVE (http://wave.webaim.org). Narzędzie to analizuję strukturę strony internetowej pod kątem zgodności ze standardem WCAG 2.0. Z lewej strony pokazane są nieprawidłowości i niezgodności ze standardem WCAG 2.0. Na czerwono (ERROR) pokazane są nieuzupełnione lub źle uzupełnione atrybuty znaczników.

Przykład: < img src="http://www.adresstrony.pl/obrazek.jpg"/> W przykładzie poniżej pokazane nie ma uzupełnionego atrybutu ALT, odpowiadającego za opis obrazka. Bez tego atrybutu strona staje się „nieczytelna” dla niektórych osób. Innym przykładem błędów oznaczonym na czerwono mogą być tak zwane „puste linki” a więc puste znaczniki anchoru. Przykład: < a href="http://www.adresstrony.pl"/>


Kolorem żółtym oznaczone zostały nieprawidłowości mniejszego stopnia, ale są to błędy które także wymagają poprawy. Przykładem takiego błędu jest występowania atrybutu alt o takiej samej wartości.

Przykład: < img alt="obrazek" src="http://www.adresstrony.pl/obrazek.jpg"/> < img alt="obrazek" src="http://www.adresstrony.pl/obrazek2.jpg"/> Mogą więc to być zatem dwa różne obrazki, które są podpisane tak samo – osoba zdrowa zobaczy dwa różne obrazy zaś osoba z upośledzeniem wzroku „zobaczy” 2 identyczne obrazy. Innym przykładem błędu oznaczonego kolorem żółtym to sytuacja, w której znajdują się dwa odnośniki na stronie prowadzące do tego samego miejsca.

Przykład: < a href="http://www.adresstrony.pl/">Home < a href="http://www.adresstrony.pl/">Strona Główna Pomimo tego że anchortext różni się to odnosi się do tego samego miejsca.


Kolorem zielonym zostały oznaczone Features. Są to elementy jeszcze mniej istotne aczkolwiek również warto byłoby je naprawić. Najlepszym przykładem takiego błędu to sytuacja, w której atrybut ALT i ANCHORTEXT są takie same. ALT powinien dokładnie opisać odnośnik a nie być duplikatem ANCHORTEXTU.

Przykład: < a alt="Podstrona dotycząca informacji sportowych" href="http://www.adresstrony.pl/sport">Sport


Elementy oznaczone kolorem niebieskim to Structural Elements. Pełnią rolę informacyjną i pokazują strukturę strony internetowej.


Kolor fioletowy – HTML5 and ARIA pokazuje zastosowane elementy języka HTML5


Ostatni, kolor czarny pokazuje błędu kontrastowe na stronie. Są to elementy słabo lub bardzo słabo widoczne (nawet dla osoby zdrowej). Trzeba zatem dobrać kolorystykę strony tak, aby zapewnić jej odpowiedni kontrast. Białe napisy na czarnym tle.