Projekt: Dostepna strona Muzeum Egipskiego

Czas połączyć wszystko, czego nauczylismy się o dostępności, w jednym projekcie! Stworzymy stronę Muzeum Staroegipskiego, która będzie w pełni dostępna - spelniajaca standardy WCAG 2.1 na poziomie AA.

Elementy projektu

Nasza strona będzie zawierac:

Skip link - przeskakujacy do treści glownej
Semantyczna struktura - header, nav, main, aside, footer
Dostepna nawigacja - z aria-label i aria-current
Sekcja wystawy - z dostepnymi obrazami (alt, figure, figcaption)
Formularz rezerwacji - z labelami, fieldset, legend, walidacja
Sekcja multimedialna - z napisami i transkrypcja
Kontrast i typografia - spelniajaca WCAG AA
Nawigacja klawiaturowa - widoczny focus, logiczna kolejnosc Tab
ARIA atrybuty - aria-live, aria-expanded, aria-describedby

Struktura HTML

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Muzeum Starożytnego Egiptu - Dostepna Strona</title>
7</head>
8<body>
9    <!-- 1. Skip link -->
10    <a href="#main-content" class="skip-link">
11        Przejdz do treści glownej
12    </a>
13
14    <!-- 2. Header z nawigacja -->
15    <header rolę="banner">
16        <h1>Muzeum Starożytnego Egiptu</h1>
17        <nav aria-label="Nawigacja główna">
18            <ul>
19                <li><a href="#exhibitions" aria-current="page">Wystawy</a></li>
20                <li><a href="#reservation">Rezerwacja</a></li>
21                <li><a href="#multimedia">Multimedia</a></li>
22                <li><a href="#contact">Kontakt</a></li>
23            </ul>
24        </nav>
25    </header>
26
27    <!-- 3. Tresc główna -->
28    <main id="main-content">
29        <!-- Sekcja wystawy -->
30        <section aria-labelledby="exhibitions-title">
31            <h2 id="exhibitions-title">Aktualne wystawy</h2>
32
33            <article>
34                <h3>Skarby Tutanchamona</h3>
35                <figure>
36                    <img src="tutankhamun-mask.jpg"
37                         alt="Zlota maska posmiertna faraona Tutanchamona">
38                    <figcaption>
39                        Maska Tutanchamona, XVIII dynastia, ok. 1323 p.n.e.
40                    </figcaption>
41                </figure>
42                <p>Odkryj niezwykle artefakty z grobowca mlodego faraona.</p>
43            </article>
44        </section>
45
46        <!-- Formularz rezerwacji -->
47        <section aria-labelledby="reservation-title">
48            <h2 id="reservation-title">Zarezerwuj wizyte</h2>
49            <form aria-labelledby="reservation-title" novalidate>
50                <fieldset>
51                    <legend>Dane osobowe</legend>
52                    <div class="form-group">
53                        <label for="name">Imie i nazwisko:</label>
54                        <input type="text" id="name"
55                               autocomplete="name"
56                               aria-required="true">
57                    </div>
58                    <div class="form-group">
59                        <label for="email">E-mail:</label>
60                        <input type="email" id="email"
61                               autocomplete="email"
62                               aria-required="true"
63                               aria-describedby="email-help">
64                        <p id="email-help" class="hint">
65                            Na ten adres wyslemy potwierdzenie rezerwacji.
66                        </p>
67                    </div>
68                </fieldset>
69
70                <fieldset>
71                    <legend>Wybierz wystawe</legend>
72                    <label>
73                        <input type="radio" name="exhibition"
74                               value="tutankhamun">
75                        Skarby Tutanchamona
76                    </label>
77                    <label>
78                        <input type="radio" name="exhibition"
79                               value="mummies">
80                        Mumie krolewskie
81                    </label>
82                </fieldset>
83
84                <button type="submit">Zarezerwuj</button>
85            </form>
86        </section>
87    </main>
88
89    <!-- 4. Sidebar -->
90    <aside aria-label="Informacje dodatkowe">
91        <h2>Godziny otwarcia</h2>
92        <dl>
93            <dt>Poniedzialek - Piaatek</dt>
94            <dd>9:00 - 17:00</dd>
95            <dt>Sobota - Niedziela</dt>
96            <dd>10:00 - 18:00</dd>
97        </dl>
98    </aside>
99
100    <!-- 5. Footer -->
101    <footer>
102        <p>Muzeum Starożytnego Egiptu 2024</p>
103        <nav aria-label="Nawigacja stopki">
104            <ul>
105                <li><a href="/polityka-prywatnosci">Polityka prywatnosci</a></li>
106                <li><a href="/dostępność">Deklaracja dostępności</a></li>
107            </ul>
108        </nav>
109    </footer>
110</body>
111</html>

