Blog

Standardy sieciowe – lista kontrolna

September 9th, 2004Accessibility, Web Standards

Tłumaczenie artykułu Russa Weakley’a z firmy Max Design. Lista ma pomóc projektantom w określeniu, w jakim stopniu ich strony są zgodne z przyjętymi standardami.

Standardy sieciowe – więcej niż strony bez tabelek

Standardy sieciowe mogą znaczyć dla różnych ludzi coś zupełnie innego. Dla jednych to po prostu strony bez tabel, dla innych kod, który się waliduje. Jednak w rzeczywistości to coś więcej. Strona powinna być zarówno być zgodna ze standardami (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG itd.), jak też przestrzegać ogólnie przyjętych zasad dobrego projektowania (walidujący się, zgodny z zasadami dostępności i poprawny semantycznie kod, przyjazne użytkownikom adresy URL itd.). Innymi słowy, taka strona powinna być przejrzysta, czysta, oparta na CSS, dostępna, wygodna i przyjazna wyszukiwarkom.

Kilka słów o liście

Poniższa lista nie jest wyczerpująca. Prawdopodobnie można ją uzupełnić o wiele kolejnych punktów. Co więcej, nie należy na nią patrzeć jak na zestaw zagadnień, które muszą być uwzględnione na każdej stronie, którą tworzysz. To raczej prosty przewodnik, który można wykorzystać:

  • aby pokazać rozległość standardów sieciowych
  • jako podręczną pomoc dla deweloperów podczas tworzenia stron
  • jako pomoc dla autorów zainteresowanych wykorzystaniem standardów.

Lista

  1. Jakość kodu
    1. Czy strona używa właściwej deklaracji Doctype?
    2. Czy strona używa właściwego zestawu znaków?
    3. Czy kod (X)HTML waliduje się?
    4. Czy kod CSS waliduje się?
    5. Czy strona wykorzystuje sztuczki (hacki) CSS?
    6. Czy w kodzie strony są zbędne klasy i identyfikatory?
    7. Czy kod ma dobrą strukturę?
    8. Czy na stronie są nie działające odnośniki?
    9. Jak prezentuje się twoja witryna, jeśli chodzi o szybkość i rozmiar stron?
    10. Czy występują błędy JavaScript?
  2. Stopień oddzielenia treści i warstwy prezentacyjnej
    1. Czy twoja strona wykorzystuje CSS do kontroli wszystkich prezentacyjnych aspektów strony (fonty, kolory, wypełnienia, obramowania itd.)?
    2. Czy grafiki użyte w celach dekoracyjnych są w zdefiniowane w CSS czy w kodzie (X)HTML?
  3. Dostępność dla użytkowników
    1. Czy dla grafik użytych w celach informacyjnych określono atrybut alt?
    2. Czy strona używa względnych jednostek dla określenia rozmiaru tekstu?
    3. Czy układ strony zostanie zachowany po zwiększeniu rozmiaru tekstu?
    4. Czy możliwe jest przeskoczenie menu nawigacyjnych?
    5. Czy formularze są dostępne?
    6. Czy tabele są dostępne?
    7. Czy kontrast i jasność są wystarczające?
    8. Czy kolor jest jedynym wyróżnikiem specjalnych informacji?
    9. Czy dynamiczne menu posiadają dłuższy czas reakcji (ważne dla użytkowników o niższej sprawności motorycznej)?
    10. Czy odnośniki są opisowe (dla niewidomych użytkowników)?
  4. Dostępność dla urządzeń
    1. Czy ze strony można korzystać zarówno przy użyciu nowoczesnych, jak i starszych przeglądarek?
    2. Czy treść jest dostępna, gdy obsługa CSS jest wyłączona bądź niemożliwa?
    3. Czy treść jest dostępna, gdy grafika jest wyłączona lub nieobsługiwana?
    4. Czy strona działa w przeglądarkach tekstowych, takich jak Lynx?
    5. Czy strona wygląda dobrze po wydrukowaniu?
    6. Czy strona współpracuje dobrze z urządzeniami przenośnymi?
    7. Czy strona zawiera szczegółowe metadane?
    8. Czy strona działa prawidłowo w różnych rozmiarach okna przeglądarki?
  5. Podstawowa funkcjonalność
    1. Czy istnieje przejrzysta wizualna hierarchia?
    2. Czy wszystkie poziomy nagłówków można łatwo odróżnić?
    3. Czy nawigacja jest łatwa do zrozumienia?
    4. Czy nawigacja jest spójna?
    5. Czy język jest spójny i odpowiedni?
    6. Czy istnieje mapa serwisu i strona kontaktowa? Czy łatwo je odnaleźć?
    7. Jeśli strona jest duża, czy posiada wyszukiwarkę?
    8. Czy na każdej podstronie jest odnośnik do strony głównej?
    9. Czy odnośniki są podkreślone?
    10. Czy odwiedzone odnośniki są wyraźnie wyróżnione?
  6. Zarządzanie serwisem
    1. Czy strona posiada pomocną i użyteczną stronę do obsługi błędu 404, która działa na każdym poziomie zagnieżdżenia?
    2. Czy adresy URL są przyjazne?
    3. Czy adresy działają bez przedrostka ‘www’?
    4. Czy strona posiada ikonę do zakładek (favicon)?

