feat: implement high-quality accessibility patterns (skip-link, scroll-margins, reduced-motion)

2026-05-16 01:16:33 +03:00
parent f6af0ba227
commit 15fee9be38
2 changed files with 33 additions and 3 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -24,6 +24,26 @@ body {
    -webkit-font-smoothing: antialiased;
 }

+/* ===== ACCESSIBILITY ===== */
+:focus-visible {
+    scroll-margin-top: 100px;
+}
+
+:target {
+    scroll-margin-top: 100px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
 /* ===== DIAGONAL LINE DECORATION ===== */
 .diagonal-line {
    position: relative;
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -131,9 +131,19 @@ export default async function RootLayout({
    return (
        <html lang="tr">
            <body className={`${martianMono.variable} antialiased`}>
-                <ClientWrapper>
-                    {children}
-                </ClientWrapper>
+                {/* Skip to Main Content Link */}
+                <a 
+                    href="#main-content" 
+                    className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-primary focus:text-white focus:font-bold focus:rounded-sm focus:outline-none"
+                >
+                    Ana İçeriğe Atla
+                </a>
+
+                <div id="main-content">
+                    <ClientWrapper>
+                        {children}
+                    </ClientWrapper>
+                </div>
                <script
                    type="application/ld+json"
                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}