Style CSS - dostępność

1/* Zmienne kolorystyczne z wysokim kontrastem */
2:root {
3    --text-primary: #1a1a2e;
4    --text-secondary: #4a4a5a;
5    --bg-primary: #ffffff;
6    --bg-secondary: #f5f1e3;
7    --accent-gold: #8b6914;
8    --accent-hover: #6b4c00;
9    --error: #d32f2f;
10    --success: #2e7d32;
11    --focus-color: #d4af37;
12}
13
14/* Skip link */
15.skip-link {
16    position: absolute;
17    top: -50px;
18    left: 16px;
19    background: var(--text-primary);
20    color: var(--bg-primary);
21    padding: 12px 24px;
22    z-index: 1000;
23    font-size: 1rem;
24    border-radius: 0 0 4px 4px;
25    transition: top 0.2s;
26}
27
28.skip-link:focus {
29    top: 0;
30}
31
32/* Widoczny focus dla wszystkich interaktywnych elementow */
33a:focus-visible,
34button:focus-visible,
35input:focus-visible,
36select:focus-visible,
37textarea:focus-visible {
38    outline: 3px solid var(--focus-color);
39    outline-offset: 2px;
40}
41
42/* Typografia dostępna */
43body {
44    font-family: Georgia, 'Times New Roman', serif;
45    font-size: 100%;
46    line-height: 1.6;
47    color: var(--text-primary);
48    background: var(--bg-primary);
49}
50
51/* Szerokosc tekstu 50-80 znaków */
52main {
53    max-width: 70ch;
54    margin: 0 auto;
55    padding: 1rem;
56}
57
58/* Prefers reduced motion */
59@media (prefers-reduced-motion: reduce) {
60    * {
61        animation-duration: 0.01ms !important;
62        transition-duration: 0.01ms !important;
63    }
64}
65
66/* Prefers contrast */
67@media (prefers-contrast: high) {
68    :root {
69        --text-primary: #000000;
70        --bg-primary: #ffffff;
71        --accent-gold: #6b4c00;
72    }
73}
74
75/* Dark mode */
76@media (prefers-color-scheme: dark) {
77    :root {
78        --text-primary: #e0d5c0;
79        --bg-primary: #1a1a2e;
80        --bg-secondary: #2d2d44;
81    }
82}

Checklist projektu

Po ukonczeniu projektu sprawdz:

[ ] Skip link działa i jest widoczny na focus
[ ] Semantyczna struktura (header, nav, main, aside, footer)
[ ] Nawigacja z aria-label i aria-current
[ ] Wszystkie obrazy maja alt text
[ ] Formularz ma label dla każdego pola
[ ] Fieldset i legend dla grup pol
[ ] aria-required i aria-describedby w formularzu
[ ] Kontrast kolorow minimum 4.5:1
[ ] Widoczny focus na wszystkich elementach
[ ] Strona działa na 200% powiekszenia
[ ] prefers-reduced-motion wspierane
[ ] prefers-contrast wspierane
[ ] prefers-color-scheme wspierane

Gratulacje! Stworzyles stronę, która jest naprawde dostępna dla wszystkich - tak jak starozytne świątynię Egiptu byly otwarte dla każdego pielgrzyma. Mohamed bylby dumny!

Vai a CodeWorlds→