fix: improve accessibility and semantic structure

AnmiTaliDev · AnmiTaliDev · commit f9638a5ed150 · 2026-03-31T10:03:46.000+05:00
- Add skip-link for keyboard navigation
- Fix heading hierarchy (h1 in Hero, remove duplicate from Header)
- Add aria-expanded and aria-controls to menu toggle
- Add focus-visible styles and respect prefers-reduced-motion
- Add theme-color meta and scroll-margin for section anchors
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -17,9 +17,9 @@ const altUrl = getAlternateUrl(path, altLang);
 
 <header>
   <div class="container">
-    <a href={lang === 'ru' ? '/ru' : '/'} class="logo-link">
+    <a href={lang === 'ru' ? '/ru' : '/'} class="logo-link" aria-label="NurOS — Home">
       <div class="logo">
-        <h1>NurOS</h1>
+        <span class="logo-text">NurOS</span>
       </div>
     </a>
 
@@ -55,7 +55,7 @@ const altUrl = getAlternateUrl(path, altLang);
         <a href={getAlternateUrl(path, 'en')} class:list={[{ active: lang === 'en' }]}>EN</a>
         <a href={getAlternateUrl(path, 'ru')} class:list={[{ active: lang === 'ru' }]}>RU</a>
       </div>
-      <button class="menu-toggle" id="menu-toggle" aria-label="Menu">
+      <button class="menu-toggle" id="menu-toggle" aria-label="Menu" aria-expanded="false" aria-controls="main-nav">
         <span></span>
         <span></span>
       </button>
@@ -67,8 +67,14 @@ const altUrl = getAlternateUrl(path, altLang);
   const toggle = document.getElementById('menu-toggle');
   const nav    = document.getElementById('main-nav');
 
