There's an accessibility issue with one of Stack Exchange's core features: users who are reliant on a screen reader have no real capacity to learn about and understand badges and reputation, including their own or anyone else's.

For those unaware of how screen readers work, a crash course: Imagine, if you will, you are blind. You cannot read a webpage. Instead, you have a program on your PC that uses a computerised voice to narrate to you text that's in the active window. When it's a browser window, that's the plain text content of the page. The page is considered a linear document read top-to-bottom, left-to-right. There's limited additional information added: certain HTML elements might have annotations (like telling the user it's a list or an image) and images might have a plain-text equivalent (like how the META logo above has a plain-text equivalent of "Meta Stack Exchange", which was manually added by one of Stack Overflow's developers).

Safe to say being reliant on a screen reader makes things harder to discover when something isn't given a plain-text equivalent or isn't annotated correctly or at all.

Our core reward mechanisms, badges and reputation, are two such things that are unfortunately left undiscoverable. (Along with a bunch of other things, but this report's limited to these.)

Site top bar

the profile widget in the top bar

If you're moving through the site header in a screen reader, here's how this part gets read out:

Seventeen thousand eight hundred and ninety. List with three items. Five. Forty-three. One hundred and ninteen. Link.

My username isn't mentioned. The words reputation and badges aren't mentioned. I have no idea what these numbers are or what they mean. I have no idea they're describing anything about me, because there's nothing indicating that's information about my profile, or even actually that the link goes to my profile.

Annotations on question pages

Imagine you're reading a question using a screen reader and you hear the following:

Edited two hours ago. Link. Link Helmar. One six million seven hundred and seventy-two eight hundred and twenty. Asked three hours ago. Link. Link Adelin. One hundred and sixty-five thousand one hundred and eleven.

That's this thing.

user info for who edited or authored a post

The way the HTML elements are arranged, there's no actual separation in the text between the numbers. The browser just sees and reports the text 1,6772820 and 165111, which the screen reader interprets as three separate numbers.

(The two occurrences of "link" with no description following are the avatars.)

On my profile page

Let's say I actually manage to arrive at my profile page — I reach this part. This says reputation, which is good.

my profile avatar island and rep/badge counts`

But it gets read out like this:

Seventeen thousand eight-hundred and ninety reputation. Five hundred and forty-three thousand one hundred and nineteen.

Users reliant on screen readers basically cannot meaningfully understand and engage in our reward mechanisms.

Reputation and badges are kind of important for motivating people, right? And they tell us a bit about the user's activity on sites.

Screen reader users can't learn about their own reputation and badges, unless someone listening to their screen reader and with vision tells them where to look and how to interpret it. And they can't understand the reputation and badges of any other users, who simply appear to have random numbers always coming after their names representing who-knows-what.

Could that be improved & worked on?

(All transcriptions were from NVDA 2018.1 running on Windows 10 with Firefox latest. The results will be different/worse in Chrome, which has very limited accessibility support, and will be different but not much better in other screen readers. The information needed simply isn't there on the page to be described to the users.)

  • 4
    For additional consideration of screen reader tech, see my related recent post on MathSE Commented May 25, 2018 at 22:55
  • 7
    An even better reason to fix this. I remember complaining about this years ago when the skype plugin kept converting the reputation and badges into a phone number for a bunch of users because semantically, it's all one number.
    – animuson StaffMod
    Commented May 26, 2018 at 3:45
  • I recall another usability case where a userscript was used to add extra info in the DOM. Would that work here for the next 6 to 8 weeks this takes to implement. If yes, what is needed exactly/what will help the most?
    – rene
    Commented May 26, 2018 at 5:50
  • 3
    @rene Yes and no. This is fundamentally about entry-level users learning about the site; userscripts are advanced features people learn about & install much much later. A userscript could resolve some of these issues for whoever discovers & installs one; they'd probably only find out via word of mouth. However, that's sort of like one person having a stair-climbing wheelchair: the rest of people with regular wheelchairs still can't get into the building, and the building really should install a ramp or chair lift. People who can't get in won't stick around figuring out how, they'll leave. Commented May 26, 2018 at 9:56


You must log in to answer this question.

Browse other questions tagged .