1. Jakość kodu

1.1 Czy strona używa właściwej deklaracji Doctype?

Doctype (skrót od ang. “document type declaration” – deklaracja typu dokumentu) informuje walidator jakiej wersji (X)HTML używasz. Musi pojawiać się na samym początku strony. Deklaracje typu dokumentu są kluczowym elementem każdej poprawnej strony WWW i twój kod znaczników oraz CSS nie będą się bez nich walidować.

Fix your site with the right DOCTYPE!

Więcej:

1.2 Czy strona używa właściwego zestawu znaków?

Jeśli przeglądarka nie może wykryć rodzaju kodowania znaków używanego w dokumencie, użytkownik może zobaczyć nie dający się odczytać tekst. Informacja na temat kodowania jest szczególnie ważna dla osób zajmujących się obsługą serwisów wielojęzycznych, jednak zadeklarowanie kodowania znaków dotyczy każdego, kto tworzy kod XHTML/HTML lub CSS.

Tutorial: Character sets & encodings in XHTML, HTML and CSS

Więcej:

1.3 Czy kod (X)HTML waliduje się?

Poprawny kod jest renderowany szybciej, niż kod zawierający błędy. Jest również lepiej wyświetlany niż nieprawidłowy kod. Przeglądarki stają się coraz bardziej zgodne ze standardami i coraz ważniejsze staje się pisanie poprawnego, zgodnego ze standardami kodu.

What is valid code

Więcej:

1.4 Czy kod CSS waliduje się?

Musisz upewnić się, że usterek nie ma zarówno w twoim kodzie HTML, jak i CSS, ponieważ błędy w którymkolwiek z nich mogą zepsuć wygląd dokumentu.

Help! My CSS Isn’t Working!

Więcej:

1.5 Czy strona wykorzystuje sztuczki (hacks) CSS?

Stosowanie sztuczek jest prywatnym wyborem projektanta i zależy od jego wiedzy na ich temat oraz celu, jaki chce uzyskać.

Standard Hacks?

Więcej:

1.6 Czy na stronie są zbędne klasy i identyfikatory?

Zauważyłem, że autorzy uczący się nowych rzeczy, często tworzą dobry CSS, ale kiepski XHTML. Dokładniej mówiąc, kod HTML nierzadko jest pełen zbędnych znaczników div i identyfikatorów (id). Rezultatem jest nieczytelny kod HTML i przesadnie rozrośnięte arkusze stylów.

