58

At the bottom of the Privileges > Vote Up page on the Help Center, there is a list of badges one can get through voting:

Voting

They look blurry because they are images in the HTML, e.g. the Supporter badge uses this image

Supporter.

with the following HTML:

<p><img src="https://i.sstatic.net/km2qC.png" alt="Supporter"><br>First upvote.</p>

On the Help Center > Badges page on the Help Center however, the badges are beautfully rendered with HTML and CSS:

<a href="/help/badges/6/supporter" title="bronze badge: First up vote" class="badge"><span class="badge3"></span>&nbsp;Supporter</a>

Most of the time this wouldn't be noticable, but it is a pain for those who might have their browser in large fonts, or visit the site through a mobile browser and regularly have to zoom in to see parts of the page.

At the maximum zoom level in Firefox (300%), this is how the two compare:

enter image description here enter image description here

I don't think I need to say which is the horrible image and which is lovely HTML and CSS.

This is compounded by the fact that the font used and the style for the Span in the image isn't the same as the font in the HTML - presumably this was changed at some point but the images weren't updated:

ImageSupporter image vs. Supporter from HTML and CSSHTML and CSS


This inconsistency has been around at least as far back as the first mirrors of the pages on web.archive.org from 2013: the Badges page, on 2013-06-20 used HTML and CSS; the Privileges > Vote Up page, on 2013-07-01 used images.


The Vote Up page should be amended to address this issue.

8
  • 4
    TIL StackOverflow is not 508 compliant Commented Mar 2, 2016 at 17:36
  • 1
    @SterlingArcher - I deliberately didn't mention compliance to various standards, etc. because I (possibly naïvely) thought having alt-text for the image would be enough. Is that not the case?
    – Wai Ha Lee
    Commented Mar 2, 2016 at 17:39
  • I believe that alt text is acceptable under 508 compliance Commented Mar 3, 2016 at 4:43
  • 1
    We could maybe update the images to be better quality, but that's all we're able to do. Those articles are just posts stored in the database and get rendered with the same engine that renders any other post on the site. It's not possible to include actual badge HTML on that page.
    – animuson StaffMod
    Commented Mar 4, 2016 at 2:56
  • Could the images be changed to use SVG instead?
    – Aaroninus
    Commented Mar 4, 2016 at 15:45
  • @Aaroninus - that was my thought too, but when I tried to add an SVG file through ingur, it said: "Failed to upload; not a valid image (jpeg, png, tiff, gif or bmp)". When I tried a .svg which existed already, it just failed to show it.
    – Wai Ha Lee
    Commented Mar 4, 2016 at 16:14
  • @animuson - I had hoped it would be possible since it was done in the Badges page, but I fully accept that if you're telling me it can't be done, it can't be done.
    – Wai Ha Lee
    Commented Mar 4, 2016 at 16:36
  • Nearly four years later I've become aware that SVG can be embedded in posts - just not using the image uploader.
    – Wai Ha Lee
    Commented Jan 24, 2020 at 18:19

1 Answer 1

3

This is no longer an issue because the badges are referred to by text only now:

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