As I read articles on here, and on other sites like Medium, I sometimes see people post pictures of their code.
Services like Carbon let you paste code in and get a pretty version of your code.
It looks pretty sweet. It's nicely coloured. It has decent contrast. It invariably makes it look like you use a Mac.
And it's still totally inaccessible.
You can't reasonably put a great swathe of code into the
alt text for an image. On hosted platforms where you have a limited number of options, you generally can't do something clever with
code to let people choose the one they want.
However, these same platforms also natively provide code embedding options, with language-specific syntax highlighting. In markdown, it's as straightforward as pasting your code inside triple-backticks. You can force a particular language for the syntax-highlighting by including the language type directly after the opening ticks.
Unfortunately, I can't figure a way to get dev.to to display a series of backticks, even by escaping them in various different ways. For the purposes of this example, assume that
' is a backtick, mmkay?
The resulting code is still heavily marked up to handle the colours and spacing, but it's a lot more accessible:
- Stylesheets can handle it at different viewport sizes without ending up with really tiny text.
- It will respect the font sizing overrides you have set in your browser.
- You can copy and paste it into your own editor with your own font configurations.
This serves more purposes for everyone, not just people with limited vision:
- When replying to a post you can copy in relevant sections of the original code without having to open two browsers side-by-side and do it all by hand.
- You can paste that code into your own editor and try it out.
- You can switch on that trendy new dark mode your browser/Window Manager/OS has and - if you're lucky - the site's styles will respect your settings.
- You can search for posts containing certain half-remembered bits of code without the expectation that the host site has a million-dollarpound OCR AI system prepared to spare CPU cycles from its regular job of trying to take over the world.
What about other third-party code hosts, like Codepen et al?
They're good, too. Especially if
- You're on a site that lets you embed scripts but doesn't natively support code highlighting (e.g. a hosted blog)
- Your code is a fully functional example that can be run as a demonstration, rather than just shown as a snippet.
- You're happy to add a dependency on another service, with all that entails (more points of failure, potential fees, etc.)