10 sposobów no to, żeby Twoja strona HTML była dostępna przy wykorzystaniu standardów Web

Kategorie: Ekspansja, Rozwój, Konsulting, Kreacja, Newsy, Porady, wskazówki i rozwiązania, SEO, Technologia, Tagi: budowa stron www, projektowanie stron www, technologie

10 sposobów no to, żeby Twoja strona HTML była dostępna przy wykorzystaniu standardów Web Jedną z najważniejszych rzeczy, które należy wziąć pod uwagę przy tworzeniu strony WWW, jest bezsprzecznie to, aby była ona dostępna dla każdego kto chce ją przeglądać. Czy Twoja strona dobrze współgra z czytnikami ekranowymi? Czy użytkownik może odrzucić Twój arkusz stylu, zastąpić go bardziej dostępnym i nadal widzieć wszystko co oferuje strona? Czy inny projektant stron WWW byłby zażenowany widząc Twój kod? Jeśli Twoja strona spełnia standardy, na pytania te będziesz mógł odpowiedzieć z większą pewnością.

Poniżej przyjrzymy się 10 sposobom na poprawę przystępności strony HTML poprzez dopasowanie jej do standardów. Posuniemy się też dalej omawiając kryteria, które sięgają poza standardy ustanowione przez W3C, a które powinny być spełnione aby uczynić stronę dostępniejszą. W każdej z sekcji przedstawimy listę kryteriów, które należy spełnić, wyjaśnimy dlaczego są one ważne, a także podamy przykłady tego co należy i czego nie należy robić przy tworzeniu strony.

1. Określ poprawny DOCTYPE

Kryteria

Wybór typu dokumentu (DOCTYPE) jest instrukcją, którą umieszcza się na górze dokumentu. DOCTYPE podpowiada przeglądarce jak poprawnie otwierać stronę.

Dlaczego jest to potrzebne?

Bez poprawnej deklaracji DOCTYPE, przeglądarka automatycznie przypisuje DOCTYPE do strony co może spowalniać jej odtwarzanie i powodować niewłaściwe jej wyświetlanie w różnych przeglądarkach. Spójność jest sprawą kluczową jeśli chodzi o dostępność strony.

Co zatem robić?

Umieść odpowiedni DOCTYPE na górze każdej strony. Zalecany jest XHTML 1.1 , ale XHTML 1.0 Strict jest również dobrym rozwiązaniem.

XHTML 1.1
Jest najbardziej przejrzystym sposobem kodowania strony. Styl strony zawarty jest w zewnętrznych plikach CSS. Upewnij się , że dodałeś deklarację XML na górze strony. Jest to niezbędne, gdyż XHTML 1.1 jest prawdziwym XML.

<?xml version=”1.0″ encoding=”UTF-8″?><br><!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd„>

Uwaga: Jeśli nie używasz XHTML 1.1, nie możesz zawrzeć deklaracji XML dla odwiedzających, którzy używają Internet Explorer 6. Zamiast tego, aby ich wspomóc, powinieneś wyświetlać deklarację XML warunkowo.

XHTML 1.0 Strict
Jest alternatywą do XHTML 1.1. Różnice techniczne pomiędzy nimi są nieznaczne, jednak, z myślą o przyszłym rozwoju strony, zaleca się używanie XHTML 1.1.

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN”<br>”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd„>

Istnieją również dwie inne deklaracje XHTML 1.0 służące do celów niszowych. Używanie ich nie jest jednak zalecane.

XHTML 1.0 Transitional (przejściowa)
Używana do stron, które muszą być przeglądane na starszych wersjach przeglądarek nieobsługujących CSS. XHTML 1.0 Transitional pozwala na wprowadzanie ‘inline styles’ do elementów.

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN”<br>”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd„>

XHTML 1.0 Frameset
Używany jest tylko do stron, które wymagają ramek HTML. Statyczne jednostki CSS powinny być używane zamiast tychże ramek.

	<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Frameset//EN”
	„http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd„>

