We use cookies to enhance your experience on the site
Project: Accessible Egyptian Museum Page
Time to combine everything we have learned about accessibility in one project! We will create an Ancient Egypt Museum page that is fully accessible - meeting WCAG 2.1 standards at the AA level.
Project Elements
Our page will contain:
- Skip link - skipping to the main content
- Semantic structure - header, nav, main, aside, footer
- Accessible navigation - with aria-label and aria-current
- Exhibition section - with accessible images (alt, figure, figcaption)
- Reservation form - with labels, fieldset, legend, validation
- Multimedia section - with captions and transcript
- Contrast and typography - meeting WCAG AA
- Keyboard navigation - visible focus, logical Tab order
- ARIA attributes - aria-live, aria-expanded, aria-describedby
HTML Structure
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Ancient Egypt Museum - Accessible Page</title>
7</head>
8<body>
9 <!-- 1. Skip link -->
10 <a href="#main-content" class="skip-link">
11 Skip to main content
12 </a>
13
14 <!-- 2. Header with navigation -->
15 <header role="banner">
16 <h1>Ancient Egypt Museum</h1>
17 <nav aria-label="Main navigation">
18 <ul>
19 <li><a href="#exhibitions" aria-current="page">Exhibitions</a></li>
20 <li><a href="#reservation">Reservation</a></li>
21 <li><a href="#multimedia">Multimedia</a></li>
22 <li><a href="#contact">Contact</a></li>
23 </ul>
24 </nav>
25 </header>
26
27 <!-- 3. Main content -->
28 <main id="main-content">
29 <!-- Exhibition section -->
30 <section aria-labelledby="exhibitions-title">
31 <h2 id="exhibitions-title">Current Exhibitions</h2>
32
33 <article>
34 <h3>Treasures of Tutankhamun</h3>
35 <figure>
36 <img src="tutankhamun-mask.jpg"
37 alt="Golden death mask of pharaoh Tutankhamun">
38 <figcaption>
39 Mask of Tutankhamun, XVIII Dynasty, c. 1323 BCE.
40 </figcaption>
41 </figure>
42 <p>Discover extraordinary artifacts from the tomb of the young pharaoh.</p>
43 </article>
44 </section>
45
46 <!-- Reservation form -->
47 <section aria-labelledby="reservation-title">
48 <h2 id="reservation-title">Book a Visit</h2>
49 <form aria-labelledby="reservation-title" novalidate>
50 <fieldset>
51 <legend>Personal Information</legend>
52 <div class="form-group">
53 <label for="name">Full name:</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">Email:</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 We will send the booking confirmation to this address.
66 </p>
67 </div>
68 </fieldset>
69
70 <fieldset>
71 <legend>Choose an Exhibition</legend>
72 <label>
73 <input type="radio" name="exhibition"
74 value="tutankhamun">
75 Treasures of Tutankhamun
76 </label>
77 <label>
78 <input type="radio" name="exhibition"
79 value="mummies">
80 Royal Mummies
81 </label>
82 </fieldset>
83
84 <button type="submit">Book</button>
85 </form>
86 </section>
87 </main>
88
89 <!-- 4. Sidebar -->
90 <aside aria-label="Additional information">
91 <h2>Opening Hours</h2>
92 <dl>
93 <dt>Monday - Friday</dt>
94 <dd>9:00 - 17:00</dd>
95 <dt>Saturday - Sunday</dt>
96 <dd>10:00 - 18:00</dd>
97 </dl>
98 </aside>
99
100 <!-- 5. Footer -->
101 <footer>
102 <p>Ancient Egypt Museum 2024</p>
103 <nav aria-label="Footer navigation">
104 <ul>
105 <li><a href="/privacy-policy">Privacy Policy</a></li>
106 <li><a href="/accessibility">Accessibility Statement</a></li>
107 </ul>
108 </nav>
109 </footer>
110</body>
111</html>CSS Styles - Accessibility
1/* Color variables with high contrast */
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/* Visible focus for all interactive elements */
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/* Accessible typography */
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/* Text width 50-80 characters */
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}Project Checklist
After completing the project, check:
- [ ] Skip link works and is visible on focus
- [ ] Semantic structure (header, nav, main, aside, footer)
- [ ] Navigation with aria-label and aria-current
- [ ] All images have alt text
- [ ] Form has a label for every field
- [ ] Fieldset and legend for field groups
- [ ] aria-required and aria-describedby in the form
- [ ] Color contrast minimum 4.5:1
- [ ] Visible focus on all elements
- [ ] Page works at 200% zoom
- [ ] prefers-reduced-motion supported
- [ ] prefers-contrast supported
- [ ] prefers-color-scheme supported
Congratulations! You have created a page that is truly accessible to everyone - just as the ancient temples of Egypt were open to every pilgrim. Mohamed would be proud!