Skip to content

Commit 2bd05e4

Browse files
AsieduDevelopmentHubAsieduDevelopmentHub
committed
enhance: improve accessibility and structure in HTML files
- Added a "Skip to main content" link for better navigation. - Updated logo image alt text for improved accessibility. - Added aria-controls attribute to navigation toggle buttons for better screen reader support. - Assigned IDs to main content sections for improved accessibility and navigation.
1 parent f737f9c commit 2bd05e4

6 files changed

Lines changed: 126 additions & 15 deletions

File tree

‎assets/css/style.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,33 @@
2929
box-sizing: border-box;
3030
}
3131

32+
.skip-link {
33+
position: absolute;
34+
left: 0;
35+
top: 0;
36+
z-index: 100;
37+
padding: 0.65rem 1.1rem;
38+
font-size: 0.875rem;
39+
font-weight: 700;
40+
color: #0f172a;
41+
background: #fef08a;
42+
border-radius: 0 0 10px 0;
43+
border: 2px solid #0f172a;
44+
text-decoration: none;
45+
transform: translateY(-120%);
46+
transition: transform 0.2s ease;
47+
}
48+
49+
.skip-link:focus {
50+
outline: none;
51+
transform: translateY(0);
52+
}
53+
54+
.skip-link:focus-visible {
55+
outline: 3px solid #67e8f9;
56+
outline-offset: 2px;
57+
}
58+
3259
html {
3360
scroll-behavior: smooth;
3461
}
@@ -71,6 +98,22 @@ a:hover {
7198
text-decoration: underline;
7299
}
73100

101+
a:focus-visible,
102+
.btn:focus-visible,
103+
.nav-toggle:focus-visible,
104+
.nav-desktop a:focus-visible,
105+
.nav-panel a:focus-visible,
106+
.footer-links a:focus-visible {
107+
outline: 3px solid var(--accent-2);
108+
outline-offset: 3px;
109+
text-decoration: none;
110+
}
111+
112+
.nav-desktop a.is-active:focus-visible,
113+
.nav-panel a.is-active:focus-visible {
114+
outline-color: #fef08a;
115+
}
116+
74117
/* Matrix rain only inside hero bands (home .hero-wrap, inner .page-hero--mesh) */
75118
.matrix-canvas--hero {
76119
position: absolute;

‎assets/js/main.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,16 @@
6363
var toggle = document.querySelector("[data-nav-toggle]");
6464
var panel = document.querySelector("[data-nav-panel]");
6565
if (toggle && panel) {
66+
if (!panel.id) {
67+
panel.id = "site-nav-panel";
68+
}
69+
if (!toggle.hasAttribute("aria-controls")) {
70+
toggle.setAttribute("aria-controls", panel.id);
71+
}
6672
toggle.addEventListener("click", function () {
6773
var open = panel.classList.toggle("is-open");
6874
toggle.setAttribute("aria-expanded", open ? "true" : "false");
75+
toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
6976
});
7077
}
7178

@@ -77,6 +84,13 @@
7784
if (target) {
7885
e.preventDefault();
7986
target.scrollIntoView({ behavior: "smooth", block: "start" });
87+
if (typeof target.focus === "function") {
88+
try {
89+
target.focus({ preventScroll: true });
90+
} catch (err) {
91+
target.focus();
92+
}
93+
}
8094
if (panel) panel.classList.remove("is-open");
8195
}
8296
});

‎index.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,18 @@
2828
<link rel="stylesheet" href="assets/css/style.css" />
2929
</head>
3030
<body>
31+
<a class="skip-link" href="#main-content">Skip to main content</a>
3132
<header class="site-header">
3233
<div class="header-inner">
3334
<a class="logo logo-with-mark" href="index.html">
34-
<img class="logo-img" src="assets/img/brandmark.jpeg" width="32" height="32" alt="" decoding="async" />
35+
<img
36+
class="logo-img"
37+
src="assets/img/brandmark.jpeg"
38+
width="32"
39+
height="32"
40+
alt="SentraCore"
41+
decoding="async"
42+
/>
3543
<span>SentraCore</span>
3644
</a>
3745
<nav class="nav-desktop" aria-label="Primary">
@@ -49,21 +57,22 @@
4957
class="nav-toggle"
5058
type="button"
5159
data-nav-toggle
60+
aria-controls="site-nav-panel"
5261
aria-expanded="false"
5362
aria-label="Open menu"
5463
>
5564
<span></span>
5665
</button>
5766
</div>
58-
<div class="nav-panel" data-nav-panel>
67+
<div class="nav-panel" id="site-nav-panel" data-nav-panel>
5968
<a href="index.html" data-nav="home">Home</a>
6069
<a href="pages/download.html" data-nav="download">Download</a>
6170
<a href="pages/about.html" data-nav="about">About</a>
6271
<a href="pages/docs.html" data-nav="docs">Docs</a>
6372
</div>
6473
</header>
6574

66-
<main>
75+
<main id="main-content" tabindex="-1">
6776
<div class="hero-wrap">
6877
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6978
<div class="hero-orbs" aria-hidden="true">

