6 ms·

I may be rather opinionated on this, but there are literally community efforts to transcribe memes and other pictures containing text so visually impaired peopl

I may be rather opinionated on this, but there are literally community efforts to transcribe memes and other pictures containing text so visually impaired people get access to content, and meanwhile about every 3-4 weeks HN features yet another web app that basically takes human readable text and stores it in one of the most inefficient and inaccessible ways possible. It becomes invisible to screenreaders, impossible to copy-paste like you'd otherwise expect from text based content. I don't want to come across as all too negative, but it somehow feels really strange to have so many websites that basically just take a fancy screenshot of text. To me it kind of comes across like a developer version of those Instagram pictures of meals at restaurants.

strangetortoise 6y ago
I think one of the problems here is that people wanna share code snippets on social media, where generally, the other approaches mean linking to an external github gist or similar, which isn't as visible. I'm not sure if I see a good solution, other than suggesting that the "link previews" for social media sites display the code snippet inline, if it's a link to a pastebin/github gists page. Edit: Perhaps something can be done by somehow embedding the content into the image (EXIF?) Metadata?
- abc_lisper 6y ago
  Is there way to keep it as text, but make it uneditable? Ohh.. wait!
- roywiggins 6y ago
  Twitter actually supports picture descriptions. I think it embeds it in the alt-text on the page. https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio...
