AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ



Podobne dokumenty
Jak projektować dostępne strony

Dokumentacja techniczno-użytkowa Serwis internetowy

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

15 ZALECEŃ dla dostępności serwisów internetowych i dokumentów

Laboratorium 1: Szablon strony w HTML5

Tekstowe alternatywy:

Dokumentacja Skryptu Mapy ver.1.1

Programowanie internetowe

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Usługa Utilitia Korzystanie z Internetu przez Osoby Niepełnosprawne. Piotr Witek Utilitia.pl Kraków, 16 Lipca 2013 r.

Referat z przedmiotu Technologie Internetowe SPIS TREŚCI

za pomocą: definiujemy:

Dokument hipertekstowy

Przemysław Marcinkowski Fundacja Widzialni. Budowa dostępnej strony www placówek publicznych

Optymalizacja logo strony. Krok po kroku... Spis treści

CSS - layout strony internetowej

I. Dlaczego standardy kodowania mailingów są istotne?

Zawartość specyfikacji:

Archiwum Prac Dyplomowych

Wykład 1: HTML (XHTML) Michał Drabik

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

WOJEWÓDZTWO PODKARPACKIE

Pierwsza strona internetowa

Jak stworzyć stronę WWW drużyny harcerskiej. dh Paweł Wnuk

Ranking partii politycznych

Przewodnik użytkownika (instrukcja) AutoMagicTest

Szkolenia dla pracowników Politechniki Wrocławskiej

Podstawy (X)HTML i CSS

Archiwum Prac Dyplomowych

Nowy szablon stron pracowników ZUT

Tworzenie wiadomości Follow up

Specyfikacja dla strony internetowej Fundacji Śląskie Hospicjum dla Dzieci

Aplikacje internetowe

Podręcznik Użytkownika LSI WRPO

HTML jak zrobić prostą stronę www

Proste kody html do szybkiego stosowania.

Zajęcia 4 - Wprowadzenie do Javascript

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

WORDPRESS INSTRUKCJA OBSŁUGI

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

2 Podstawy tworzenia stron internetowych

2. Prezentacja wizualna

Instrukcja użytkownika BIP

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

I. Formatowanie tekstu i wygląd strony

INSTRUKCJA UŻYTKOWNIKA SYSTEMU BIP

Moduł Notatki Systemu Obsługi Zamówień Publicznych UTP-Bydgoszcz Instrukcja postępowania do 1000 Euro

Podstawy JavaScript ćwiczenia

Pomoc. BIP strona portalu

Przewodnik użytkownika (instrukcja) AutoMagicTest

Serwis PTF Dodanie informacji bieżącej w podserwisie oddziału

Tworzenie wiadomości Newsletter

Podręcznik użytkownika

Technologie Internetowe Raport z wykonanego projektu Temat: Internetowy sklep elektroniczny

Dobre praktyki w tworzeniu dostępnych stron www zgodnych ze standardem WCAG 2.0

Przewodnik użytkownika (instrukcja) AutoMagicTest Spis treści

Defekty Mr Buggy 4. Znane, nieznane i literówki (wybrane)

MySource Matrix CMS. Prosty Interfejs Użytkownika INSTRUKCJA wersja 1.3 POLAND AUSTRALIA UNITED KINGDOM NEW ZEALAND UNITED STATES

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną .

,Aplikacja Okazje SMS

Data wydania: Projekt współfinansowany przez Unię Europejską ze środków Europejskiego Funduszu Społecznego

Specyfikacja techniczna dot. mailingów HTML

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

e-wsparcie Barbara Muszko Aktualizacja Twojej witryny internetowej tak prosta, jak obsługa Worda

Użytkownik zewnętrzny (UZ) może wykonywać następujące czynności:

Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY

LABORATORIUM 6: ARKUSZ MS EXCEL JAKO BAZA DANYCH

HTML (HyperText Markup Language) hipertekstowy język znaczników

Portal Wymiany Wiedzy Przewodnik dla nowych użytkowników

Instrukcja użytkownika. systemu BIP

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Serwis jest dostępny w internecie pod adresem Rysunek 1: Strona startowa solidnego serwisu

Mailingi HTML. Specyfikacja techniczna

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.


Specyfikacja techniczna produktów reklamowych serwisów Trader.com (Polska)

Instrukcja obsługi uczelnianego cmsa

Zasady tworzenia podstron

Portal Publiczny Kamsoft S.A.

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

I. Menu oparte o listę

Wybrane znaczniki HTML