Markup tactics
1.7 Czy kod ma dobrą strukturę?

Poprawny semantycznie kod używa elementów HTML zgodnie z ich przeznaczeniem. Dobrze zbudowany HTML jest zrozumiały dla różnego rodzaju agentów użytkownika (przeglądarek bez obsługi arkuszy stylów, przeglądarek tekstowych, urządzeń PDA, wyszukiwarek itd.).

Semantically correct markup

Więcej:

1.8 Czy na stronie są nie działające odnośniki?

Zepsute odnośniki mogą denerwować użytkowników i zniechęcić potencjalnych klientów. Mogą również uniemożliwić wyszukiwarkom zindeksowanie twojej strony.

Więcej:

1.9 Jak prezentuje się twoja witryna, jeśli chodzi o szybkość i rozmiar stron?

Nie każ mi czekać… Takie przesłanie zawierają kolejne ankiety przeprowadzane wśród naszych użytkowników. Nawet posiadacze szybkich łącz cierpią z powodu powolnych stron.

Speed Up Your Site: Web Site Optimization
1.10 Czy na stronie występują błędy JavaScript?

Internet Explorer dla Windows pozwala na włączenie debugera, który wyświetli okienko z powiadomieniem o błędach w skryptach JavaScript. Jest on dostępny na w menu Opcje internetowe, na zakładce Zaawansowane. Odznacz Wyłącz debugowanie skryptu.

2. Stopień oddzielenia treści i warstwy prezentacyjnej

2.1 Czy twoja strona wykorzystuje CSS do kontroli wszystkich prezentacyjnych aspektów strony (fonty, kolory, wypełnienia, obramowania itd.)?

Korzystaj z arkuszy stylów do kontroli układu i prezentacji.

Web Content Accessibility Guidelines 1.0 – checkpoint 3.3
2.2 Czy grafiki użyte w celach dekoracyjnych są w zdefiniowane w CSS, czy też w kodzie (X)HTML?

Celem, do którego powinni dążyć autorzy, powinno być wyeliminowanie elementów prezentacyjnych z kodu HTML, aby był czysty i poprawny semantycznie.

Why use CSS to separate content from presentation?

3. Dostępność dla użytkowników

3.1 Czy dla grafik użytych w celach informacyjnych określono atrybut alt?

Zapewnij tekstowy ekwiwalent każdemu elementowi nietekstowemu.

Web Content Accessibility Guidelines – checkpoint 1.1
3.2 Czy strona używa względnych jednostek dla określenia rozmiaru tekstu?

Zamiast absolutnych, wykorzystuj raczej jednostki względne w atrybutach znaczników i w arkuszach stylów.

Web Content Accessibility Guidelines – checkpoint 3.4

Więcej:

3.3 Czy układ strony zostanie zachowany po zwiększeniu rozmiaru tekstu?

Przeprowadź prosty test. Obejrzyj swoją stronę w przeglądarce, która pozwala na łatwe zwiększanie rozmiaru pisma. Powiększ rozmiar pisma. Jeszcze raz. I jeszcze jeden. Spójrz na swoją stronę. Czy układ został zachowany? Niedobrze jest, gdy autorzy zakładają, że wszyscy korzystają z domyślnych ustawień wielkości wielkości tekstu.

3.4 Czy możliwe jest przeskoczenie menu nawigacyjnych?

Należy zapewnić użytkownikom metodę ominięcia grup odnośników nawigacyjnych.

Section 508

Pogrupuj powiązane ze sobą odnośniki, zidentyfikuj grupę, i, zanim agenty użytkownika będą w stanie same to zrobić, zapewnij metodę ominięcia tej grupy.

Web Content Accessibility Guidelines – checkpoint 13.6

(…) niewidomi goście nie są jedynymi, którym przeszkadza zbyt duża ilość odnośników w obszarze nawigacyjnym. Zapamiętaj, że osoba cierpiąca na zaburzenia mobilności i pozbawiona dostosowanej do jej potrzeb technologii, może utknąć przebijając się przez taką nawigację za pomocą tabulatora.