- follower 6y ago
  Yeah, I was just about to suggest embedding the code in a PNG text chunk: http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.3 http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... Twitter etc should really already have standardised on a way to store the ALT text in an image so it only ever needs to entered once. Even GIF has support for text in a couple of different forms. ( Although I learned something new about PNG's support for GIF's text support here: http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.14 http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... ) ( I've spent far too long reading the GIF spec in relation to my project that adds audio to GIFs: http://audiogif.rancidbacon.com http://audiogif.rancidbacon.com :) )
jaegerpicker 6y ago
Some people love the text from an aesthetic view. I don't think we should be against that but rather to advocate the improvement of accessible technology.
- neilpanchal 6y ago
  Engineering documentation shouldn't be about making pretty pictures, it should be about functionalism and putting that at the top of the list just below accessibility. What do you know, people love fancy and decorative things. Just human nature.
  - jaegerpicker 6y ago
    I'm not sure this is about Engineering documentation. I mean is that the purpose of the site? I agree Documentation should put function first but this is more about Aesthetics then documentation. A form of art if you will.
  - SirHound 6y ago
    Doesn’t get you shares on Twitter though so shoulds aren’t relevant.
  - qbasic_forever 6y ago
    When engineering and art combine though, you get beautiful things like 1970s NASA documentation: https://standardsmanual.com/products/nasa-graphics-standards-manual https://standardsmanual.com/products/nasa-graphics-standards...
    - anonymous_car 6y ago
      One is documentation for creating graphics, something the blind are naturally excluded from. The other is documentation for code, something that visually impaired people are able to do if the documentation is accessible.
- wongarsu 6y ago
  We have great accessible technology for colored text with background images.
jeffalyanak 6y ago
What would be great is if it generated an SVG with the screen-reader accessible title and description built in. <svg role="img" aria-label="[title + description]"> <title>[title]</title> <desc>[long description]</desc> ... </svg >
- qbasic_forever 6y ago
  Why do you even need SVG if you're on the web already though? Nothing in these code pictures requires more than basic CSS and HTML. You can go wild with fonts, gradients, shadows, etc. to make beautiful looking pre and code elements. Tools like prismjs will syntax highlight with spans. Everything is in plain old semantic HTML with aria properties where appropriate.
  - saagarjha 6y ago
    You need it for places that will only take images.
riedel 6y ago
Good point. Totally agree. SVG would be nice way out but it is also hard to make accessible in comparison to pure html. Another example are badges. Even shields.io SVG badges are hard to make screen reader compatible (personally gave up on this some time ago). In the end inclusive design will make the web better for everyone beyond the short wow effects.
Lorkki 6y ago
> a developer version of those Instagram pictures of meals at restaurants I guess those pictures are popular because food is easy to relate to, and people build lots of social interactions around eating. Developers also relate to things about code, and like to share those relations among each other. I feel some puzzlement about the format too, though. These days it's so easy to make text on the web look nice, and it's easily accessible, copyable and searchable.
- littlestymaar 6y ago
  But you can't share it on Twitter (which is almost 100% of the use-case for this kind of tools). Too bad Twitter isn't a tech company, otherwise they could implement something like a code view in tweets. Wait a minute…
f-word 6y ago
It's not like the alt attribute stopped existing or anything. This simply lets you make what amounts to pretty screencaps of your code
- alpaca128 6y ago
  Name one social media/image hosting site that lets you set an alt attribute. And when you actually have control over the content you can use some nice CSS to get the same look with a fraction of the size and 100% accessible.
  - roywiggins 6y ago
    Twitter does. https://blog.twitter.com/official/en_us/a/2016/accessible-images-for-everyone.html https://blog.twitter.com/official/en_us/a/2016/accessible-im...
  - tomlagier 6y ago
    Twitter: https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio... Facebook: https://www.facebook.com/help/214124458607871 https://www.facebook.com/help/214124458607871 Instagram: https://help.instagram.com/503708446705527 https://help.instagram.com/503708446705527 It's becoming a lot more common!
jeswin 6y ago
If you're seeing many people building the same thing, it's probably because there's a need that you might have overlooked. Here's one: people want to share formatted snippets on Twitter. They often post a link to the code below the pic, but being able to see it within the tweet is quite useful.
xwdv 6y ago
Just throw it in the alt text
com2kid 6y ago
I use fancy code display tools when making slide shows. Though in my case I have a plugin for Notepad++ that lets me copy syntax highlighted code from NP++ and paste it into PowerPoint with all the highlighting and formatting maintained. Super cool plugin. I can't just screenshot my editor (VSCode) because I use a theme that many people find violently irritating (DOS Edit). Anyway, this looks like someone's fun little hacked together project to make something shiny. Making shiny things is fun. No one craps on shader toys for being inaccessible. If someone tried to use the linked tool to make screenshots and used them in an actual MOOC or any other place for public consumption, yeah, wrong tool for the job. Don't do that. Use one of the dozens of existing tools that pretty print and embed code in an accessible way.
- Dangeranger 6y ago
  The parent’s point is regarding accessibility of code examples, and your comment seems to be about the convenience of pasting an image of code into a tool that should make accessible text easy, but falls short when it comes to code. If this tool created an accessible SVG instead of a PNG then I think it would be getting a lot less criticism. There are accepted ways[0] to make SVGs accessible, and they are better for performance than the alternatives. When you give people shiny tools that make it hard for visually impaired people to consume information, then more of that sort of content will be embedded in blogs, presentations, MOOCs or whatever else. PowerPoint and Google Slides should really just get their act together with regards to rendering code blocks. It’s quite sad that in today’s world they still don’t have a built in way to show code on slides in a formatted and colorized way. [0] https://www.w3.org/TR/SVG-access/ https://www.w3.org/TR/SVG-access/
  - saagarjha 6y ago
    Sadly, many places will only accept images in PNG (or heaven forbid, JPEG) format :( SVG export would be cool, though.
- akdor1154 6y ago
  I just googled your VSCode theme and can provide another anecdote of violent irritation.
herbst 6y ago
Its unbelieveable for me how so many modern 'coders' 'post' their code samples in a non copy paste friendly way. Sure let me watch your boring 25 minutes video just to MAYBE get a glance on that one line of code i am looking for...

strangetortoise 6y ago

I think one of the problems here is that people wanna share code snippets on social media, where generally, the other approaches mean linking to an external github gist or similar, which isn't as visible. I'm not sure if I see a good solution, other than suggesting that the "link previews" for social media sites display the code snippet inline, if it's a link to a pastebin/github gists page. Edit: Perhaps something can be done by somehow embedding the content into the image (EXIF?) Metadata?

abc_lisper 6y ago
Is there way to keep it as text, but make it uneditable? Ohh.. wait!
roywiggins 6y ago
Twitter actually supports picture descriptions. I think it embeds it in the alt-text on the page. https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio...
follower 6y ago
Yeah, I was just about to suggest embedding the code in a PNG text chunk: http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.3 http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... Twitter etc should really already have standardised on a way to store the ALT text in an image so it only ever needs to entered once. Even GIF has support for text in a couple of different forms. ( Although I learned something new about PNG's support for GIF's text support here: http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.14 http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.d... ) ( I've spent far too long reading the GIF spec in relation to my project that adds audio to GIFs: http://audiogif.rancidbacon.com http://audiogif.rancidbacon.com :) )

jaegerpicker 6y ago

Some people love the text from an aesthetic view. I don't think we should be against that but rather to advocate the improvement of accessible technology.

neilpanchal 6y ago
Engineering documentation shouldn't be about making pretty pictures, it should be about functionalism and putting that at the top of the list just below accessibility. What do you know, people love fancy and decorative things. Just human nature.
- jaegerpicker 6y ago
  I'm not sure this is about Engineering documentation. I mean is that the purpose of the site? I agree Documentation should put function first but this is more about Aesthetics then documentation. A form of art if you will.
- SirHound 6y ago
  Doesn’t get you shares on Twitter though so shoulds aren’t relevant.
- qbasic_forever 6y ago
  When engineering and art combine though, you get beautiful things like 1970s NASA documentation: https://standardsmanual.com/products/nasa-graphics-standards-manual https://standardsmanual.com/products/nasa-graphics-standards...
  - anonymous_car 6y ago
    One is documentation for creating graphics, something the blind are naturally excluded from. The other is documentation for code, something that visually impaired people are able to do if the documentation is accessible.
wongarsu 6y ago
We have great accessible technology for colored text with background images.

jeffalyanak 6y ago

What would be great is if it generated an SVG with the screen-reader accessible title and description built in. <svg role="img" aria-label="[title + description]"> <title>[title]</title> <desc>[long description]</desc> ... </svg >

qbasic_forever 6y ago
Why do you even need SVG if you're on the web already though? Nothing in these code pictures requires more than basic CSS and HTML. You can go wild with fonts, gradients, shadows, etc. to make beautiful looking pre and code elements. Tools like prismjs will syntax highlight with spans. Everything is in plain old semantic HTML with aria properties where appropriate.
- saagarjha 6y ago
  You need it for places that will only take images.

riedel 6y ago

Good point. Totally agree. SVG would be nice way out but it is also hard to make accessible in comparison to pure html. Another example are badges. Even shields.io SVG badges are hard to make screen reader compatible (personally gave up on this some time ago). In the end inclusive design will make the web better for everyone beyond the short wow effects.

Lorkki 6y ago

> a developer version of those Instagram pictures of meals at restaurants I guess those pictures are popular because food is easy to relate to, and people build lots of social interactions around eating. Developers also relate to things about code, and like to share those relations among each other. I feel some puzzlement about the format too, though. These days it's so easy to make text on the web look nice, and it's easily accessible, copyable and searchable.

littlestymaar 6y ago
But you can't share it on Twitter (which is almost 100% of the use-case for this kind of tools). Too bad Twitter isn't a tech company, otherwise they could implement something like a code view in tweets. Wait a minute…

f-word 6y ago

It's not like the alt attribute stopped existing or anything. This simply lets you make what amounts to pretty screencaps of your code

alpaca128 6y ago
Name one social media/image hosting site that lets you set an alt attribute. And when you actually have control over the content you can use some nice CSS to get the same look with a fraction of the size and 100% accessible.
- roywiggins 6y ago
  Twitter does. https://blog.twitter.com/official/en_us/a/2016/accessible-images-for-everyone.html https://blog.twitter.com/official/en_us/a/2016/accessible-im...
- tomlagier 6y ago
  Twitter: https://help.twitter.com/en/using-twitter/picture-descriptions https://help.twitter.com/en/using-twitter/picture-descriptio... Facebook: https://www.facebook.com/help/214124458607871 https://www.facebook.com/help/214124458607871 Instagram: https://help.instagram.com/503708446705527 https://help.instagram.com/503708446705527 It's becoming a lot more common!

jeswin 6y ago

If you're seeing many people building the same thing, it's probably because there's a need that you might have overlooked. Here's one: people want to share formatted snippets on Twitter. They often post a link to the code below the pic, but being able to see it within the tweet is quite useful.

xwdv 6y ago

Just throw it in the alt text

com2kid 6y ago

I use fancy code display tools when making slide shows. Though in my case I have a plugin for Notepad++ that lets me copy syntax highlighted code from NP++ and paste it into PowerPoint with all the highlighting and formatting maintained. Super cool plugin. I can't just screenshot my editor (VSCode) because I use a theme that many people find violently irritating (DOS Edit). Anyway, this looks like someone's fun little hacked together project to make something shiny. Making shiny things is fun. No one craps on shader toys for being inaccessible. If someone tried to use the linked tool to make screenshots and used them in an actual MOOC or any other place for public consumption, yeah, wrong tool for the job. Don't do that. Use one of the dozens of existing tools that pretty print and embed code in an accessible way.

Dangeranger 6y ago
The parent’s point is regarding accessibility of code examples, and your comment seems to be about the convenience of pasting an image of code into a tool that should make accessible text easy, but falls short when it comes to code. If this tool created an accessible SVG instead of a PNG then I think it would be getting a lot less criticism. There are accepted ways[0] to make SVGs accessible, and they are better for performance than the alternatives. When you give people shiny tools that make it hard for visually impaired people to consume information, then more of that sort of content will be embedded in blogs, presentations, MOOCs or whatever else. PowerPoint and Google Slides should really just get their act together with regards to rendering code blocks. It’s quite sad that in today’s world they still don’t have a built in way to show code on slides in a formatted and colorized way. [0] https://www.w3.org/TR/SVG-access/ https://www.w3.org/TR/SVG-access/
- saagarjha 6y ago
  Sadly, many places will only accept images in PNG (or heaven forbid, JPEG) format :( SVG export would be cool, though.
akdor1154 6y ago
I just googled your VSCode theme and can provide another anecdote of violent irritation.

herbst 6y ago

Its unbelieveable for me how so many modern 'coders' 'post' their code samples in a non copy paste friendly way. Sure let me watch your boring 25 minutes video just to MAYBE get a glance on that one line of code i am looking for...