Specyfikacja Specyfikacja strony szkurlat.pl realizowanej przez Visualteam dla...

Dokumenty SEDU składają się z dwóch części: Opisu sprawy Formularza elektronicznego

Spis treści. Warto zapamiętać...2. Podstawy...3

STOPKA. Redakcja strony Stopka Linki w stopce Link do nowej podstrony Link do strony zewnętrznej... 6

Użytkownik zewnętrzny (UZ) może wykonywać następujące czynności:

Aplikacje WWW - laboratorium

Instrukcja użytkownika systemu BIP

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

STRONY INTERNETOWE mgr inż. Adrian Zapała

edycja szablonu za pomocą serwisu allegro.pl

Masz pomysł na lepszy wygląd?

Kurs HTML 4.01 TI 312[01]

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr )

Transkrypt:

Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa Wielkopolskiego http://www.umww.pl/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> HTML 4.01 Transitional polski ILOŚĆ LINII Y 295 WALIDACJA HTML BŁĘDY 0 WALIDACJA HTML - OSTRZEŻENIA 0 WALIDACJA CSS (STYLI) - BŁĘDY 33 WALIDACJA CSS (STYLI) - OSTRZEŻENIA 167 text/html; charset=utf-8 FORMAT AUDYTU Badane zalecenia: WCAG v 2 Audyt wykonany dla poziomów: A, AA AUDYT WYKONANY PRZEZ Łukasz Rubiński Hektorweb +48 660 671 403

