Wytyczne WCAG 2.0

Karta pracy 2020/2021

Adres:
http://plotkarka.eu/KP/wcag20.html
Autor:
Radosław Kowaluk

W swoim folderze roboczym utwórz dokument wcag20.html (wykorzystaj pliki szablonów, metodę kopiuj-wklej) zawierający następujący kod:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Wytyczne WCAG 2.0</title>
 </head>
 <body>

 </body>
</html>

Zasada nr 1: Postrzegalność1

Wytyczna 1.1 Alternatywa w postaci tekstu1.1 (np. stosowanie atrybutu alt)

W elemencie body dopisz kod:

<img src="" alt="Tekst alternatywny">

Zapisz dokument. Sprawdź działanie.

Zasada nr 2: Funkcjonalność2

Wytyczna 2.4 Możliwość nawigacji2.4 (np. stosowanie atrybutu target)

W elemencie body dopisz kod:

<p>
<a href="https://www.w3.org/TR/WCAG20/" target="_blank">
Strona rekomendacji WCAG 2.0
</a>
<p>

Zapisz dokument. Sprawdź działanie linku.

Zasada nr 3: Zrozumiałość3

Wytyczna 3.1 Możliwość odczytania3.1 (np. stosowanie atrybutów lang, title)

W elemencie body dopisz kod:

<p>
<abbr title="Web Content Accessibility Guidelines">WCAG
</abbr> - Wytyczne dla dostępności treści internetowych
<p>

W znaczniku html dopisz kod:

<html lang="pl">

Zapisz dokument. Sprawdź działanie atrybutów.

Zasada nr 4: Solidność4

Wytyczna 4.1 Kompatybilność4.1 (np. stosowanie walidatorów, narzędzi deweloperskich)

W elemencie body dopisz kod:

<p style="color: silver;">
<a https://validator.w3.org/ target="_blank">
Walidator HTML
</a>
<p>

Zapisz dokument. Otwórz dokument w przeglądarce, oceń czy jest poprawny. Sprawdź działanie linków.

Otwórz źródło pliku w rzeglądarce Firefox. Popraw znalezione błędy.

Sprawdź działanie walidatora HTML. Popraw znalezione błędy (i ostrzeżenia).

Sprawdź poprawność formatowania walidatorem CSS.

Umieść pliki ćwiczeniowe na na serwerze. Zastosuj wtyczne w swoich plikach.

  1. Informacje oraz komponenty interfejsu użytkownika muszą być przedstawione użytkownikom w sposób dostępny dla ich zmysłów.
    1.1 Dla każdej treści nietekstowej należy dostarczyć alternatywną treść w formie tekstu, która może być zamieniona przez użytkownika w inne formy (np. powiększony druk, brajl, mowa syntetyczna, symbole lub język uproszczony).
  2. Komponenty interfejsu użytkownika oraz nawigacja muszą być możliwe do użycia
    2.4 Dostarczenie narzędzi ułatwiających użytkownikowi nawigowanie, znajdowanie treści i ustalanie, gdzie się w danym momencie znajduje.
  3. Informacje oraz obsługa interfejsu użytkownika muszą być zrozumiałe
    3.1 Treść powinna być zrozumiała i możliwa do odczytania.

  4. 4.1 Zmaksymalizowanie kompatybilności z obecnymi oraz przyszłymi programami użytkowników, w tym z technologiami wspomagającymi.