Skip to content

Commit 740f14e

Browse files
jiannazzonejiannazzone
committed
Refactor accessibility features and remove unused carousel script
- Added skip link for improved accessibility. - Introduced visually hidden text for screen readers. - Added external link indicator for better user awareness. - Implemented reduced motion preference respect in animations. - Updated pixel font toggle functionality to pause/resume carousels based on accessibility mode. - Removed obsolete carousel.js script and associated styles. - Updated HTML to include accessibility features and improved alt text for images.
1 parent 770f9ad commit 740f14e

6 files changed

Lines changed: 264 additions & 251 deletions

File tree

‎css/carousel.css‎

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎css/style.css‎

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,74 @@
2222
--transition-speed: 0.1s;
2323
}
2424

25+
/* Accessibility: Skip Link */
26+
.skip-link {
27+
position: absolute;
28+
top: -40px;
29+
left: 0;
30+
background: var(--rd-purple);
31+
color: white;
32+
padding: 8px 16px;
33+
z-index: 9999;
34+
font-family: var(--body-font);
35+
text-decoration: none;
36+
border: none;
37+
border-radius: 0 0 4px 0;
38+
}
39+
40+
.skip-link:focus {
41+
top: 0;
42+
}
43+
44+
/* Accessibility: Visually hidden text for screen readers */
45+
.visually-hidden {
46+
position: absolute;
47+
width: 1px;
48+
height: 1px;
49+
padding: 0;
50+
margin: -1px;
51+
overflow: hidden;
52+
clip: rect(0, 0, 0, 0);
53+
white-space: nowrap;
54+
border: 0;
55+
}
56+
57+
/* Accessibility: External link indicator */
58+
a[target="_blank"]::after {
59+
content: " (opens in new tab)";
60+
position: absolute;
61+
width: 1px;
62+
height: 1px;
63+
padding: 0;
64+
margin: -1px;
65+
overflow: hidden;
66+
clip: rect(0, 0, 0, 0);
67+
white-space: nowrap;
68+
border: 0;
69+
}
70+
71+
/* Accessibility: Respect reduced motion preference */
72+
@media (prefers-reduced-motion: reduce) {
73+
*, *::before, *::after {
74+
animation-duration: 0.01ms !important;
75+
animation-iteration-count: 1 !important;
76+
transition-duration: 0.01ms !important;
77+
}
78+
}
79+
80+
/* Accessible mode: readable font + reduced motion */
81+
.accessible-mode {
82+
--pixel-font: "Source Sans 3", sans-serif;
83+
}
84+
85+
.accessible-mode *,
86+
.accessible-mode *::before,
87+
.accessible-mode *::after {
88+
animation-duration: 0.01ms !important;
89+
animation-iteration-count: 1 !important;
90+
transition-duration: 0.01ms !important;
91+
}
92+
2593
html, body {
2694
overflow-x: hidden !important;
2795
}
@@ -87,7 +155,7 @@ footer {
87155
border: white 2px solid;
88156
}
89157

90-
.jumbotron h1,h2 {
158+
.jumbotron h1, .jumbotron h2 {
91159
font-family: var(--pixel-font);
92160
text-shadow: 2px 2px var(--rd-black);
93161
color: white;
@@ -128,6 +196,12 @@ p {
128196
transition: 0.25s;
129197
}
130198

199+
#features > .row {
200+
max-width: 1800px;
201+
margin-left: auto;
202+
margin-right: auto;
203+
}
204+
131205
.feature-card {
132206
background: var(--rd-blue);
133207
border: white 2px solid;
@@ -139,6 +213,32 @@ p {
139213
border-radius: 5px;
140214
}
141215

216+
/* Bootstrap carousel customization */
217+
.carousel {
218+
border-radius: 5px;
219+
overflow: hidden;
220+
}
221+
222+
.carousel-indicators button {
223+
width: 12px;
224+
height: 12px;
225+
border-radius: 50%;
226+
background-color: var(--rd-purple);
227+
opacity: 0.5;
228+
}
229+
230+
.carousel-indicators button.active {
231+
opacity: 1;
232+
background-color: white;
233+
}
234+
235+
.carousel-control-prev-icon,
236+
.carousel-control-next-icon {
237+
background-color: rgba(0, 0, 0, 0.5);
238+
border-radius: 50%;
239+
padding: 20px;
240+
}
241+
142242
.feature-card h3 {
143243
color: white;
144244
font-family: var(--pixel-font);

‎emulator.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,17 +37,17 @@
3737
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700">
3838
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
3939
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
40-
<link rel="stylesheet" href="css/carousel.css">
4140
<link rel="stylesheet" href="css/style.css">
4241
</head>
4342

4443
<body>
44+
<a class="skip-link" href="#main-content">Skip to main content</a>
4545

4646
<!-- Navbar -->
4747
<nav class="navbar navbar-expand-lg">
4848
<div class="container large">
4949
<a class="navbar-brand" href="index.html">
50-
<img src="assets/rd-icons/squircle-icon.svg" height="40">
50+
<img src="assets/rd-icons/squircle-icon.svg" height="40" alt="RetroDECK home">
5151
</a>
5252
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
5353
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -60,7 +60,7 @@
6060
href="https://flathub.org/apps/details/net.retrodeck.retrodeck">Download</a>
6161
</li>
6262
<li class="nav-item">
63-
<a class="nav-link" href="#features">Features</a>
63+
<a class="nav-link" href="index.html#features">Features</a>
6464
</li>
6565
<li class="nav-item">
6666
<a class="nav-link" target="_blank" rel="noopener noreferrer"
@@ -155,7 +155,7 @@
155155
fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
156156
<path
157157
d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15" />
158-
</svg></i>Cooker
158+
</svg>Cooker
159159
</a>
160160
</li>
161161
<li>
@@ -174,16 +174,16 @@
174174
</ul>
175175
<span class="navbar-text form-check form-switch">
176176
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
177-
id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
178-
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
177+
checked onchange="pixelFontToggle()">
178+
<label class="form-check-label" for="pixel-font-switch">Retro Mode</label>
179179
</span>
180180
</div>
181181
</div>
182182
</nav>
183183
<!-- End Navbar -->
184184

185185
<!-- Main Content -->
186-
<main class="container-fluid px-0 mt-4">
186+
<main id="main-content" class="container-fluid px-0 mt-4">
187187
<div class="row">
188188
<div class="col" style="min-height:200px">
189189
<div id="game"></div>

0 commit comments

Comments
 (0)