2 SPIS TREŚCI AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ... 1 BŁĘDY TECHNICZNE... 2 FUNKCJONALNOŚĆ STRONY... 6 KONTRASTY... 6 OCENA ZNACZEŃ I TREŚCI STRONY... 8 UWAGI KOŃCOWE... 9 SPIS ZAŁĄCZNIKÓW... 9 BŁĘDY TECHNICZNE Na stronie znaleziono łącznie 33 błędy techniczne oraz trzy ostrzeżenia. Poniżej przedstawiona zostaje lista wszystkich błędów. Wypisane elementy: Numer linii, oznaczenie błędu lub ostrzeżenia, zawartość linii. 13 OSTRZEŻENIE: [WCAG v2 1.1.1 (A)] Atrybut title nie powinien być pusty. <link rel="alternate" type="application/rss+xml" title="" href="http://www.umww.pl/rss/rss.xml" /> 36 Błąd w linku wymagany link bezwzględny. <a href="?size=-1"> 41 OSTRZEŻENIE: [WCAG v2 1.3.1 (A)] Każde pole <fieldset> powinno mieć odpowiadające pole <legend>, które zawiera opis tabeli. <fieldset> 42 [WCAG v2 1.3.1 (A)] Należy dodać tag <label>, który będzie powiązany z atrybutem id. <input type="text" id="q" name="q" value="" maxlength="255" /> 72 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 78 OSTRZEŻENIE: [WCAG v2 1.1.1 (A)] Brak atrybutu alt <img src="http://www.umww.pl/pub/uploadimages/news.jpg" width="114" height="150" alt="" /> [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/urzad/aktualnosci.html"> 88 OSTRZEŻENIE: [WCAG v2 1.1.1 (A)] Brak atrybutu alt <img src="http://www.umww.pl/pub/uploadimages/announcements.jpg" width="106" height="142" alt="" /> 93 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.bip.umww.pl/portal?id=113866">

99 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.bip.umww.pl/portal?id=58231"> 105 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.bip.umww.pl/portal?id=58245"> 113 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 120 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/biznes/aktualnosci.html"> 128 OSTRZEŻENIE: [WCAG v2 1.1.1 (A)] Brak atrybutu alt <img src="http://www.umww.pl/pub/uploadimages/investments.jpg" width="105" height="114" alt="" /> 133 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/biznes/oferty-inwestycyjne.html"> 140 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/biznes/centrum-obslugi-inwestora.html"> 148 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 171 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/kultura/teatry.html"> 178 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 192 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/turystyka/atrakcje-turystyczne/miasta.html"> 203 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/turystyka/atrakcje-turystyczne/przyroda.html"> 214 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/turystyka/atrakcje-turystyczne/zabytki.html"> 226 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 3

231 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/urzad/kariera-w-urzedzie.html"> 237 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 245 Nieprawidłowe użycie kolorów w stylowaniu. <span style="color: rgb(51, 102, 255);"> 249 [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: <a href="http://www.umww.pl/urzad/lista-spraw.html"> 255 [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3): 266 OSTRZEŻENIE: Pusty znak nie powinien pojawić się na końcu atrybutu title <a href="http://www.umww.pl/urzad/departamenty/departament-rolnictwa-i-rozwoju-wsi/siec-dziedzictwakulinarnego-w ielkopolska.html" title="sieć Dziedzictwa Kulinarnego Wielkopolska "> 266 OSTRZEŻENIE: Pusty znak nie powinien pojawić się na końcu atrybutu title <img src="http://www.umww.pl/pub/uploadimages/gtx/grey_dziedzictwo1.1303288953.jpg" width="140" height="65" alt="sieć Dziedzictwa Kulinarnego Wielkopolska " /> 266 OSTRZEŻENIE: Pusty znak nie powinien pojawić się na końcu atrybutu href <a href="http://www.pozytek.gov.pl/fio,-,aktualnosci,888.html " title="fundusz Incjatyw Obywatelskich"> Zaproponowane rozwiązania dla powstałych błędów lub ostrzeżeń. ZALECENIE: Wprowadzić zmiany opisane poniżej 4 OSTRZEŻENIE: [WCAG v2 1.1.1 (A)] Atrybut title nie powinien być pusty. <link rel="alternate" type="application/rss+xml" title="" href="http://www.umww.pl/rss/rss.xml" /> Należy wpisać atrybut title. W tym przypadku najlepiej wpisać nazwę strony internetowej. Błąd w linku wymagany link bezwzględny. <link rel="alternate" type="application/rss+xml" title="" href="http://www.umww.pl/rss/rss.xml" /> Należy wprowadzić link bezwzględny np. http://www.example.com?size=1

5 OSTRZEŻENIE: [WCAG v2 1.3.1 (A)] Każde pole <fieldset> powinno mieć odpowiadające pole <legend>, które zawiera opis tabeli. <fieldset> Należy dodać tag <legend> ponad polem <fieldset>. W tym tagu należy wpisać omówienie pola poniżej. Przykład: <legend>proszę wpisać imię i nazwisko</legend> <fieldset>. OSTRZEŻENIE: [WCAG v2 1.3.1 (A)] Należy dodać tag <label>, który będzie powiązany z atrybutem id. <input type="text" id="q" name="q" value="" maxlength="255" /> Należy ponad pole input wprowadzić tag <label>, w którym opisane będzie znaczenie pola input. Należy pamiętać o dodaniu atrybutu id takiego samego jak w polu input. Przykład: <label for= q >Imię i nazwisko</label> <input type="text" id="q" name="q" value="" maxlength="255" /> [WCAG v2 1.1.1 (A)] Brak atrybutu alt 3 wystąpienia <img src="http://www.umww.pl/pub/uploadimages/investments.jpg" width="105" height="114" alt="" /> Należy dodać wartość atrybutu alt. Wpisać tam opis zawartości obrazka. Przykład: <img src="http://www.umww.pl/pub/uploadimages/investments.jpg" width="105" height="114" alt="inwestycje strukturalne" /> Nieprawidłowe użycie kolorów w stylowaniu. <span style="color: rgb(51, 102, 255);"> Należy użyć koloru w formacie color: #667588; [WCAG v2 2.4.4 (A)] Ten sam tekst wykorzystany do zaprezentowania różnych odnośników. Zobacz linia: 13 wystąpień <a href="http://www.umww.pl/urzad/lista-spraw.html"> Należy zmienić nazwy linków z więcej na treść odpowiadającą aktualnej treści odnośnika. Przykład: więcej aktualności lub zobacz kolejne wpisy. [WCAG v2 1.3.1 (A)] Nieprawidłowe zagnieżdżenie tagów (H1 > H2 > H3) 7 wystąpień Kolejność tagów h powinna zostać zachowana H1> H2> H3. Na stronie brakuje tagu H1. Reszta struktury jest w porządku. Wystarczy tagiem H1 objąć tytuł strony. OSTRZEŻENIE: Pusty znak nie powinien pojawić się na końcu atrybutu title <img

6 2 wystąpienia src="http://www.umww.pl/pub/uploadimages/gtx/grey_dziedzictwo1.1303288953.jpg" width="140" height="65" alt="sieć Dziedzictwa Kulinarnego Wielkopolska " /> Należy usunąć spację po słowie Wielkpolska OSTRZEŻENIE: Pusty znak nie powinien pojawić się na końcu atrybutu href <a href="http://www.pozytek.gov.pl/fio,-,aktualnosci,888.html " title="fundusz Incjatyw Obywatelskich"> Należy usunąć spację po linku http://www.pozytek.gov.pl/fio,-,aktualnosci,888.html FUNKCJONALNOŚĆ STRONY Strona posiada przejrzystą funkcjonalność. Wszystkie elementy mają swoje odwzorowania tekstowe. Strona działa także po wyłączeniu obrazków oraz Java Scriptu. Można na niej bez problemu poruszać się bez użycia myszki korzystając z klawiatury. Układ strony pozwala na łatwe rozeznanie się w którym miejscu na stronie użytkownik się znajduje. Poszczególne bloki umiejscowione są w tych samych miejscach na wielu podstronach co ułatwia poruszanie się i wyszukiwanie treści. Strona zapewnia zarówno Mapę serwisu dzięki czemu można bezpośrednio odnaleźć poszukiwaną treść jak i wyszukiwarkę którą można uruchomić korzystając tylko z klawiatury. Na stronie znajduje się też ścieżka okruszków czyli tzw. Breadcrumb, dzięki czemu użytkownik wie na którym poziomie znajduje się aktualnie. KONTRASTY Łącznie 25 elementów nie spełnia wymagań dotyczących kontrastów. Elementy te zostały oznaczone na obrazkach prezentowanych poniżej oraz w załączonych plikach: screen1.jpg screen2.jpg Poziom kontrastu Ilość elementów 2.85 3 3.45 4 3.54 7 3.87 7 4.43 2 4.48 2

7 ZALECENIE: Zwiększyć kontrast zaznaczonych elementów lub dodać ukryte elementy <div> w taki sposób aby kolor czcionki i tło na tych elementach posiadało odpowiedni kontrast. Przykładowe kolory: Tło: #ffffff Czcionka: #000000 Ukrycie elementu div: <div style= display: none; >.</div>

8 OCENA ZNACZEŃ I TREŚCI STRONY Treść strony jest czytelna i zrozumiała. Każdy link jest prawidłowo opisany w wskazuje na odpowiednią podstronę. Element FLASH znajdujący się na górze strony nie wpływa na jej funkcjonalność, ani nie pokazują się tam treści które są ważne dla pełnego zrozumienia strony więc jest on dozwolony w tym miejscu. Na wielu podstronach możemy znaleźć przycisk Odsłuchaj który umożliwia przeczytanie strony korzystając z aplikacji IWebReader. Na stronie można zwiększać oraz zmniejszać czcionki. Wszystkie formularze na stronie spełniają zalecenia WCAG, są przejrzyste i czytelne. Nie wprowadzają użytkowników w błąd oraz pozwalają na poprawienie swoich błędów. Opisane są także kolejne kroki postępowania po zatwierdzeniu danego formularza.

9 ZALECENIE: Można wprowadzić dwa dodatkowe ułatwienia dla użytkowników: - Przeskakiwanie bloków strony (lub link bezpośrednio do treści strony z pominięciem menu) - Wprowadzenie wyboru kontrastu (np. layout z czarnym tłem). Błędy wynikające z nieprawidłowego użycia treści strony pojawiają się m.in. przy użyciu linków zatytułowanych więcej. ZALECENIE: Zmienić linki o treści więcej na linki mówiące więcej o ich odnośnikach. Np. więcej aktualności lub więcej ogłoszeń. UWAGI KOŃCOWE Strona wymaga przede wszystkim zlikwidowania wszystkich błędów technicznych. Należy też zwiększyć kontrast dla elementów zaznaczonych w sekcji kontrast Poza tym jest w pełni dostępna dla osób niepełnosprawnych i spełnia wymagania WCAG dla poziomów A i AA. Spełnia też wszystkie wymagania dla walidacji HTML co znacząco poprawia komfort przeglądania strony na różnych przeglądarkach oraz systemach operacyjnych. Błędy w stylowaniu CSS nie wpływają znacząco na przejrzystość strony, ponieważ nawet z tymi błędami strona nie wykazuje większych błędów w usytuowaniu poszczególnych elementów. Spełnia też wszystkie wymagania dla walidacji HTML co znacząco poprawia komfort przeglądania strony na różnych przeglądarkach oraz systemach operacyjnych. Błędy w stylowaniu CSS nie wpływają znacząco na przejrzystość strony, ponieważ nawet z tymi błędami strona nie wykazuje większych błędów w usytuowaniu poszczególnych elementów. SPIS ZAŁĄCZNIKÓW screen1.jpg screen2.jpg kod_zrodlowy_strony.pdf