✨ Improve accessibility and SEO by updating ARIA attributes, alt text, and link titles for sponsor components

Author: HassanZahirnia

resources/views/components/sponsors/lists/docs/corporate-sponsors.blade.php

@@ -1,21 +1,27 @@
 <a
     href="https://www.redgalaxy.co.uk/"
     class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-    title="RedGalaxy"
-    aria-label="Visit RedGalaxy website, sponsor"
+    title="Learn more about RedGalaxy"
+    aria-label="Visit RedGalaxy website"
+    rel="noopener"
 >
-    <x-sponsors.logos.redgalaxy class="h-auto max-h-8 max-w-full" />
+    <x-sponsors.logos.redgalaxy
+        class="h-auto max-h-8 max-w-full"
+        alt="RedGalaxy logo"
+    />
     <span class="sr-only">RedGalaxy</span>
 </a>
 
 <a
     href="https://sevalla.com/?utm_source=nativephp&utm_medium=Referral&utm_campaign=homepage"
     class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-    title="Sevalla"
-    aria-label="Visit Sevalla website, sponsor"
+    title="Learn more about Sevalla"
+    aria-label="Visit Sevalla website"
+    rel="noopener"
 >
     <x-sponsors.logos.sevalla
         class="h-auto max-h-8 max-w-full text-black dark:text-white"
+        alt="Sevalla logo"
     />
     <span class="sr-only">Sevalla</span>
 </a>
@@ -30,30 +36,34 @@ class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100
     <x-sponsors.logos.serverauth
     class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
     />
-    <span class="sr-only">ServerAuth</span>
+    <span class="sr-only">Visit ServerAuth</span>
     </a>
 --}}
 
 <a
     href="https://www.kaashosting.nl/?lang=en"
     class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-    title="KaasHosting"
-    aria-label="Visit KaasHosting website, sponsor"
+    title="Learn more about KaasHosting"
+    aria-label="Visit KaasHosting website"
+    rel="noopener"
 >
     <x-sponsors.logos.kaashosting
         class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
+        alt="KaasHosting logo"
     />
     <span class="sr-only">KaasHosting</span>
 </a>
 
 <a
     href="https://borah.digital/"
     class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-    title="Borah Digital Labs"
-    aria-label="Visit Borah Digital Labs website, sponsor"
+    title="Learn more about Borah Digital Labs"
+    aria-label="Visit Borah Digital Labs website"
+    rel="noopener"
 >
     <x-sponsors.logos.borah
         class="block h-auto max-h-8 max-w-full fill-[#042340] dark:fill-white"
+        alt="Borah Digital Labs logo"
     />
     <span class="sr-only">Borah Digital Labs</span>
 </a>

resources/views/components/sponsors/lists/docs/featured-sponsors.blade.php

@@ -1,18 +1,19 @@
 <a
     href="https://beyondco.de/?utm_source=nativephp&utm_medium=logo&utm_campaign=nativephp"
-    title="BeyondCode sponsor"
-    aria-label="Visit BeyondCode, our featured sponsor"
+    title="Learn more about BeyondCode"
+    aria-label="Visit BeyondCode website"
     class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
+    rel="noopener sponsored"
 >
     <img
         src="/img/sponsors/beyondcode.png"
-        alt="BeyondCode logo"
+        alt="BeyondCode company logo - featured sponsor"
         class="block h-auto max-h-8 max-w-full dark:hidden"
         loading="lazy"
     />
     <img
         src="/img/sponsors/beyondcode-dark.png"
-        alt="BeyondCode logo"
+        alt="BeyondCode company logo - featured sponsor"
         class="hidden h-auto max-h-8 max-w-full dark:block"
         loading="lazy"
     />
@@ -21,9 +22,10 @@ class="hidden h-auto max-h-8 max-w-full dark:block"
 
 <a
     href="https://laradevs.com/?ref=nativephp"
-    title="Laradevs sponsor"
-    aria-label="Visit Laradevs, our featured sponsor"
+    title="Learn more about Laradevs"
+    aria-label="Visit Laradevs website"
     class="inline-grid h-16 w-40 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
+    rel="noopener sponsored"
 >
     <x-sponsors.logos.laradevs
         class="block h-auto max-h-8 max-w-full text-black dark:text-white"

resources/views/components/sponsors/lists/home/corporate-sponsors.blade.php

@@ -5,12 +5,14 @@ class="opacity-0"
     <a
         href="https://www.redgalaxy.co.uk/"
         class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-        title="RedGalaxy"
