diff --git a/.storybook/styles/components/_table.scss b/.storybook/styles/components/_table.scss
index 3d9ea34c..d538b46a 100644
--- a/.storybook/styles/components/_table.scss
+++ b/.storybook/styles/components/_table.scss
@@ -64,28 +64,32 @@ th {
     opacity: 0.4;
   }
 
-  &:hover:after {
-    content: '▼';
-  }
-}
-
-.order-ascend {
-  &:after {
-    content: '▲';
-  }
-
-  &:hover:after {
-    content: '▼';
+  button {
+    width: 100%;
+    cursor: pointer;
+    &:hover:after {
+      content: '▼';
+    }
   }
-}
 
-.order-descend {
-  &:after {
-    content: '▼';
+  &.ascending {
+    button:after {
+      content: '▲';
+    }
+  
+    button:hover:after {
+      content: '▼';
+    }
   }
-
-  &:hover:after {
-    content: '▲';
+  
+  &.descending {
+    button:after {
+      content: '▼';
+    }
+  
+    button:hover:after {
+      content: '▲';
+    }
   }
 }
 
diff --git a/src/tables/components/table-header.js b/src/tables/components/table-header.js
index 3eb4acb0..f5c9bd15 100644
--- a/src/tables/components/table-header.js
+++ b/src/tables/components/table-header.js
@@ -18,20 +18,26 @@ function TableHeader({
   onClick,
 }) {
   const active = sortPath === name
-  const arrowClass = getArrowClass(active, ascending)
+  const sortOrder = getSortOrder(active, ascending)
+  const headerProps = {}
+
+  if (active) {
+    headerProps['aria-sort'] = sortOrder
+  }
+
   return (
     <th
-      onClick={onClick}
-      className={classnames(arrowClass, { sortable: !disabled })}
+      className={classnames(sortOrder, { sortable: !disabled })}
+      {...headerProps}
     >
-      {label || startCase(name)}
+      <button onClick={onClick}>{label || startCase(name)}</button>
     </th>
   )
 }
 
-function getArrowClass(active, ascending) {
-  if (!active) return ''
-  return ascending ? 'order-ascend' : 'order-descend'
+function getSortOrder(active, ascending) {
+  if (!active) return undefined
+  return ascending ? 'ascending' : 'descending'
 }
 
 TableHeader.propTypes = propTypes