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">●</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">●</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">●</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.
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 markedaria-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.