-  toggle?.addEventListener('click', () => nav?.classList.toggle('active'));
-  nav?.querySelectorAll('a').forEach((l) => l.addEventListener('click', () => nav.classList.remove('active')));
+  toggle?.addEventListener('click', () => {
+    const open = nav?.classList.toggle('active');
+    toggle.setAttribute('aria-expanded', String(!!open));
+  });
+  nav?.querySelectorAll('a').forEach((l) => l.addEventListener('click', () => {
+    nav.classList.remove('active');
+    toggle?.setAttribute('aria-expanded', 'false');
+  }));
 
   document.querySelectorAll('nav a[href^="#"]').forEach((link) => {
     link.addEventListener('click', (e) => {
@@ -96,7 +102,7 @@ const altUrl = getAlternateUrl(path, altLang);
 
   .logo-link { text-decoration: none; opacity: 1; }
   .logo-link:hover { opacity: 1; }
-  .logo h1 { font-size: 1.5rem; font-weight: 600; color: var(--text-color); line-height: 1.2; }
+  .logo-text { font-size: 1.5rem; font-weight: 600; color: var(--text-color); line-height: 1.2; }
   .tagline { font-size: 0.875rem; color: var(--accent-color); }
 
   nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -7,7 +7,7 @@ const t = useTranslations(lang);
 <section id="home" class="hero">
   <div class="container">
     <div class="hero-content">
-      <h2 class="hero-title">NurOS <span class="hero-title-accent">"Juldyz"</span></h2>
+      <h1 class="hero-title">NurOS <span class="hero-title-accent">"Juldyz"</span></h1>
       <p class="hero-subtitle">{t('hero.subtitle')}</p>
       <div class="cta-buttons">
         <a href={lang === 'ru' ? '/ru/releases' : '/releases'} class="btn hero-btn">{t('hero.cta')}</a>
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -23,13 +23,15 @@ const lang = getLangFromUrl(Astro.url);
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
+    <meta name="theme-color" content="#0d0d0d" />
     <link rel="icon" href="/favicon.png" type="image/png" />
     <title>{title}</title>
   </head>
   <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <div class="blog-app">
       <Header />
-      <main>
+      <main id="main-content">
         <slot />
       </main>
       <Footer />
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -21,10 +21,12 @@ const lang = getLangFromUrl(Astro.url);
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
+    <meta name="theme-color" content="#0d0d0d" />
     <link rel="icon" href="/favicon.png" type="image/png" />
     <title>{title}</title>
   </head>
   <body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     <slot />
   </body>
 </html>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -7,7 +7,7 @@ import Footer from '../components/Footer.astro';
 <MainLayout title="404 — NurOS" description="Page not found">
   <div class="nuros-app">
     <Header />
-    <main class="not-found">
+    <main id="main-content" class="not-found">
       <div class="container">
         <div class="not-found-inner">
           <p class="code">404</p>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,7 +12,7 @@ import Footer from '../components/Footer.astro';
 <MainLayout>
   <div class="nuros-app">
     <Header />
-    <main>
+    <main id="main-content">
       <Hero />
       <About />
       <Features />
diff --git a/src/pages/releases.astro b/src/pages/releases.astro
@@ -11,7 +11,7 @@ const t = useTranslations(lang);
 <MainLayout title={`${t('download.title')} — NurOS`} description={t('download.subtitle')}>
   <div class="nuros-app">
     <Header />
-    <main class="dl-page">
+    <main id="main-content" class="dl-page">
       <div class="container">
 
         <div class="dl-header">
diff --git a/src/pages/ru/index.astro b/src/pages/ru/index.astro
@@ -12,7 +12,7 @@ import Footer from '../../components/Footer.astro';
 <MainLayout title="NurOS" description="Независимый Linux дистрибутив">
   <div class="nuros-app">
     <Header />
-    <main>
+    <main id="main-content">
       <Hero />
       <About />
       <Features />
diff --git a/src/pages/ru/releases.astro b/src/pages/ru/releases.astro
@@ -11,7 +11,7 @@ const t = useTranslations(lang);
 <MainLayout title={`${t('download.title')} — NurOS`} description={t('download.subtitle')}>
   <div class="nuros-app">
     <Header />
-    <main class="dl-page">
+    <main id="main-content" class="dl-page">
       <div class="container">
 
         <div class="dl-header">
diff --git a/src/pages/ru/team.astro b/src/pages/ru/team.astro
@@ -9,7 +9,7 @@ import Footer from '../../components/Footer.astro';
 <MainLayout title="Команда — NurOS" description="Познакомьтесь с командой NurOS и присоединяйтесь к нам">
   <div class="nuros-app">
     <Header />
-    <main class="team-page">
+    <main id="main-content" class="team-page">
       <Team />
       <Contact />
     </main>
diff --git a/src/pages/team.astro b/src/pages/team.astro
@@ -9,7 +9,7 @@ import Footer from '../components/Footer.astro';
 <MainLayout title="Team — NurOS" description="Meet the NurOS development team and join us">
   <div class="nuros-app">
     <Header />
-    <main class="team-page">
+    <main id="main-content" class="team-page">
       <Team />
       <Contact />
     </main>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,3 +1,7 @@
+html {
+  color-scheme: dark;
+}
+
 :root {
   --primary-color: #1a5b9c;
   --primary-hover: #1568b3;
@@ -73,6 +77,7 @@ ul {
   transition: background-color 0.2s ease, transform 0.2s ease;
   border: none;
   border-radius: var(--border-radius);
+  touch-action: manipulation;
 }
 
 .btn:hover {
@@ -93,3 +98,49 @@ ul {
   border-color: var(--accent-color);
   color: var(--accent-color);
 }
+
+/* Focus-visible: visible ring on keyboard nav, not on click */
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+/* Skip link for keyboard users */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 1rem;
+  z-index: 9999;
+  padding: 0.5rem 1rem;
+  background: var(--primary-color);
+  color: #fff;
+  font-weight: 600;
+  border-radius: var(--border-radius);
+  transition: top 0.1s;
+}
+.skip-link:focus {
+  top: 1rem;
+}
+
+/* Section anchors: don't hide under fixed header */
+section[id] {
+  scroll-margin-top: 90px;
+}
+
+/* Heading balance to prevent widows */
+h1, h2, h3 {
+  text-wrap: balance;
+}
+
+/* Respect reduced-motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