-        aria-label="Visit RedGalaxy website, corporate sponsor"
+        title="Learn more about RedGalaxy"
+        aria-label="Visit RedGalaxy website"
+        rel="noopener"
     >
         <x-sponsors.logos.redgalaxy
             class="h-auto max-h-10 max-w-full"
             alt="RedGalaxy logo"
+            loading="lazy"
         />
         <span class="sr-only">RedGalaxy</span>
     </a>
@@ -23,12 +25,14 @@ class="opacity-0"
     <a
         href="https://sevalla.com/?utm_source=nativephp&utm_medium=Referral&utm_campaign=homepage"
         class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-        title="Sevalla"
-        aria-label="Visit Sevalla website, corporate sponsor"
+        title="Learn more about Sevalla"
+        aria-label="Visit Sevalla website"
+        rel="noopener"
     >
         <x-sponsors.logos.sevalla
             class="h-auto max-h-10 max-w-full text-black dark:text-white"
             alt="Sevalla logo"
+            loading="lazy"
         />
         <span class="sr-only">Sevalla</span>
     </a>
@@ -39,8 +43,8 @@ class="h-auto max-h-10 max-w-full text-black dark:text-white"
     <a
     href="https://serverauth.com/"
     class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:ring-1 will-change-transform hover:scale-105 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15 hover:bg-gray-200/70"
-    title="ServerAuth"
-    aria-label="Visit ServerAuth website, corporate sponsor"
+    title="Learn m"
+    aria-label="Visit ServerAuth website"
     >
     <x-sponsors.logos.serverauth
     class="block h-auto max-h-10 max-w-full fill-[#042340] dark:fill-white"
@@ -58,12 +62,14 @@ class="opacity-0"
     <a
         href="https://www.kaashosting.nl/?lang=en"
         class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-        title="KaasHosting"
-        aria-label="Visit KaasHosting website, corporate sponsor"
+        title="Learn more about KaasHosting"
+        aria-label="Visit KaasHosting website"
+        rel="noopener"
     >
         <x-sponsors.logos.kaashosting
             class="block h-auto max-h-10 max-w-full fill-[#042340] dark:fill-white"
             alt="KaasHosting logo"
+            loading="lazy"
         />
         <span class="sr-only">KaasHosting</span>
     </a>
@@ -76,12 +82,14 @@ class="opacity-0"
     <a
         href="https://borah.digital/"
         class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 will-change-transform hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
-        title="Borah Digital Labs"
-        aria-label="Visit Borah Digital Labs website, corporate sponsor"
+        title="Learn more about Borah Digital Labs"
+        aria-label="Visit Borah Digital Labs website"
+        rel="noopener"
     >
         <x-sponsors.logos.borah
             class="block h-auto max-h-10 max-w-full fill-[#042340] dark:fill-white"
             alt="Borah Digital Labs logo"
+            loading="lazy"
         />
         <span class="sr-only">Borah Digital Labs</span>
     </a>

resources/views/components/sponsors/lists/home/featured-sponsors.blade.php

@@ -4,21 +4,22 @@ class="opacity-0"
 >
     <a
         href="https://beyondco.de/?utm_source=nativephp&utm_medium=logo&utm_campaign=nativephp"
-        title="BeyondCode sponsor"
-        aria-label="Visit BeyondCode, our featured sponsor"
+        title="Learn more about BeyondCode"
+        aria-label="Visit BeyondCode website"
         class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
+        rel="sponsored"
     >
         <img
             src="/img/sponsors/beyondcode.png"
             class="block h-auto max-h-10 max-w-full dark:hidden"
             loading="lazy"
-            alt="BeyondCode logo"
+            alt="BeyondCode logo - PHP development tools and packages"
         />
         <img
             src="/img/sponsors/beyondcode-dark.png"
             class="hidden h-auto max-h-10 max-w-full dark:block"
             loading="lazy"
-            alt="BeyondCode logo"
+            alt="BeyondCode logo - PHP development tools and packages"
         />
         <span class="sr-only">BeyondCode</span>
     </a>
@@ -30,9 +31,10 @@ class="opacity-0"
 >
     <a
         href="https://laradevs.com/?ref=nativephp"
-        title="Laradevs sponsor"
-        aria-label="Visit Laradevs, our featured sponsor"
+        title="Learn more about Laradevs"
+        aria-label="Visit Laradevs website"
         class="inline-grid h-32 w-60 shrink-0 place-items-center rounded-2xl bg-gray-100 p-5 transition duration-200 hover:scale-105 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-gray-900/40 dark:hover:bg-gray-900/60 dark:hover:ring-white/15"
+        rel="sponsored"
     >
         <x-sponsors.logos.laradevs
             class="block h-auto max-h-10 max-w-full text-black dark:text-white"