2. Zdefiniuj nazewnictwo oraz język domyślny

Kryteria

Nazewnictwo oraz język domyślny muszą być zawarte w elemencie <html>.

Dlaczego jest to potrzebne?

Strony XHTML powinny określać domyślną nomenklaturę, która definiuje wszystkie elementy używane w jej obrębie. Ustalenie języka domyślnego pozwala czytnikowi ekranu poznać język strony nawet bez oglądania jej zawartości. Jest to również wymóg standardów W3C.

Co zatem robić?

Dołącz określenia xmlns i lang do elementu <html>. W XHTML 1.1 atrybut lang to xml:lang:

XHTML 1.1

XHTML 1.0

3. Zamieść odpowiednie meta tagi

Kryteria

Zamieść meta tagi http-equiv, język, opis i frazy kluczowe w górnej części strony.

Dlaczego jest to potrzebne?

Http-equiv to najważniejszy meta tag. Używany w połączeniu z DOCTYPE pomaga przeglądarce wyświetlać prawidłowo stronę. Język ważny jest dla stron innych niż angielskie, ale powszechnym stało się umieszczanie go na każdej stronie bez względu na język. Opis i frazy kluczowe wymagane są bardziej ze względu na dostępność strony niż spełnianie standardów (są często używane przez czytniki ekranów).

Co zatem robić?

Umieść wyżej wymienione cztery meta tagi na górze strony.

	<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
	<meta name=”language” content=”en” />

	<meta name=”description” content=”Updating Windows using Microsoft Update” />
	<meta name=”keywords” content=”updating, windows, microsoft, update, techworld” />

Upewnij się, że język, który wybrałeś w elemencie <html> jest taki sam jak ten określony w meta tagu. Jeśli używasz XHTML 1.1 upewnij się także, że specyfikacja kodująca w deklaracji XML współgra z parametrem char set w meta tagu http-equiv.

4. Używaj dostępnej nawigacji

Kryteria

Pozwól użytkownikom na łatwe orientowanie się którą stronę lub podstroję aktualnie przeglądają.

Dlaczego jest to potrzebne?

Aby zorganizować i pokazać informacje, strony operują dziś w większości tekstem, kolorem i stylami graficznymi. Wielu niepełnosprawnych, którzy nie widzą lub nie używają grafiki, polega na czytnikach ekranowych, CSS i innych dostępnych narzędziach do wyszukiwania informacji. Bez względu na to kto odwiedza stronę, stosowanie dostępnego systemu nawigacji pomaga szybko i precyzyjnie znaleźć użytkownikowi informacje, których poszukuje.

Co zatem robić?

Stwórz opisowy tytuł do swojej strony a następnie podziel ją na pod-strony posługując się nagłówkami.

W nagłówku (<head> element ) zawrzyj dokładnie jeden tytuł (<title> element)

<title>Contip Blog – Fabryka dobrych pomysłów</title>

Zawrzyj dokładnie jeden element <h1> na stronie. Element <h1> powinien pasować do całości lub części tytułu (<title> element)

<h1>Contip Blog – Fabryka dobrych pomysłów</h1>

Wszystkie tagi nagłówków (<h1>, <h2>, etc.) powinny mieć zawartość tekstową. Tagi z obrazkami nie są brane pod uwagę.

Źle:

Dobrze:

<h2><img src=”logo.png” alt=”Contip Blog – Fabryka dobrych pomysłów” />Contip Blog – Fabryka dobrych pomysłów</h2>

5. Poprawna implementacja funkcji escape JavaScript

Kryteria

Zawierając JavaScript bezpośrednio na stronie, powinieneś poprawnie użyć funkcji escape jako character data.

Dlaczego tego potrzebuję?

W HTML, tekst w elemencie <scripts> jest tłumaczony jako CDATA (character data), natomiast w XHTML tekst w elemencie <scripts> jest traktowany jako PCDATA (parsed character data). PCDATA jest przetwarzane przez tester W3C i dlatego funkcja escape musi być użyta poprawnie jako CDATA. W dodatku, podczas gdy większość czytników ekranowych jest wystarczająco inteligentnych by zignorować zawartość wewnątrz elementów <script> nie bacząc na typ danych które zawierają, jeśli kod nie zawiera poprawnej funkcji escape, sprzyja to tworzeniu potencjalnych błędów w dostępności strony.

Co zatem zrobić?

Używaj tagów CDATA wokół każdej zawartości w elemencie <script>. My również komentujemy tagi CDATA dla wspomagania starszych wersji przeglądarek.

Przykład:

	<script type=”text/javascript”>
	//<![CDATA[

	$(function() {
	$('#divone').tipsy({fade: true, gravity: 'n'});

	$('#divtwo').tipsy({fade: true, gravity: 'n'});
	});

	//]]>
	</script>

6. Poprawne tytułowanie funkcji escape jednostek HTML

Kryteria

Znaki ‘&’, cytaty, znaki większości i mniejszości oraz inne znaki HTML muszą być zapisane w funkcji escape.

Dlaczego tego potrzebuję?

Używanie jednostek HTML, szczególnie w adresach URL, może spowodować nie tylko problemy z zatwierdzeniem ale również problemy w użytkowaniu. Zdarza się na przykład, że znak ‘&’ jest początkowym znakiem w jednostkach HTML. Jeśli nie użyjesz poprawnie funkcji escape dla znaku ‘&’, przeglądarka założy, że chcesz , aby pokazała jednostkę HTML, która nie istnieje.

Co zatem zrobić?

Użyj funkcji escape w jednostkach HTML używając wartości przeznaczonych dla danych jednostek.

Zamień & na &
Zamień ” na "
Zamień < na <
Zamień > na >
Itp.

Przykład:

	<a href=”http://www.example.com?page=1&view=top„>A "Cool" Link</a>
	<code><div id="content">Test information.</div></code>

7. Używaj tylko małych liter w tagach i atrybutach

Kryteria

Wszystkie elementy i cechy elementów powinny być pisane małymi znakami. Wartości atrybutów mogą być pisane zarówno małymi jak i dużymi znakami.

Dlaczego tego potrzebuję?

Ponieważ standard XHTML określony przez W3C tak zaleca.

Co zatem zrobić?

Upewnij się, że używasz tylko małych liter dla wszystkich elementów i atrybutów. Częstym błędem, popełnianym przez większość projektantów, jest używanie dużych liter przy nadawaniu elementowi atrybutów JavaScript (np. onClick, onLoad, itp.).

Źle:

<A href=”#” onClick=”doSomething();”>Send us a message</A>

Dobrze:

<a href=”#” onclick=”doSomething();”>Send us a message</a>

8. Nadaj etykiety wszystkim elementom wejściowym

Kryteria

Wszystkim elementom powinien zostać przypisany tag <label>.

Dlaczego tego potrzebuję?

Element <label> jest wygodny dla tych, którzy używają myszki i czytników ekranowych. Klikanie na tekst wewnątrz elementu <label> ustawia korespondujący z nim element. Czytniki ekranowe mogą czytać etykiety więc odwiedzający wiedzą, jakie informacje dostarczyć.

Co zatem zrobić?

Dodać element <label> do każdego pola w twojej formule/formie.

Przykład:

	<p><label for=”searchbox”>Search: </label><input type=”text” id=”searchbox” /></p>
	<p><input type=”checkbox” id=”remember” /><label for=”remember”> Remember</label></p>

9. Dostarcz alternatywną treść dla obrazków

Kryteria

Każdemu obrazkowi na twojej stronie powinien towarzyszyć alternatywny tag tekstowy.