‎pages/about.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,18 @@
2828
<link rel="stylesheet" href="../assets/css/style.css" />
2929
</head>
3030
<body>
31+
<a class="skip-link" href="#main-content">Skip to main content</a>
3132
<header class="site-header">
3233
<div class="header-inner">
3334
<a class="logo logo-with-mark" href="../index.html">
34-
<img class="logo-img" src="../assets/img/brandmark.jpeg" width="32" height="32" alt="" decoding="async" />
35+
<img
36+
class="logo-img"
37+
src="../assets/img/brandmark.jpeg"
38+
width="32"
39+
height="32"
40+
alt="SentraCore"
41+
decoding="async"
42+
/>
3543
<span>SentraCore</span>
3644
</a>
3745
<nav class="nav-desktop" aria-label="Primary">
@@ -43,19 +51,26 @@
4351
<div class="nav-cta">
4452
<a class="btn btn-primary" href="#" data-auto-download="windows" data-download-track="header">Download</a>
4553
</div>
46-
<button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-label="Open menu">
54+
<button
55+
class="nav-toggle"
56+
type="button"
57+
data-nav-toggle
58+
aria-controls="site-nav-panel"
59+
aria-expanded="false"
60+
aria-label="Open menu"
61+
>
4762
<span></span>
4863
</button>
4964
</div>
50-
<div class="nav-panel" data-nav-panel>
65+
<div class="nav-panel" id="site-nav-panel" data-nav-panel>
5166
<a href="../index.html" data-nav="home">Home</a>
5267
<a href="download.html" data-nav="download">Download</a>
5368
<a href="about.html" data-nav="about">About</a>
5469
<a href="docs.html" data-nav="docs">Docs</a>
5570
</div>
5671
</header>
5772

58-
<main>
73+
<main id="main-content" tabindex="-1">
5974
<section class="page-hero page-hero--mesh page-reveal">
6075
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6176
<div class="container">

‎pages/docs.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,18 @@
2828
<link rel="stylesheet" href="../assets/css/style.css" />
2929
</head>
3030
<body>
31+
<a class="skip-link" href="#main-content">Skip to main content</a>
3132
<header class="site-header">
3233
<div class="header-inner">
3334
<a class="logo logo-with-mark" href="../index.html">
34-
<img class="logo-img" src="../assets/img/brandmark.jpeg" width="32" height="32" alt="" decoding="async" />
35+
<img
36+
class="logo-img"
37+
src="../assets/img/brandmark.jpeg"
38+
width="32"
39+
height="32"
40+
alt="SentraCore"
41+
decoding="async"
42+
/>
3543
<span>SentraCore</span>
3644
</a>
3745
<nav class="nav-desktop" aria-label="Primary">
@@ -43,19 +51,26 @@
4351
<div class="nav-cta">
4452
<a class="btn btn-primary" href="#" data-auto-download="windows" data-download-track="header">Download</a>
4553
</div>
46-
<button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-label="Open menu">
54+
<button
55+
class="nav-toggle"
56+
type="button"
57+
data-nav-toggle
58+
aria-controls="site-nav-panel"
59+
aria-expanded="false"
60+
aria-label="Open menu"
61+
>
4762
<span></span>
4863
</button>
4964
</div>
50-
<div class="nav-panel" data-nav-panel>
65+
<div class="nav-panel" id="site-nav-panel" data-nav-panel>
5166
<a href="../index.html" data-nav="home">Home</a>
5267
<a href="download.html" data-nav="download">Download</a>
5368
<a href="about.html" data-nav="about">About</a>
5469
<a href="docs.html" data-nav="docs">Docs</a>
5570
</div>
5671
</header>
5772

58-
<main>
73+
<main id="main-content" tabindex="-1">
5974
<section class="page-hero page-hero--mesh page-reveal">
6075
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6176
<div class="container">

‎pages/download.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,18 @@
2828
<link rel="stylesheet" href="../assets/css/style.css" />
2929
</head>
3030
<body>
31+
<a class="skip-link" href="#main-content">Skip to main content</a>
3132
<header class="site-header">
3233
<div class="header-inner">
3334
<a class="logo logo-with-mark" href="../index.html">
34-
<img class="logo-img" src="../assets/img/brandmark.jpeg" width="32" height="32" alt="" decoding="async" />
35+
<img
36+
class="logo-img"
37+
src="../assets/img/brandmark.jpeg"
38+
width="32"
39+
height="32"
40+
alt="SentraCore"
41+
decoding="async"
42+
/>
3543
<span>SentraCore</span>
3644
</a>
3745
<nav class="nav-desktop" aria-label="Primary">
@@ -43,19 +51,26 @@
4351
<div class="nav-cta">
4452
<a class="btn btn-primary" href="#" data-auto-download="windows" data-download-track="header">Download</a>
4553
</div>
46-
<button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-label="Open menu">
54+
<button
55+
class="nav-toggle"
56+
type="button"
57+
data-nav-toggle
58+
aria-controls="site-nav-panel"
59+
aria-expanded="false"
60+
aria-label="Open menu"
61+
>
4762
<span></span>
4863
</button>
4964
</div>
50-
<div class="nav-panel" data-nav-panel>
65+
<div class="nav-panel" id="site-nav-panel" data-nav-panel>
5166
<a href="../index.html" data-nav="home">Home</a>
5267
<a href="download.html" data-nav="download">Download</a>
5368
<a href="about.html" data-nav="about">About</a>
5469
<a href="docs.html" data-nav="docs">Docs</a>
5570
</div>
5671
</header>
5772

58-
<main>
73+
<main id="main-content" tabindex="-1">
5974
<section class="page-hero page-hero--mesh page-reveal">
6075
<canvas class="matrix-canvas matrix-canvas--hero" data-matrix aria-hidden="true"></canvas>
6176
<div class="container">

0 commit comments

Comments
 (0)