Keep them visible!
3.5 Czy formularze są dostępne?

Formularze nie są zbyt przyjazne dla osób niepełnosprawnych. Nawigacja na stronie z tekstową zawartością to jedna rzecz, przeskakiwanie po polach formularza i wprowadzanie informacji, to coś całkiem innego.

Accessible forms

Więcej:

3.6 Czy tabele są dostępne?

Zidentyfikuj nagłówki wierszy i kolumn w tabelach przechowujących dane. W przypadku tabel posiadających dwa lub więcej poziomy logiczne nagłówków wierszy lub kolumn, użyj odpowiedniego kodu do powiązania komórek z danymi i nagłówków.

Web Content Accessiblity Guidelines – checkpoint 5.1

Więcej:

3.7 Czy kontrast i jasność są wystarczające?

Zapewnij, by użyte kombinacje kolorów tekstu i tła zapewniały wystarczający kontrast osobom mającym problemy z rozróżnianiem kolorów.

Web Content Accessibilty Guidelines – checkpoint 2.2

Więcej:

3.8 Czy kolor jest jedynym wyróżnikiem informacji?

Upewnij się, że wszystkie informacje, których nośnikiem jest kolor, są również dostępne bez jego pomocy, np. z kontekstu lub kodu znaczników.

Web Content Accessibilty Guidelines – checkpoint 2.1

Istnieją trzy podstawowe rodzaje zaburzeń rozpoznawania kolorów: deuteranopia – nieodróżnianie barwy czerwonej i zielonej, protanopia – inne zaburzenie rozpoznawania koloru czerwonego i zielonego, oraz deuteranopia – bardzo rzadkie upośledzenie odróżniania koloru niebieskiego i żółtego.

Więcej:

3.9 Czy dynamiczne menu posiadają dłuższy czas reakcji (ważne dla użytkowników o niższej sprawności motorycznej)?

Użytkownicy o obniżonej sprawności ruchowej mogą mieć trudności z używaniem dynamicznych menu, których czas odpowiedzi jest zbyt krótki.

3.10 Czy odnośniki są zrozumiałe?

Tekst odnośników powinien być wystarczająco znaczący, by być zrozumiały nawet poza swoim kontekstem – zarówno gdy pojawia się samodzielnie, jak i w sekwencji odnośników. Tekst odnośników powinien być również zwięzły.

Web Content Accessibility Guidelines 1.0 – checkpoint 13.1

4. Dostępność dla urządzeń

4.1 Czy ze strony można korzystać zarówno przy użyciu nowoczesnych, jak i starszych przeglądarek?

Zanim zaczniesz tworzyć stronę z wykorzystaniem CSS, powinieneś zdecydować, które przeglądarki chcesz obsługiwać i w jakim stopniu.

Colored boxes – one method of building full CSS layouts
4.2 Czy treść jest dostępna, gdy obsługa CSS jest wyłączona bądź niemożliwa?

Niektóre z osób odwiedzających twoją stronę mogą używać programu, w którym brak obsługi CSS bądź jest ona wyłączona. Gdy treść ma odpowiednią strukturę, nie powinno to stanowić problemu.

4.3 Czy treść jest dostępna, gdy grafika jest wyłączona lub nieobsługiwana?

Niektórzy ludzie przeglądają strony, mając wyłączone ładowanie obrazków – szczególnie gdy korzystają z wolnych łączy internetowych. Treść strony powinna być dostępna również dla tych osób.

4.4 Czy strona działa w przeglądarkach tekstowych, takich jak Lynx?

Niektórzy przeglądają strony, mając wyłączone ładowanie obrazków. Przeglądarki tekstowe muszą polegać wyłącznie na właściwej strukturze dokumentu, aby dostarczyć treść użytkownikowi.