Dlaczego tego potrzebuję?

Alternatywny tag mówi odwiedzającym co jest na obrazku, jeśli nie może być on wyświetlony lub nie jest widoczny. Ustawa o Niepełnosprawnych (The Americans with Disabilities Act ) nakazuje, aby wszystkie obrazki zawierały alternatywne tagi tekstowe.

Co zatem zrobić?

Każdemu obrazkowi przypisz odpowiadający mu alternatywny tag, który musi zawierać tekst i nie może zostawać pusty. Jeśli używasz obrazków w swoim designie jedynie z powodów stylistycznych, znajdź sposób na osiągnięcie tego stylu używając CSS-a. Nie zapomnij również wprowadzić jednoznacznych wartości dla szerokości i wysokości twoich obrazków.

Źle:

	<img src=”picture.png” />
	<img src=”spacer.gif” alt=”" />

Dobrze:

<img src=”picture.png” alt=”A warm sunset” width=”450″ height=”350″ />

10. Używaj poprawnie atrybutów CSS typu „id” oraz „class”

Kryteria

Używając atrybutów CSS, wykorzystuj każde „id” tylko raz na stronę. Każdy „class” możesz używać tyle razy ile chcesz.

Dlaczego tego potrzebuję?

Twórcy stron internetowych często bezmyślnie używają „id” wiele razy na jednej stronie. Może to spowodować nieoczekiwane rezultaty w różnych przeglądarkach oraz pojawienie się dużego czerwonego napisu „Validation Failed”.

Co zatem zrobić?

Bądź pewien, że używasz jednego „id” na stronę. Jeśli potrzebujesz użyć tego samego stylu do wielu elementów używaj atrybutu „class”.

Źle:

	<p id=”leftNav”>Home</p>
	<p id=”leftNav”>Contact</p>

Dobrze:

	<p id=”homeNav” class=”leftNav”>Home</p>
	<p id=”contactNav” class=”leftNav”>Contact</p>

Podsumowanie:

Używanie wszystkich technik wymienionych w tym artykule pozwoli Ci na tworzenie bardziej dostępnych oraz zgodnych ze standardami stron internetowych. Nie poprzestawaj jednak na tym! Nieustannie poprawiaj swoją stronę i lokalizuj problemy jak najprędzej. Poniżej znajduje się lista testerów, które powinieneś uruchomić na każdej stronie którą tworzysz:

Brak podobnych wpisów.

1. Określ poprawny DOCTYPE

2. Zdefiniuj nazewnictwo oraz język domyślny

3. Zamieść odpowiednie meta tagi

4. Używaj dostępnej nawigacji

5. Poprawna implementacja funkcji escape JavaScript

6. Poprawne tytułowanie funkcji escape jednostek HTML

7. Używaj tylko małych liter w tagach i atrybutach

8. Nadaj etykiety wszystkim elementom wejściowym

9. Dostarcz alternatywną treść dla obrazków

10. Używaj poprawnie atrybutów CSS typu „id” oraz „class”

Kategorie

Archiwum

Newsy

Blog

Mówią o nas

Blog » 10 sposobów no to, żeby Twoja strona HTML była dostępna przy wykorzystaniu standardów Web

1. Określ poprawny DOCTYPE

2. Zdefiniuj nazewnictwo oraz język domyślny

3. Zamieść odpowiednie meta tagi

4. Używaj dostępnej nawigacji

5. Poprawna implementacja funkcji escape JavaScript

6. Poprawne tytułowanie funkcji escape jednostek HTML

7. Używaj tylko małych liter w tagach i atrybutach

8. Nadaj etykiety wszystkim elementom wejściowym

9. Dostarcz alternatywną treść dla obrazków

10. Używaj poprawnie atrybutów CSS typu „id” oraz „class”

Kategorie

Popularne tagi

Archiwum

Newsy

Blog

Mówią o nas