Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@aschrijver
Last active February 7, 2021 17:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aschrijver/bb7e904aa0b3218fa03127c516273a6f to your computer and use it in GitHub Desktop.
Save aschrijver/bb7e904aa0b3218fa03127c516273a6f to your computer and use it in GitHub Desktop.
Accessibility: Discourse with a screen reader

This Github Gist, created 5 Februari 2021, is a Markdown copy from the Discourse Meta support forum of the thread titled "Discourse with a Screen reader".

It was created by fedizen 'Humanetech' from mastodon.social in a discussion that raised the question: "How are you making Social Hub accessible to screen readers and other Disabled people?". Social Hub runs the Discourse forum software. The Fediverse discussion subthread is at: https://mastodon.social/@weirdwriter/105675901238499066

A link to this Gist will be copied to the forum thread.

Forum topic

First post by Nolan

Hey folks,

Not sure if this is known or tracked anywhere. If so, I’d welcome links. But, while it is improving, the experience of using Discourse with a screen reader has a few challenges that I wanted to document.

I’m a screen reader user, and wanted to set up a self-hosted instance mostly targeted at blind users. I normally don’t recommend Discourse because of accessibility issues, but you’re making self-hosting with the features I want very easy, so it makes me sad that accessibility isn’t quite there. Here are some of the challenges I’m facing:

  • The dropdowns that report to my screen reader as HTML <select/> s are almost entirely broken. They do expand via normal keyboard conventions, but that’s about where the accessibility ends. The challenges began when I had to select a language during setup. I’m not immediately sure if English: US was defaulted, but when I went to investigate, I’d managed to set the language to Spanish and had a hard time getting it back. I eventually found the list with my screen reader and managed to correct it. But just about every dropdown is broken. I don’t want to say “every” in case there’s one on some far-flung corner of the interface that works, but every one I’ve tried doesn’t work at all. 😦
  • I can’t find a way to the admin interface without navigating directly. The setup screens told me it was under the gear icon, but I can’t find a textual representation of what the gear icon might be, nor do any of the keyboard-accessible controls I’ve found seem to ultimately link to an admin interface. For now I’m just hitting /admin, but this makes me wonder what tools I may not be discovering because I can’t find this gear.
  • Related to the settings dropdown, I can’t use the dropdowns/selects at the top of category lists to navigate to the lists of categories. I know about the Categories link, which is what I generally use. But it’d be nice if those selectors worked.
  • Whenever I don’t sign up for a Discourse, I’m told that I should in part because the forum remembers where I stopped reading. This has never worked for me with a screen reader. How is it supposed to work? Should clicking the link move focus to whichever post I read last?
  • And not related to my site, but the modal signup experience here had some challenges. I tried signing up by email, but your instance rejected my .info email address which I’ve used for nearly 17 years and which worked fine on my own. I then signed up via Google, but the modal I was given on return posed some challenges:
    • It didn’t grab keyboard focus, so I had to hunt it down and interact with it myself.
    • While I was trying to do that, the infinitely scrolling topic list was adding new topics in and making it more difficult for focus to actually reach the dialog. I don’t remember how exactly I managed to move quicker than the topics appeared–haven’t had my coffee yet–but I’m here. :slight_smile:

So, a few questions:

  • I really want to stick with Discourse if I can. How much of this stuff can I change on my own site? In particular:
    • Can I get rid of the category list selectors, so users have to interact with the category list link for now?
    • Can I get rid of the category selector on new topic pages, so users have to first enter the category they want to post in, and can’t accidentally make uncategorized posts or otherwise get confused?
    • Can I do both in a way that makes upgrading easy? I’d rather not edit stock templates and fork the project if I don’t have to, nor do I necessarily want an entirely new theme.
  • Is this work being tracked anywhere, and is anyone dedicated to taking it on? Discourse forums are eating the internet. Everywhere I turn, the projects or communities I spend time in are adopting them. Hell, as a blind user, I want to run Discourse because, again, you make this so easy. I just don’t want accessibility of such a crucial tool to either be an afterthought, or to perpetually play catchup with new development.

Thanks for reading.

Reply by Discourse team member Penar Musaraj (username: pmusarajteam)

That’s a thoughtful post Nolan. I’m sure other teams members will weigh in on your questions, but can you share your set up so that a developer can try to reproduce the issues you are running into? I.e. which OS, which screen reader, and so on.

Reply by Nolan

Windows 10, NVDA screen reader. Though, to put it delicately, it’s broken enough that it likely won’t work well anywhere, so just about any combination of OS/screen reader will likely hit this.

Reply by team member Kris (username: awesomerobot)

Thanks for the feedback! We know we’re not there yet with accessibility and have been working on it more lately. At the end of 2020 we had a third-party accessibility audit done for the most important non-admin pages of Discourse and have started working through the high-priority issues over the past couple of weeks.

Now that you mention it, I can understand why finding the admin menu would be difficult. The link for the menu sits within one of the primary header menus… the aria-label is “go to another topic list or category”… which definitely doesn’t make it clear there are a couple admin links within.

Regarding the message that says Discourse remembers where you left off… the expected behavior is that when you enter the topic, you skip to where you left off reading. I just tried to navigate this with the keyboard and can confirm that it’s not putting focus in the correct place.

Many of our dropdowns are a custom implementation, and that’s one of the areas that have been pointed out to us for accessibility improvement. We’re also aware of the fact that our modals don’t trap focus, which leads to difficult-to-reach content, particularly on pages with infinite scrolling as you experienced.

Regarding your questions about sticking with Discourse… everything you listed is possible; it would amount to a few lines of CSS to hide those elements. That CSS would have to be in a theme, but it could exist within a theme component, which can be added on to any existing theme (so you wouldn’t have to change your primary theme). Themes are much better for the upgrade process, as they exist on top of Discourse… editing templates or forking as you mentioned makes updating very difficult.

We tag reports of accessibility issues here on Meta with an #accessibility tag so they’re easier to find in one place… but that said, the third-party accessibility report and subsequent work I mentioned earlier aren’t being tracked publicly.

Really appreciate the feedback here, especially considering that it took additional effort to post it. I hope over the course of the next few months Discourse becomes much easier for you to use.

Reply by Nolan

Also, if this hasn’t been raised, I’d like to flag it as a way for some quick accessibility wins:

Screen readers make good use of many of HTML 5’s semantic tags. Not only can I navigate between them efficiently, but they’ll also speak the type of content I’m currently in.

It’d be nice if posts in an <article/> with the header and footer in <header/> and <footer/> elements, respectively. If swapping out elements won’t work, using role attributes appropriately conveys the same meaning.

Right now it’s challenging to read long threads. After the first post, I have to scroll past the section with recommended topics and such. Then I’m reading subsequent posts linearly, with no way to skip past the same headers I’ve heard a million times with nothing different other than the date, or the footer with the same message controls. There are certainly advanced ARIA tweaks that’d make things even better, but swapping out the tags or using roles would be a low-effort fix with lots of benefit IMO.

Thanks!

@rkingett
Copy link

rkingett commented Feb 7, 2021

Swapping out the tags would be the best, indeed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment