A11Y: Add heading role for post titles. (#13143)

A11Y: Add heading role for post titles. (#13143)

Not all screen readers treat articles as navigable roles when moving between landmarks. To help with this, we use a heading role on the title, with an arbitrary depth of 2 chosen as to not conflict with the main <h1/>. Because ARIA roles are used, this change should be entirely non-visual.

While this introduces minor navigation challenges in posts where headers are included, the vast majority of posts don’t, and as screen reader users, we’re used to mixed headers in longer-form content.

diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index f1afc5f..c2e2bfd 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -247,6 +247,13 @@ function showReplyTab(attrs, siteSettings) {
 createWidget("post-meta-data", {
   tagName: "div.topic-meta-data",
+  buildAttributes() {
+    return {
+      role: "heading",
+      "aria-level": "2",
+    };
+  },
   settings: {
     displayPosterName: true,

GitHub sha: 549e100d

This commit appears in #13143 which was approved by CvX. It was merged by CvX.

I see, thanks!


  • You can use 2 and @ to navigate back and forward on posts, 99% of the time.


  • NVDA is going to start saying “post number 2 region sam link april 12 link heading level 2”, the constant repeating of “heading level 2” is somewhat annoying.

On a balance this is better I guess? Cause D navigation means you have to click twice.

Also I wonder if we can somehow make it so down arrow skips the date. Would be cool just to do 2 + down arrow to read content of a post.