Więcej:

4.5 Czy strona wygląda dobrze po wydrukowaniu?

Możesz wziąć dowolny dokument (X)HTML i przygotować styl odpowiedni do druku, nawet nie dotykając kodu znaczników.

Going to print

Więcej:

4.6 Czy strona współpracuje dobrze w urządzeniach przenośnych?

Sprawa nie będzie łatwa, dopóki wszystkie urządzenia przenośne nie będą obsługiwać odpowiedniego dla nich typu mediów. Mimo to, niektóre układy dobrze działają w obecnych urządzeniach. O tym jak ważna jest obsługa takich urządzeń, decyduje kształt docelowej grupy odbiorców serwisu.

4.7 Czy strona zawiera szczegółowe metadane?

Metadane to zrozumiałe dla maszyn informacje o sieci WWW.

W3C – Metadata and Resource Description

Metadane to posiadająca strukturę informacja przeznaczona do opisu innego zasobu. Innymi słowy, metadane, to “dane o danych”.

4.8 Czy strona działa prawidłowo w różnych rozmiarach okna przeglądarki?

Wielu autorów jest przekonanych, że przeciętny rozmiar ekranów jest coraz większy. Niektórzy uważają, że obecnie typowa szerokość to 1024 piksele. Ale co z użytkownikami o mniejszych ekranach i posiadaczami urządzeń przenośnych? Czy nie są oni elementem twojej grupy docelowej i nie mają utrudnień w korzystaniu z twojej strony?

5. Podstawowa funkcjonalność

5.1 Czy istnieje przejrzysta wizualna hierarchia?

Ułóż i nadaj priorytety fragmentom strony używając rozmiaru, ważności i powiązań treści.

Create a Clear Visual Hierarchy
5.2 Czy wszystkie poziomy nagłówków można łatwo odróżnić?

Używaj nagłówków, aby nadać dokumentowi strukturę. Pamiętaj o stosowaniu ich zgodnie ze specyfikacją.

Web Content Accessibility Guidelines 1.0 – checkpoint 3.5
5.3 Czy nawigacja jest łatwa do zrozumienia?

Twój system nawigacji powinien pozwolić użytkownikom łatwo zorientować się w którym miejscu witryny się znajdują i gdzie mogą się dalej udać.

Design Tutorial – Navigation
5.4 Czy nawigacja jest spójna?

Jeśli każda podstrona na twojej witrynie będzie zachowywać spójny sposób prezentowania informacji, odwiedzający będą mogli łatwo poruszać się między nimi i wyszukiwać informacje.

Juicy studios – Navigation
5.5 Czy język jest spójny i odpowiedni?

Używanie jasnego i prostego języka pomaga w efektywnym komunikowaniu się. Niektóre próby wyartykułowania się mogą być równie trudne do przeczytania, jak niegramatyczny tekst, szczególnie gdy używany język nie jest dobrze podstawowym językiem dla osoby odwiedzającej stronę.

Clear language
5.6 Czy istnieje mapa serwisu i strona kontaktowa? Czy łatwo je odnaleźć?

Większość map stron nie jest w stanie pokazać wielopoziomowej architektury informacji na stronie. W testach funkcjonalności użytkownicy często przeoczali mapy serwisów bądź nie byli w stanie ich odnaleźć. Złożoność jest również problemem: mapa powinna być mapą, a nie wyzwaniem samym w sobie.

Site Map Usability
5.7 Jeśli strona jest duża, czy posiada wyszukiwarkę?

Chociaż narzędzia do wyszukiwania nie są niezbędne w niewielkich serwisach, a niektórzy ludzie nigdy z nich nie korzystają, przystosowana do potrzeb witryny wyszukiwarka daje użytkownikom wybór drogi przemieszczania się po witrynie.

5.8 Czy na każdej podstronie jest odnośnik do strony głównej?

