diff --git a/website/static/style.css b/website/static/style.css
index 81352e41..84187702 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -624,16 +624,25 @@ kbd {
   text-underline-offset: 0.2em;
 }
 
-th[data-sort] {
+.sort-btn {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font: inherit;
   cursor: pointer;
   user-select: none;
-  transition: color 180ms ease;
 }
 
-th[data-sort]:hover {
+.sort-btn:hover {
   color: var(--accent-deep);
 }
 
+.sort-btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 th[data-sort]::after {
   content: " \2193";
   opacity: 0;
diff --git a/website/templates/index.html b/website/templates/index.html
index 9fd8db40..9f8b1e24 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -114,9 +114,9 @@
       <thead>
         <tr>
           <th class="col-num"><span class="sr-only">#</span></th>
-          <th class="col-name" data-sort="name">Project Name</th>
-          <th class="col-stars" data-sort="stars">GitHub Stars</th>
-          <th class="col-commit" data-sort="commit-time">Last Commit</th>
+          <th class="col-name" data-sort="name"><button type="button" class="sort-btn">Project Name</button></th>
+          <th class="col-stars" data-sort="stars"><button type="button" class="sort-btn">GitHub Stars</button></th>
+          <th class="col-commit" data-sort="commit-time"><button type="button" class="sort-btn">Last Commit</button></th>
           <th class="col-cat">Tags</th>
           <th class="col-arrow">
             <button class="back-to-top" aria-label="Back to top">