From f6af0ba227332f9cad01bba14ce65e01b5080ab1 Mon Sep 17 00:00:00 2001
From: AyrisAI <ayris@ayris.tech>
Date: Sat, 16 May 2026 01:15:12 +0300
Subject: [PATCH] docs: improve accessibility with ARIA labels, focus states
 and contrast adjustments

---
 app/services/[slug]/[location]/page.tsx |  6 +++---
 components/Footer.tsx                   | 21 +++++++++++----------
 components/Navbar.tsx                   |  5 +++--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/services/[slug]/[location]/page.tsx b/app/services/[slug]/[location]/page.tsx
index 75a4895..db85820 100644
--- a/app/services/[slug]/[location]/page.tsx
+++ b/app/services/[slug]/[location]/page.tsx
@@ -191,7 +191,7 @@ export default async function ServiceLocationPage({ params }: Props) {
 
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                             {projects.map((project: any) => (
-                                <Link key={project.id} href={`/works/${project.slug}`} className="group block">
+                                <Link key={project.id} href={`/works/${project.slug}`} className="group block focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label={`${project.title} projesini incele`}>
                                     <div className="space-y-4">
                                         <div className="relative aspect-video overflow-hidden border border-black/10 bg-black/5">
                                             <Image
@@ -221,9 +221,9 @@ export default async function ServiceLocationPage({ params }: Props) {
                     <p className="text-black/40 text-[13px] tracking-[0.1em]">
                         {location.name} bölgesindeki projeniz için profesyonel destek almaya hazır mısınız?
                     </p>
-                    <Link href="/contact" className="button-primary mx-auto inline-flex items-center gap-2">
+                    <Link href="/contact" className="button-primary mx-auto inline-flex items-center gap-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4" aria-label={`${location.name} projeniz için teklif alın`}>
                         Teklif Al
-                        <ArrowRight className="w-3 h-3" />
+                        <ArrowRight className="w-3 h-3" aria-hidden="true" />
                     </Link>
                 </div>
             </section>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 8b7ab49..e50e647 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -30,7 +30,7 @@ export default function Footer() {
                     {/* Left Column - Logo & Description */}
                     <div className="md:col-span-4 flex flex-col justify-between gap-12">
                         {/* Logo */}
-                        <Link href="/" className="inline-block">
+                        <Link href="/" className="inline-block focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label="Muğla Dijital - Ana Sayfaya Dön">
                             <div className="relative w-40 h-12">
                                 <DynamicLogo
                                     src="/logo.png"
@@ -43,20 +43,21 @@ export default function Footer() {
                         </Link>
 
                         {/* Description */}
-                        <p className="text-[11px] text-black/40 leading-[1.8] max-w-xs">
+                        <p className="text-[11px] text-black/50 leading-[1.8] max-w-xs">
                             {settings?.footer_description || "Muğla Dijital olarak markaların dijital dünyada özgün bir şekilde var olmasını sağlıyoruz. Drone çekimi, video prodüksiyon ve sosyal medya yönetimi ile gerçek bağlantılar kuruyoruz."}
                         </p>
                     </div>
 
                     {/* Regions Column - Dynamic districts */}
-                    <div className="md:col-span-2 flex flex-col gap-6">
+                    <div className="md:col-span-2 flex flex-col gap-6" role="navigation" aria-label="Hizmet Bölgeleri">
                         <span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Bölgeler</span>
                         <div className="flex flex-col gap-2">
                             {locations.map((loc) => (
                                 <Link 
                                     key={loc.id} 
                                     href={`/services?region=${loc.slug}`}
-                                    className="text-[11px] font-bold uppercase hover:text-primary transition-colors"
+                                    className="text-[11px] font-bold uppercase hover:text-primary transition-colors focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm"
+                                    aria-label={`${loc.name} bölgesi hizmetlerimiz`}
                                 >
                                     {loc.name}
                                 </Link>
@@ -65,7 +66,7 @@ export default function Footer() {
                     </div>
 
                     {/* Center Column - Menu label + divider */}
-                    <div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex">
+                    <div className="md:col-span-2 flex flex-col items-center gap-6 hidden md:flex" aria-hidden="true">
                         <div className="flex flex-col items-center gap-4">
                             <div className="w-px h-8 bg-black/10" />
                             <span className="text-[10px] tracking-[0.2em] uppercase text-black/30">Menu</span>
@@ -73,7 +74,7 @@ export default function Footer() {
                     </div>
 
                     {/* Right Column - Navigation Links */}
-                    <div className="md:col-span-4 flex flex-col items-start md:items-end gap-3">
+                    <div className="md:col-span-4 flex flex-col items-start md:items-end gap-3" role="navigation" aria-label="Footer Navigasyon">
                         {[
                             { label: "Çalışmalar", href: "/works" },
                             { label: "Hizmetler", href: "/services" },
@@ -84,7 +85,7 @@ export default function Footer() {
                             <Link
                                 key={item.label}
                                 href={item.href}
-                                className="text-2xl md:text-3xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight"
+                                className="text-2xl md:text-3xl font-extrabold uppercase tracking-tight text-black hover:text-primary transition-colors leading-tight focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
                             >
                                 {item.label}
                             </Link>
@@ -102,13 +103,13 @@ export default function Footer() {
                             © {settings?.site_name || "Muğla Dijital"} {new Date().getFullYear()}. Tüm hakları saklıdır.
                         </p>
                         <div className="flex gap-4">
-                            <Link href="/privacy" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase">Gizlilik Politikası</Link>
-                            <Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase">Kullanım Şartları</Link>
+                            <Link href="/privacy" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Gizlilik Politikası Sayfası">Gizlilik Politikası</Link>
+                            <Link href="/terms" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-black transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Kullanım Şartları Sayfası">Kullanım Şartları</Link>
                         </div>
                     </div>
 
                     {/* Credit */}
-                    <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-primary transition-colors uppercase">
+                    <a href="https://ayris.tech" target="_blank" rel="noopener noreferrer" className="text-[10px] text-black/25 tracking-[0.05em] hover:text-primary transition-colors uppercase focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 rounded-sm" aria-label="Tasarım ve Yazılım: ayris.tech">
                         created by ayris.tech
                     </a>
                 </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 36fcfad..6e53d2f 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -14,7 +14,7 @@ export default function Navbar() {
         >
             <div className="flex items-center justify-between px-6 md:px-12 py-5">
                 {/* Logo */}
-                <Link href="/" className="flex items-center gap-3">
+                <Link href="/" className="flex items-center gap-3 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm" aria-label="Muğla Dijital - Ana Sayfaya Dön">
                     <motion.div 
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
@@ -59,7 +59,7 @@ export default function Navbar() {
                             >
                                 <Link
                                     href={item.href}
-                                    className="text-[11px] tracking-[0.15em] uppercase text-black/60 hover:text-black transition-colors nav-link-hover px-3 py-2"
+                                    className="text-[11px] tracking-[0.15em] uppercase text-black/70 hover:text-black transition-colors nav-link-hover px-3 py-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-4 rounded-sm"
                                 >
                                     {item.label}
                                 </Link>
@@ -74,6 +74,7 @@ export default function Navbar() {
                     animate={{ opacity: 1 }}
                     transition={{ delay: 1 }}
                     className="text-[13px] font-bold tracking-[0.1em] uppercase text-black"
+                    aria-hidden="true"
                 >
                     Muğla Dijital
                 </motion.span>