Improve Lighthouse scores

Lighthouse scores in Accessibility and SEO went from 78, 83 to 98, 90. Added aria-label to scroll to top button in +layout.svelte. Title element added to app.html. Main.svelte td elements changed to th.
keith-flynn · Oct 18, 2023 · 82146a2 · 82146a2
1 parent e335290
commit 82146a2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/src/app.html b/src/app.html
@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<title>Keith Flynn | Developer Portfolio</title>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"
 		integrity="sha512-Kef5sc7gfTacR7TZKelcrRs15ipf7+t+n7Zh6mKNJbmW+/RRdCW9nwfLn4YX0s2nO6Kv5Y2ChqgIakaC6PW09A=="
 		crossorigin="anonymous" referrerpolicy="no-referrer"></script>

diff --git a/src/components/Main.svelte b/src/components/Main.svelte
@@ -100,28 +100,28 @@
         </thead>
         <tbody>
           <tr class="border-b border-solid border-slate-200">
-            <td class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Dedication</td>
+            <th class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Dedication</th>
             <td><i class="fa-solid fa-check text-slate-500"></i></td>
             <td><i class="fa-solid fa-xmark text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-green-500"></i></td>
           </tr>
           <tr class="border-b border-solid border-slate-200">
-            <td class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Critical Thought</td>
+            <th class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Critical Thought</th>
             <td><i class="fa-solid fa-check text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-slate-500"></i></td>
             <td><i class="fa-solid fa-xmark text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-green-500"></i></td>
           </tr>
           <tr class="border-b border-solid border-slate-200">
-            <td class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Interpersonal Skills</td>
+            <th class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Interpersonal Skills</th>
             <td><i class="fa-solid fa-xmark text-slate-500"></i></td>
             <td><i class="fa-solid fa-xmark text-slate-500"></i></td>
             <td><i class="fa-solid fa-xmark text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-green-500"></i></td>
           </tr>
           <tr class="border-b border-solid border-slate-200">
-            <td class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Programming Ability</td>
+            <th class="border-r border-solid border-white pl-4 pr-8 py-4 font-semibold text-sm whitespace-nowrap">Programming Ability</th>
             <td><i class="fa-solid fa-xmark text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-slate-500"></i></td>
             <td><i class="fa-solid fa-check text-slate-500"></i></td>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -18,7 +18,7 @@
       ? "opacity-full pointer-events-auto"
       : "pointer-events-none opacity-0"
     )}>
-    <button on:click={goTop} class="ml-auto rounded-full bg-slate-900 text-violet-400 px-3 sm:px-4 hover:bg-slate-800 cursor-pointer aspect-square grid place-items-center">
+    <button on:click={goTop} class="ml-auto rounded-full bg-slate-900 text-violet-400 px-3 sm:px-4 hover:bg-slate-800 cursor-pointer aspect-square grid place-items-center" aria-label="Scroll to top">
       <i class="fa-solid fa-arrow-up" />
     </button>
   </div>