Niektórzy użytkownicy chętnie wracają do strony głównej serwisu po zapoznaniu się z treścią podstron. Strona główna staje się dla takich użytkowników punktem wypadowym, który pozwala im przegrupować siły przed dalszym zagłębieniem się w witrynę.

5.9 Czy odnośniki są podkreślone?

Aby zmaksymalizować postrzeganą łatwość kliknięcia, pokoloruj i podkreśl tekst odnośnika. Użytkownicy nie powinni zgadywać bądź analizować strony, aby przekonać się, gdzie mogą kliknąć.

Guidelines for Visualizing Links
5.10 Czy odwiedzone odnośniki są wyraźnie wyróżnione innym kolorem?

Co najważniejsze, wiedza o odwiedzonych już odnośnikach chroni ich przed niezamierzonym wejściem na te same, oglądane już strony.

Change the Color of Visited Links

6. Zarządzanie serwisem

6.1 Czy strona posiada pomocną i użyteczną stronę do obsługi błędu 404, która działa na każdym poziomie zagnieżdżenia?

Zażądałeś strony – wpisując jej URL w pasek adresu bądź klikając na nieaktualny odnośnik – i nagle znalazłeś się w samym środku cyberprzestrzennej pustki. Przyjazna użytkownikom witryna poda ci pomocną dłoń, podczas gdy wiele innych po prostu nic nie zrobi, licząc, że mechanizmy wbudowane w przeglądarkę wyjaśnią na czym polega problem.

Search Engine-Friendly URLs
6.2 Czy adresy URL są przyjazne?

Większość wyszukiwarek (z paroma wyjątkami, jak Google) nie indeksuje stron, które zawierają wykrzyknik lub inny tego rodzaju znak (np. ampersand czy znak równości) w adresie URL. Jaki pożytek ze strony, której nikt nie potrafi odnaleźć?

How to make URLs user-friendly

Jednym z najgorszych elementów sieci z punktu widzenia interfejsu użytkownika jest URL. Jeżeli jednak adresy URL są krótkie, logiczne i samonaprawialne, mogą być wygodne w akceptowalnym stopniu.

www.merges.net/theory/20010305.html

Więcej:

6.3 Czy adresy działają bez przedrostka ‘www’?

Choć nie jest to konieczne, a w pewnych przypadkach nie jest nawet możliwe, to jednak dobrze jest zapewnić użytkownikom możliwość wyboru. Jeśli użytkownik wpisze adres twojej domeny bez przedrostka www i nie otrzyma żądanej strony, możecie stracić na tym obaj.

6.4 Czy strona posiada ikonę do zakładek (favicon)?

Favicon to obrazek dostępny w wielu rozdzielczościach obecny na niemal wszystkich profesjonalnie wykonanych stronach. Pozwala webmasterowi na dalsze promowanie strony i tworzy z przeglądarki użytkownika środowisko bardziej dostosowane do jego oczekiwań.

Favicon.com

Ikony zakładek z pewnością nie są absolutnie niezbędne. Jeśli jednak nie są obecne, mogą wywołać błąd 404 w twoich logach (np. statystykach). Przeglądarki takie jak IE wysyłają żądanie o nie do serwera, jeśli strona znajduje się w zakładkach. Jeśli ikona nie zostanie znaleziona, wygenerowany zostanie błąd 404. Z tego powodu posiadanie ikony pozwala zredukować ilość komunikatów o błędzie 404. Podobnie wygląda sytuacja w wypadku pliku “robots.txt”.

Jeszcze kilka słów o liście

Lista została naszkicowana na mailowej liście dyskusyjnej Web Standards Mail list w maju 2004. 5 sierpnia 2004 roku została zaprezentowana w Sydney członkom Web Standards Group. Jest również dostępna do pobrania w formacie PDF [wersja angielska].

Lista jest dostępna również w innych językach:

Podziękowania dla Rose za sprawdzenie i Lei de Groot za jej sugestie.

Comments are closed