From e1604ee28f7f2b292d9d33496f4f11eadc31d4b2 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Sun, 17 May 2026 22:47:03 -0500
Subject: [PATCH] fix: add aria-labels for accessibility, fix JSX template
 literal syntax (#101) (batch 10.2)

---
 src/components/layout/Footer.jsx    | 15 +++++++++------
 src/components/layout/Header.jsx    | 24 ++++++++++++------------
 src/components/layout/MobileNav.jsx | 10 +++++++---
 src/pages/Contact.jsx               | 10 +++++-----
 src/pages/Home.jsx                  | 28 ++++++++++++++--------------
 src/pages/Support.jsx               |  8 ++++----
 6 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index bc9f8bf..fc260da 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -56,18 +56,18 @@ const Footer = () => {
             <p className="text-navy-light text-sm mb-3">{companyInfo.address}</p>
             <div className="space-y-2 text-navy-light text-sm mb-3">
               <div>
-                <a href={`mailto:${companyInfo.email}`} className="hover:text-primary-cyan transition-colors">{companyInfo.email}</a>
+                <a href={`mailto:${companyInfo.email}`} className="hover:text-primary-cyan transition-colors" aria-label={`Send email to ${companyInfo.email}`}>{companyInfo.email}</a>
               </div>
               <div>
-                <a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors">{companyInfo.phone}</a>
+                <a href={`tel:+1${companyInfo.phone.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.phone}`}>{companyInfo.phone}</a>
               </div>
               <div>
-                <a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors">{companyInfo.tollFree}</a>
+                <a href={`tel:+1${companyInfo.tollFree.replace(/\D/g, '')}`} className="hover:text-primary-cyan transition-colors" aria-label={`Call ${companyInfo.tollFree}`}>{companyInfo.tollFree}</a>
               </div>
-              <Link to="/contact" className="inline-block text-primary-cyan hover:underline">Contact Form</Link>
+              <Link to="/contact" className="inline-block text-primary-cyan hover:underline" aria-label="Fill out the contact form">Contact Form</Link>
             </div>
             <div className="mt-4">
-              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-primary-cyan text-primary-navy hover:bg-primary-cyan/90 transition-colors">
+              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 bg-primary-cyan text-primary-navy hover:bg-primary-cyan/90 transition-colors" aria-label="Request a consultation">
                 Request Consultation
               </Link>
             </div>
@@ -83,6 +83,7 @@ const Footer = () => {
                   <Link
                     to={link.href}
                     className="text-navy-light hover:text-white transition-colors text-sm"
+                    aria-label={link.name}
                   >
                     {link.name}
                   </Link>
@@ -100,6 +101,7 @@ const Footer = () => {
                   <Link
                     to={service.href}
                     className="text-navy-light hover:text-white transition-colors text-sm"
+                    aria-label={service.name}
                   >
                     {service.name}
                   </Link>
@@ -117,6 +119,7 @@ const Footer = () => {
                   <Link
                     to={industry.href}
                     className="text-navy-light hover:text-white transition-colors text-sm"
+                    aria-label={industry.name}
                   >
                     {industry.name}
                   </Link>
@@ -134,7 +137,7 @@ const Footer = () => {
                 8x8 and Cisco Certified Partner | Veteran Owned | 25+ Years Experience
               </p>
               <div className="flex justify-center md:justify-start gap-4 text-sm">
-                <a href="https://linkedin.com/company/queue-north-technologies-llc" target="_blank" rel="noopener noreferrer" className="text-primary-cyan hover:text-white transition-colors">
+                <a href="https://linkedin.com/company/queue-north-technologies-llc" target="_blank" rel="noopener noreferrer" className="text-primary-cyan hover:text-white transition-colors" aria-label="Follow Queue North on LinkedIn">
                   LinkedIn
                 </a>
               </div>
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 3fba461..f8bce54 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -52,7 +52,7 @@ const Header = () => {
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
           <div className="flex items-center gap-3">
-            <Link to="/" className="flex items-center gap-3">
+            <Link to="/" className="flex items-center gap-3" aria-label="Queue North Technologies Home">
               <img 
                 src="/logo.png" 
                 alt="Queue North Technologies" 
@@ -63,7 +63,7 @@ const Header = () => {
           </div>
 
           {/* Desktop Nav */}
-          <nav className="hidden md:flex items-center gap-6">
+          <nav className="hidden md:flex items-center gap-6" aria-label="Main navigation">
             {navLinks.map((link) => (
               <div key={link.name} className="relative group">
                 <Link
@@ -110,7 +110,7 @@ const Header = () => {
 
           {/* CTA Button */}
           <div className="hidden md:block">
-            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
+            <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors" aria-label="Request a consultation">
               Request Consultation
             </Link>
           </div>
@@ -119,7 +119,7 @@ const Header = () => {
           <div className="md:hidden">
             <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
               <SheetTrigger asChild>
-                <button className="p-2 text-white hover:text-primary-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md">
+                <button className="p-2 text-white hover:text-primary-cyan transition-colors focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md" aria-label="Open navigation menu">
                   <span className="sr-only">Open menu</span>
                   <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -132,18 +132,18 @@ const Header = () => {
                 </VisuallyHidden.Root>
                 <div className="flex flex-col h-full">
                   <div className="flex items-center gap-3 mb-6">
-                    <Link to="/" onClick={closeMobileMenu} className="flex items-center gap-3">
+                    <Link to="/" onClick={closeMobileMenu} className="flex items-center gap-3" aria-label="Queue North Technologies Home">
                       <img src="/logo.png" alt="Queue North" className="h-11 w-auto" />
                       <span className="font-bold text-2xl">Queue North</span>
                     </Link>
                   </div>
                   
-                  <nav className="flex flex-col space-y-6">
+                  <nav className="flex flex-col space-y-6" aria-label="Mobile navigation">
                     <div>
                       <ul className="space-y-2">
                         {navLinks.map((link) => (
                           <li key={link.name}>
-                            <Link to={link.href} onClick={closeMobileMenu} className={`block text-base font-medium py-2 ${isActive(link.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'} transition-colors`}>
+                            <Link to={link.href} onClick={closeMobileMenu} className={`block text-base font-medium py-2 ${isActive(link.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'} transition-colors`} aria-label={link.name}>
                               {link.name}
                             </Link>
                           </li>
@@ -152,11 +152,11 @@ const Header = () => {
                     </div>
 
                     <div>
-                      <h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3">Services</h4>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3" aria-hidden="true">Services</h4>
                       <ul className="space-y-2">
                         {serviceLinks.map((service) => (
                           <li key={service.name}>
-                            <Link to={service.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`}>
+                            <Link to={service.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`} aria-label={'Learn about ' + service.name}>
                               {service.name}
                             </Link>
                           </li>
@@ -165,11 +165,11 @@ const Header = () => {
                     </div>
 
                     <div>
-                      <h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3">Industries</h4>
+                      <h4 className="text-xs font-semibold uppercase tracking-wider text-white/60 mb-3" aria-hidden="true">Industries</h4>
                       <ul className="space-y-2">
                         {industryLinks.map((industry) => (
                           <li key={industry.name}>
-                            <Link to={industry.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`}>
+                            <Link to={industry.href} onClick={closeMobileMenu} className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-white/70 hover:text-white'}`} aria-label={'Learn about ' + industry.name + ' industry solutions'}>
                               {industry.name}
                             </Link>
                           </li>
@@ -179,7 +179,7 @@ const Header = () => {
                   </nav>
 
                   <div className="mt-auto pt-6">
-                    <Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors">
+                    <Link to="/contact" onClick={closeMobileMenu} className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-cyan text-primary-navy hover:bg-cyan-600 transition-colors" aria-label="Request a consultation">
                       Request Consultation
                     </Link>
                   </div>
diff --git a/src/components/layout/MobileNav.jsx b/src/components/layout/MobileNav.jsx
index b5e0791..c323505 100644
--- a/src/components/layout/MobileNav.jsx
+++ b/src/components/layout/MobileNav.jsx
@@ -40,7 +40,7 @@ const MobileNav = () => {
     <div className="md:hidden">
       <Sheet open={isOpen} onOpenChange={setIsOpen}>
         <SheetTrigger asChild>
-          <button className="p-2 text-white hover:text-primary-cyan focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md">
+          <button className="p-2 text-white hover:text-primary-cyan focus:outline-none focus:ring-2 focus:ring-primary-cyan rounded-md" aria-label="Open navigation menu">
             <svg
               className="h-6 w-6"
               fill="none"
@@ -79,6 +79,7 @@ const MobileNav = () => {
                         to={link.href}
                         onClick={closeMobileMenu}
                         className={`block text-base font-medium py-2 transition-colors ${isActive(link.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
+                        aria-label={link.name}
                       >
                         {link.name}
                       </Link>
@@ -89,7 +90,7 @@ const MobileNav = () => {
 
               {/* Services */}
               <div>
-                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Services</h4>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3" aria-hidden="true">Services</h4>
                 <ul className="space-y-2">
                   {services.map((service) => (
                     <li key={service.name}>
@@ -97,6 +98,7 @@ const MobileNav = () => {
                         to={service.href}
                         onClick={closeMobileMenu}
                         className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(service.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
+                        aria-label={'Learn about ' + service.name}
                       >
                         {service.name}
                       </Link>
@@ -107,7 +109,7 @@ const MobileNav = () => {
 
               {/* Industries */}
               <div>
-                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3">Industries</h4>
+                <h4 className="text-xs font-semibold uppercase tracking-wider text-navy-light mb-3" aria-hidden="true">Industries</h4>
                 <ul className="space-y-2">
                   {industries.map((industry) => (
                     <li key={industry.name}>
@@ -115,6 +117,7 @@ const MobileNav = () => {
                         to={industry.href}
                         onClick={closeMobileMenu}
                         className={`block text-sm py-2 border-b border-white/10 last:border-0 transition-colors ${isActive(industry.href) ? 'text-white font-semibold' : 'text-navy-light hover:text-white'}`}
+                        aria-label={'Learn about ' + industry.name + ' industry solutions'}
                       >
                         {industry.name}
                       </Link>
@@ -129,6 +132,7 @@ const MobileNav = () => {
                 to="/contact"
                 onClick={closeMobileMenu}
                 className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 w-full bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors"
+                aria-label="Request a consultation"
               >
                 Request Consultation
               </Link>
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index e15ef93..4dca77e 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -134,19 +134,19 @@ const Contact = () => {
                 <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
                 </svg>
-                <a href="tel:+13217308020" className="text-sm font-medium hover:underline">(321) 730-8020</a>
+                <a href="tel:+13217308020" className="text-sm font-medium hover:underline" aria-label="Call (321) 730-8020">(321) 730-8020</a>
               </div>
               <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
                 <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
                 </svg>
-                <a href="tel:+18886562850" className="text-sm font-medium hover:underline">(888) 656-2850</a>
+                <a href="tel:+18886562850" className="text-sm font-medium hover:underline" aria-label="Call (888) 656-2850">(888) 656-2850</a>
               </div>
               <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
                 <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                 </svg>
-                <a href="mailto:info@queuenorth.com" className="text-sm font-medium hover:underline">info@queuenorth.com</a>
+                <a href="mailto:info@queuenorth.com" className="text-sm font-medium hover:underline" aria-label="Send email to info@queuenorth.com">info@queuenorth.com</a>
               </div>
             </div>
             <div className="mb-8">
@@ -176,8 +176,8 @@ const Contact = () => {
                   </div>
                   <div>
                     <h3 className="font-semibold text-text mb-2">Phone</h3>
-                    <p className="text-soft-text"><a href="tel:+13217308020" className="hover:underline">(321) 730-8020</a></p>
-                    <p className="text-soft-text"><a href="tel:+18886562850" className="hover:underline">(888) 656-2850 - Toll Free</a></p>
+                    <p className="text-soft-text"><a href="tel:+13217308020" className="hover:underline" aria-label="Call (321) 730-8020">(321) 730-8020</a></p>
+                    <p className="text-soft-text"><a href="tel:+18886562850" className="hover:underline" aria-label="Call (888) 656-2850 - Toll Free">(888) 656-2850 - Toll Free</a></p>
                   </div>
                   <div>
                     <h3 className="font-semibold text-text mb-2">Contact Us</h3>
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index fed4c79..36683bc 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -83,10 +83,10 @@ const Home = () => {
                 We handle your phones, internet, and IT so you can focus on running your business. 8x8 Certified Partner with 25+ years of proven reliability.
               </p>
               <div className="flex flex-col sm:flex-row gap-4">
-                <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-white text-primary-navy hover:bg-gray-100 transition-colors">
+                <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-white text-primary-navy hover:bg-gray-100 transition-colors" aria-label="Schedule a consultation">
                   Schedule Consultation
                 </Link>
-                <Link to="/services" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 border border-white text-white hover:bg-white/10 transition-colors">
+                <Link to="/services" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 border border-white text-white hover:bg-white/10 transition-colors" aria-label="View our services">
                   View Services
                 </Link>
               </div>
@@ -176,7 +176,7 @@ const Home = () => {
               Why Queue North? Proven reliability, decades of experience, and unwavering support
             </p>
             <div>
-              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
                 Request Consultation
               </Link>
             </div>
@@ -292,7 +292,7 @@ const Home = () => {
               <Card key={service.id} className="hover:shadow-md transition-shadow cursor-pointer">
                 <CardHeader>
                   <div className="flex items-center gap-3 mb-2">
-                    <div className="bg-primary-navy/10 p-2 rounded-lg">
+                    <div className="bg-primary-navy/10 p-2 rounded-lg" aria-hidden="true">
                       {service.icon === 'message-circle' && <MessageCircle className="w-6 h-6 text-primary-navy" />}
                       {service.icon === 'users' && <Users className="w-6 h-6 text-primary-navy" />}
                       {service.icon === 'life-buoy' && <LifeBuoy className="w-6 h-6 text-primary-navy" />}
@@ -301,16 +301,16 @@ const Home = () => {
                       {service.icon === 'wifi' && <Wifi className="w-6 h-6 text-primary-navy" />}
                       {service.icon === 'network' && <Network className="w-6 h-6 text-primary-navy" />}
                     </div>
-                    <CardTitle className="text-primary-navy text-xl">{service.name}</CardTitle>
+                    <CardTitle className="text-primary-navy text-xl" aria-label={service.name}>{service.name}</CardTitle>
                   </div>
-                  <CardDescription className="font-medium text-teal-900">{service.homeDesc}</CardDescription>
+                  <CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="flex flex-col gap-2">
-                    <Link to={`/services/${service.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline">
+                    <Link to={`/services/${service.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline" aria-label={`Learn more about ${service.name}`}>
                       Learn more →
                     </Link>
-                    <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 border border-primary-navy text-primary-navy hover:bg-primary-navy hover:text-white transition-colors">
+                    <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 border border-primary-navy text-primary-navy hover:bg-primary-navy hover:text-white transition-colors" aria-label="Learn more about services">
                       Request Consultation
                     </Link>
                   </div>
@@ -330,7 +330,7 @@ const Home = () => {
               Four concrete differentiators that set us apart
             </p>
             <div>
-              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
                 Request Consultation
               </Link>
             </div>
@@ -399,12 +399,12 @@ const Home = () => {
               return (
                 <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
                   <CardContent className="p-6">
-                    <div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4">
+                    <div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4" aria-hidden="true">
                       <IconComponent className="w-8 h-8 text-teal-600" />
                     </div>
-                    <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
-                    <p className="text-sm text-soft-text mb-4">{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
-                    <Link to={`/industries/${industry.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline">
+                    <h3 className="text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
+                    <p className="text-sm text-soft-text mb-4" aria-label={industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}>{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
+                    <Link to={`/industries/${industry.id}`} className="text-primary-navy p-0 h-auto text-sm hover:underline" aria-label={`Learn more about ${industry.name} industry solutions`}> industry solutions`>
                       Learn more →
                     </Link>
                   </CardContent>
@@ -458,7 +458,7 @@ const Home = () => {
           <p className="text-lg text-soft-text mb-8 max-w-2xl mx-auto">
             Share a few details and we'll provide clear direction.
           </p>
-          <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors">
+          <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
             Request Consultation
           </Link>
         </div>
diff --git a/src/pages/Support.jsx b/src/pages/Support.jsx
index 65b9213..1fe3bcd 100644
--- a/src/pages/Support.jsx
+++ b/src/pages/Support.jsx
@@ -132,13 +132,13 @@ const Support = () => {
                 <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 5.13a1 1 0 01-1.31.42a2 2 0 00-2.63-.54l-2.238 5.03a2 2 0 01-2.71.319L2.663 12H4a2 2 0 012 2v2a2 2 0 01-2 2H2a2 2 0 01-2-2V5z" />
                 </svg>
-                <p className="text-sm font-medium"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline">(321) 730-8020</a></p>
+                <p className="text-sm font-medium"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Call (321) 730-8020">(321) 730-8020</a></p>
               </div>
               <div className="flex items-center gap-2 px-4 py-2 bg-primary-navy/10 rounded-lg text-primary-navy">
                 <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                 </svg>
-                <p className="text-sm font-medium"><a href="mailto:info@queuenorth.com" className="text-primary-cyan hover:text-cyan-700 underline">info@queuenorth.com</a></p>
+                <p className="text-sm font-medium"><a href="mailto:info@queuenorth.com" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Send email to info@queuenorth.com">info@queuenorth.com</a></p>
               </div>
             </div>
             <div className="mb-8">
@@ -189,12 +189,12 @@ const Support = () => {
                       </a>
                     </div>
                     <p className="text-sm text-soft-text">
-                      Or call our support team <a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline">(321) 730-8020</a>
+                      Or call our support team <a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Call (321) 730-8020">(321) 730-8020</a>
                     </p>
                   </div>
                   <div>
                     <h3 className="font-semibold text-text mb-2">Phone</h3>
-                    <p className="text-soft-text"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline">(321) 730-8020</a></p>
+                    <p className="text-soft-text"><a href="tel:+13217308020" className="text-primary-cyan hover:text-cyan-700 underline" aria-label="Call (321) 730-8020">(321) 730-8020</a></p>
                   </div>
                   <div>
                     <h3 className="font-semibold text-text mb-2">Support Hours</h3>