diff --git a/app/assets/javascripts/discourse/app/components/directory-item.hbs b/app/assets/javascripts/discourse/app/components/directory-item.hbs
index e05a5367c79..406c25d7bc3 100644
--- a/app/assets/javascripts/discourse/app/components/directory-item.hbs
+++ b/app/assets/javascripts/discourse/app/components/directory-item.hbs
@@ -1,17 +1,17 @@
-<div class="directory-table__cell">
+<div class="directory-table__cell" role="rowheader">
   <UserInfo @user={{this.item.user}} />
 </div>
 
 {{#each this.columns as |column|}}
   {{#if (directory-column-is-user-field column=column)}}
-    <div class="directory-table__cell--user-field">
+    <div class="directory-table__cell--user-field" role="cell">
       <span class="directory-table__label">
         <span>{{column.name}}</span>
       </span>
       {{directory-item-user-field-value item=this.item column=column}}
     </div>
   {{else}}
-    <div class="directory-table__cell">
+    <div class="directory-table__cell" role="cell">
       <span class="directory-table__label">
         <span>
           {{#if column.icon}}
@@ -27,7 +27,7 @@
 {{/each}}
 
 {{#if this.showTimeRead}}
-  <div class="directory-table__cell time-read">
+  <div class="directory-table__cell time-read" role="cell">
     <span class="directory-table__label">
       <span>{{i18n "directory.time_read"}}</span>
     </span>
diff --git a/app/assets/javascripts/discourse/app/components/directory-item.js b/app/assets/javascripts/discourse/app/components/directory-item.js
index 034bf77edaa..a5dfaaa971a 100644
--- a/app/assets/javascripts/discourse/app/components/directory-item.js
+++ b/app/assets/javascripts/discourse/app/components/directory-item.js
@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import {
+  attributeBindings,
   classNameBindings,
   classNames,
   tagName,
@@ -9,7 +10,10 @@ import { propertyEqual } from "discourse/lib/computed";
 @tagName("div")
 @classNames("directory-table__row")
 @classNameBindings("me")
+@attributeBindings("role")
 export default class DirectoryItem extends Component {
+  role = "row";
+
   @propertyEqual("item.user.id", "currentUser.id") me;
   columns = null;
 }
diff --git a/app/assets/javascripts/discourse/app/components/user-info.hbs b/app/assets/javascripts/discourse/app/components/user-info.hbs
index 7f2feeb0a77..91d1db165a8 100644
--- a/app/assets/javascripts/discourse/app/components/user-info.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-info.hbs
@@ -13,7 +13,11 @@
 <div class="user-detail">
   <div class="name-line">
     {{#if this.includeLink}}
-      <a href={{this.userPath}} data-user-card={{@user.username}}>
+      <a
+        href={{this.userPath}}
+        data-user-card={{@user.username}}
+        role="heading"
+      >
         <span class={{if this.nameFirst "name" "username"}}>
           {{if this.nameFirst @user.name (format-username @user.username)}}
         </span>
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index 85f7b052ad6..ffecfd8bb00 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -123,7 +123,9 @@
   &__header,
   &__body,
   &__row {
-    display: contents; // we'll be able to remove this with subgrid support
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
   }
 
   &__column-header,