-8

Good news everyone! You now have more badges than you really do!

Everyone go check out their flair JSON file. If you don't know where it is:

https://stackoverflow.com/users/flair/<YOUR USER ID>.json

Now, take the badgeHtml, load it up in a HTML file, and see what you get:

<span title="6 gold badges" aria-hidden="true"><span class="badge1">&#9679;</span><span class="badgecount">6</span></span><span class="v-visible-sr">6 gold badges</span><span title="25 silver badges" aria-hidden="true"><br>
<span class="badge2">&#9679;</span><span class="badgecount">25</span></span><span class="v-visible-sr">25 silver badges</span><span title="52 bronze badges" aria-hidden="true"><br>
<span class="badge3">&#9679;</span><span class="badgecount">52</span></span><span class="v-visible-sr">52 bronze badges</span>

I've added <br> tags for presentation and removed the escaped quotes.

Notice that my badges are repeated. This is because there's a badge count in its own little <span class="badgecount">6</span>, but also one in the text: <span class="v-visible-sr">6 gold badges</span>.

This is fairly confusing, especially in the extensions that just render the HTML and tell me I have many thousands of badges (thanks but no thanks).

Can we please fix this? We just need to remove the count from the v-visible-sr - keep the count separate from the text.

6
  • 2
    You don't need to look in the JSON file for that. It is just giving you the rendered HTML output for the badges - the same HTML that you can see anywhere your badges are displayed on the site. Changing it is changing the markup of badges for the entire site, not one spot.
    – animuson StaffMod
    Jul 1, 2019 at 3:38
  • 6
    So I opened up the Inspector and took a look. It appears that v-visible-sr is shorthand for "visible to screen readers" and is being used to present text to screen readers but not to "regular users" (or at least, that is what the CSS is doing to it, anyway). Then, the "regular" badge count (without the "gold badges" text) is marked aria-hidden, which has the opposite effect. I don't see anything wrong with that. You're supposed to see one or the other, not both. If you strip out the CSS, nobody ever said the result would make sense.
    – Kevin
    Jul 1, 2019 at 5:00
  • @Kevin things are very much supposed to make sense without CSS, CSS is a presentation layer to make things look nice, but they should be semantically reasonable even without it. SO actually adheres to this pretty well in other ways... pages are entirely understandable with all CSS disabled, except that they say that I have 156156 silver badges.
    – hobbs
    Jul 1, 2019 at 20:55
  • 3
    @hobbs: Plain HTML was designed for writing hypertext documents. "Documents" as in "Pieces of paper, but with hyperlinks." The vast majority of the modern web doesn't look like that any more. Instead, it is a platform for delivering UI. These days, many sites don't even work if you turn off Javascript, let alone CSS. You and I can argue until we're both blue in the face over whether that's the Right Way to design a website, but the reality is that's how people are designing websites in practice. From the WHATWG's perspective, that alone is reason enough to standardize it.
    – Kevin
    Jul 1, 2019 at 21:02
  • @Kevin SO and SE, unlike the vast majority of the modern web, are very much collections of documents. Like, 99.9% besides the edit box. I could print out SO, collate it, replace internal hyperlinks with page number references, make an index using the tags, bind it into a book, and it would serve its purpose pretty much just as well. It's successful because it's not an "application" delivered through the crummy HTML/CSS/JS medium, it's content.
    – hobbs
    Jul 1, 2019 at 21:13
  • 2
    @hobbs: This question is about badge counts, which are certainly UI and not "regular" hypertext.
    – Kevin
    Jul 1, 2019 at 21:45

1 Answer 1

18

We just need to remove the count from the v-visible-sr - keep the count separate from the text.

No, we most certainly cannot do that. That would violate the HTML standard, which states:

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

(Boldface in original)

Currently, the badgecount spans are nested inside an aria-hidden span, so those same numbers must be exposed again in a way that screen readers can read. That's what the v-visible-sr span does. It's not supposed to be visible to sighted users because the site CSS hides it in favor of the "bullets and numbers" rendering. Un-minifying the relevant stanza:

.v-visible-sr {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

This makes it a 1x1 pixel box, which screen readers will handle fine, but most users will be unable to see. It also applies a number of other transformations whose collective effect is to make it render as zero pixels, but in a way that tricks the less-smart screen readers into thinking it's still 1x1 so that they read it. The smarter screen readers know about this sort of chicanery and deliberately go along with it.

(Incidentally, this CSS appears to be borrowed from WordPress, but for all I know they arrived at it independently.)

So, if you want to "fix" this, you would have to move the aria-hidden attribute to the span containing the bullet (badge1, badge2, badge3) instead of the outer span, and then remove the number from the other span. However, given that this text is only meant to be viewed by screen readers, and given that the badgecount numbers are explicitly hidden from screen readers, I'm unconvinced that this is actually a bug. The site gives you HTML and CSS. Nobody ever promised you could use the one without the other.

9
  • I'm kinda confused here because I can't see that CSS included in the JSON I get from my profile flair URL thingy. Is that URL part of an internal API and not intended for external use or are people supposed to get a hold of the CSS elsewhere? I totally agree with everything else you said but I just don't understand where the CSS is supposed to be coming from.
    – ivarni
    Jul 1, 2019 at 5:33
  • @ivarni: It's in stackoverflow.com/content/Shared/stacks.css, after you insert whitespace and generally pretty it up a bit.
    – Kevin
    Jul 1, 2019 at 5:35
  • 1
    Right. One could perhaps argue that if the HTML from that JSON was meant to be embedded off-site there should be a more... minimal CSS option available. I'll stick to the image flairs I think :)
    – ivarni
    Jul 1, 2019 at 5:37
  • 1
    @ivarni these kinds of CSS classes are pretty standard and can be found in most CSS frameworks. Bootstrap certainly has these (albeit with a different name). You can also find them in github.com/StackExchange/Stacks
    – Martijn Pieters Mod
    Jul 1, 2019 at 8:49
  • @Kevin: it’s easier to look at the less source: github.com/StackExchange/Stacks/blob/…. This also links to a blog post explaining the CSS choices made: make.wordpress.org/accessibility/2015/02/09/…
    – Martijn Pieters Mod
    Jul 1, 2019 at 8:56
  • I'm just saying noone in their right mind is gonna pull all that CSS into an existing page, complete with element level reset styles just to get to 5 classes, even though one of them might exist in Bootstrap. Just enforces my belief that that JSON URL should be shunned and plugin/widget authors should not rely on it. And that this bug-report should be tagged status by-design.
    – ivarni
    Jul 1, 2019 at 8:57
  • 4
    @ivarni: everyone in their right mind is making their site accessible to all visitors, including those using assistive technology. That’s what this HTML is aimed at.
    – Martijn Pieters Mod
    Jul 1, 2019 at 8:59
  • @MartijnPieters I'm not arguing against making sites accessible. I'm arguing against a rather meaningless API that only exposes half of what is needed to correctly render its contents. It should be internal.
    – ivarni
    Jul 1, 2019 at 9:00
  • 3
    @ivarni: if you want the simple way out, just use your own CSS that sets the class to display: hidden;.
    – Martijn Pieters Mod
    Jul 1, 2019 at 9:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .