Skip to content

Commit e262d61

Browse files
TobiasMue91TobiasMue91
committed
- add several accessibility improvements
1 parent 04ce5da commit e262d61

File tree

1 file changed

+26
-25
lines changed

1 file changed

+26
-25
lines changed

‎index.html‎

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
<title>GPTGames: Collection of AI-Generated HTML Games and Utilities</title>
1616
<style>
1717
:root {
18-
--primary:#029CDF; --primary-hover: #0276a8; --secondary:#f0932b; --secondary-hover:#d97e0c;
19-
--bg:#f8f9fa; --card:#fff; --dark:#2f3640; --gray:#e2e6ea; --text:#1e272e; --border:#dee2e6;
18+
--primary:#0276a8; --primary-hover: #015f87; --secondary:#d97e0c; --secondary-hover:#b56908;
19+
--bg:#f8f9fa; --card:#fff; --dark:#1e272e; --gray:#e2e6ea; --text:#1e272e; --border:#dee2e6;
2020
--shadow:0 2px 6px rgba(0,0,0,0.08); --radius:8px; --transition:all 0.2s ease;
2121
}
2222
* {margin:0; padding:0; box-sizing:border-box;}
@@ -109,6 +109,7 @@
109109
.filter-item:hover {background:var(--gray);}
110110
.filter-item.active {background:var(--primary); color:white;}
111111
.clear-search {position:absolute; right:2.5rem; top:50%; transform:translateY(-50%); color:#6c757d; cursor:pointer; font-size:0.8rem; display:none;}
112+
.visually-hidden {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
112113
.skeleton { position: relative; background-color: var(--card); border-radius: var(--radius); overflow: hidden; }
113114
.skeleton::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: skeleton-shimmer 1.5s infinite; }
114115
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
@@ -122,7 +123,6 @@
122123
.skeleton-stat-card { background: var(--card); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); min-width: 150px; text-align: center; flex-grow: 1; max-width: 220px; }
123124
.skeleton-stat-number { height: 28px; width: 60%; margin: 0 auto 0.5rem auto; }
124125
.skeleton-stat-label { height: 16px; width: 80%; margin: 0 auto; }
125-
126126
@media (max-width:768px) {
127127
.header-content {flex-wrap:wrap; height:auto; padding:1rem;}
128128
.search-bar {width:100%; margin-top:1rem; order:3;}
@@ -175,22 +175,25 @@
175175
<body>
176176
<header>
177177
<div class="container header-content">
178-
<a href="/" class="logo" title='...with emphasis on "Games".'><img src="img/logo.svg" width="20" height="20">&nbsp;GPTGames</a>
178+
<a href="/" class="logo" title='...with emphasis on "Games".'>
179+
<img src="img/logo.svg" width="20" height="20" alt="GPTGames Logo">&nbsp;GPTGames
180+
</a>
179181
<div class="search-bar">
182+
<label for="searchInput" class="visually-hidden">Search games & tools</label>
180183
<input type="search" id="searchInput" placeholder="Search games & tools" aria-label="Search">
181-
<span class="clear-search" id="clearSearch" title="Clear search">✕</span>
182-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
184+
<span class="clear-search" id="clearSearch" title="Clear search" aria-label="Clear search">✕</span>
185+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
183186
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
184187
</svg>
185188
</div>
186189
<div class="view-controls">
187-
<button class="view-btn active tooltip" id="gridViewBtn" data-tooltip="Grid View">
188-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
190+
<button class="view-btn active tooltip" id="gridViewBtn" data-tooltip="Grid View" aria-label="Grid View">
191+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
189192
<path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 64l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0zM64 224l88 0 0 64-88 0 0-64zm232 0l0 64-88 0 0-64 88 0zm64 0l88 0 0 64-88 0 0-64zM152 352l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0z"/>
190193
</svg>
191194
</button>
192-
<button class="view-btn tooltip" id="listViewBtn" data-tooltip="List View">
193-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
195+
<button class="view-btn tooltip" id="listViewBtn" data-tooltip="List View" aria-label="List View">
196+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
194197
<path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"/>
195198
</svg>
196199
</button>
@@ -208,7 +211,8 @@
208211
<button class="filter-btn" data-filter="featured">Featured</button>
209212
<button class="filter-btn" data-filter="new">New</button>
210213

211-
<select id="categoryFilter" class="category-select">
214+
<label for="categoryFilter" class="visually-hidden">Select Category</label>
215+
<select id="categoryFilter" class="category-select" aria-label="Filter by category">
212216
<option value="all">All Categories</option>
213217
<option value="puzzle">Puzzles</option>
214218
<option value="arcade">Arcade</option>
@@ -220,40 +224,37 @@
220224
<option value="utility">Utilities</option>
221225
</select>
222226

223-
<select id="sortSelect" class="sort-select">
227+
<label for="sortSelect" class="visually-hidden">Sort By</label>
228+
<select id="sortSelect" class="sort-select" aria-label="Sort items">
224229
<option value="featured">Featured First</option>
225230
<option value="newest">Newest First</option>
226231
<option value="oldest">Oldest First</option>
227232
<option value="az">A-Z</option>
228233
<option value="za">Z-A</option>
229234
</select>
230235

231-
<button class="filter-btn random-btn" id="randomBtn">
232-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
236+
<button class="filter-btn random-btn" id="randomBtn" aria-label="Random item">
237+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
233238
<path d="M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
234239
</svg> I'm Feeling Lucky</button>
235240
</div>
236241
</div>
237242
</div>
238243

239244
<main class="container">
240-
<div class="stats" id="statsContainer">
241-
<!-- Skeleton stats will be placed here -->
242-
</div>
245+
<div class="stats" id="statsContainer"></div>
243246

244247
<section class="main-section">
245248
<div class="section-header">
246249
<h2 class="section-title" id="mainTitle">Featured Games & Tools</h2>
247250
</div>
248-
<div class="grid-view" id="mainGrid">
249-
<!-- Skeleton cards will be placed here -->
250-
</div>
251+
<div class="grid-view" id="mainGrid"></div>
251252
<div class="loading" id="loadingIndicator">
252253
<div class="spinner"></div>
253254
<p>Loading more items...</p>
254255
</div>
255256
<div class="empty-state" id="emptyState" style="display:none">
256-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
257+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
257258
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
258259
</svg>
259260
<h3>No results found</h3>
@@ -267,12 +268,12 @@ <h3>No results found</h3>
267268
<div>&copy; <span id="currentYear"></span> GPTGames</div>
268269
<div class="footer-links">
269270
<a href="https://github.com/TobiasMue91/tobiasmue91.github.io" target="_blank" rel="noopener noreferrer" class="footer-link">
270-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
271+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
271272
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
272273
</svg>GitHub
273274
</a>
274275
<a href="https://www.reddit.com/user/tobias_mueller" target="_blank" rel="noopener noreferrer" class="footer-link">
275-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
276+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
276277
<path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/>
277278
</svg>Reddit
278279
</a>
@@ -281,7 +282,7 @@ <h3>No results found</h3>
281282
</footer>
282283

283284
<button class="back-to-top" id="backToTop" aria-label="Back to top">
284-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
285+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa" aria-hidden="true">
285286
<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
286287
</svg>
287288
</button>
@@ -423,7 +424,7 @@ <h3 class="card-title" title="${item.title}">${item.title}</h3>
423424
<div class="card-description-container">
424425
<p class="card-desc${isListView ? '' : ' truncated'}" title="${item.description || ''}">${item.description || ''}</p>
425426
${!isListView && item.description && item.description.length > 60 ?
426-
`<button class="read-more" data-id="${item.id}">Read more</button>` : ''}
427+
`<button class="read-more" data-id="${item.id}" aria-label="Read more about ${item.title}">Read more</button>` : ''}
427428
</div>
428429
<a href="${item.url}" class="card-btn ${item.type}">${item.type === 'game' ? 'Play Game' : 'Use Tool'}</a>
429430
</div>

0 commit comments

Comments
 (0)