DEV Community

Sharing Code Snippets on Social Media, the accessible way! [Quicka11y]

GrahamTheDev on September 19, 2023

Welcome to the first "quick accessibility" post to quickly (quicka11y 😁) improve the accessibility of your content, websites etc. Today's tip is a...

Read full post

Vincent A. Cicirello • Sep 19 '23

On a site like DEV that supports code blocks in Markdown, are there any accessibility issues with such code blocks? Obviously for sites without such support, using gists or codepen, etc as you describe is the way to go. Are there any reasons to do it that way here on DEV as well instead of using code blocks?

GrahamTheDev • Sep 19 '23

No not really on DEV, code blocks are far better and because we can set language I think the syntax highlight looks pretty enough.

It was more for social media and sites where codeblocks are not supported, I perhaps didn't make that clear.

I will try and remember to make an edit in the morning to make that clear! 💗

Vincent A. Cicirello • Sep 20 '23

When I see code on other sites in images I usually stop reading, and I don't have accessibility needs. So I can only imagine how bad it is for those who do.

Andrew Bone • Sep 19 '23

I'm not sure why "A quick win, with huge impact!" reminded me of the Lion King but it did.

GrahamTheDev • Sep 19 '23

Haha, I kind of like the idea of my accessibility tips being "slimy, yet satisfying"! 😱😁💗

lionel-rowe • Sep 20 '23

Kinda surprised and disappointed to learn that assistive technology doesn't support line breaks in alt attributes at all. What would be the proper accessibility-friendly way to do this if you have full control of the markup and don't want to link out to another page but still wanted to use an image (e.g. it's an image showing a formatted stack trace or including some text editor UI)? I guess aria-labelledby?

<pre id="code-block" class="sr-only"><code>
for (let i = 0; i < 10; ++i) {
    console.log(i)
}
</code></pre>

<img src="code.png" aria-labelledby="code-block">

I guess automated a11y checkers might yell at you for omitting alt though... but is it necessary to still include it if aria-labelledby is provided?

GrahamTheDev • Sep 21 '23

So to be clear, the reason assistive tech doesn't include line breaks in alt attributes is because alt attributes are not intended to be used to describe things like code "word-for-word".

This post is targeted at social media as you have no where near the same flexibility as you do in a website you build / control.

What you suggested is "not bad" (better than putting it in the alt attribute), but at the point where you are creating a properly formatted code block...just display the code block.

That way you get the benefits I said within the article, such as being able to copy and paste it!

And if you are at the point where you can use sr-only classes, you have full control of visual appearance and the underlying code, so you can always use CSS to make a code snippet look just like one of the images you would create via carbon etc. (In fact, you just gave me a great idea!).

I guess automated a11y checkers might yell at you for omitting alt though... but is it necessary to still include it if aria-labelledby is provided?

A good accessibility checker would not, as technically what you did is correct and provides accessible alt text. But yet again, the odds are if you are using aria-labelledby as you need multi-line text...then you have probably not got the accessibility quite right.

If anything isn't clear here, please do say and I will try to elaborate more. 💗

Francisco Zapata • Sep 21 '23

Brilliant!!!
I agree with you bro. I try to use the triple backticks when I can, but your proposal is beautiful. I buy it and I'll do it that way.

(function thanks() {
  console.log('Thanks a lot for sharing it')
})()

Blessings from Venezuela.

Ben Sinclair • Sep 19 '23

I wrote something similar a while back about embedding code in posts.

GrahamTheDev • Sep 19 '23

Nice! Thanks for adding this article to it!💗

I see you struggled with backticks like I did. 😂 The trick is <pre> tags in case you didn't ever find the workaround!


``` content ```

Vincent A. Cicirello • Sep 19 '23 • Edited

If you want to show the backticks in a code snippet, you can put 3 tildas ~~~ on the line before the opening backticks and then again on a line after the closing backticks.

```Markdown
## Example markdown block
Blah, blah, blah...
```

Which produces:

## Example markdown block
Blah, blah, blah...

GrahamTheDev • Sep 19 '23

oh nice, didn't know that! 💗💗

Ben Sinclair • Sep 20 '23

I never did find the workaround, but I never needed to do it again either :)

Harendra Kumar Kanojiya • Sep 19 '23

console.log("I am sharing like this")

sharc • Feb 11 • Edited

Very well structured post!

It reads like a (tiny) research paper:

Define problem
Give examples of WHERE the problem occurs
Propose a solution
Showcase the solution
End with conclusion on why the solution is needed.

These are basic principle of good writing, but I rarely see a good execution of this online. Good job!

Also, thanks for mentioning the Github Gist. It went over my head for some reason, but now I will try it.

GrahamTheDev • Feb 11

Thanks! 💗

Sumit Saurabh • Sep 23 '23

Thank you for writing this, Graham!

I'll try to employ this in my posts going forward ✨

vuong ⛈️ • Sep 20 '23

Sharing code snippets on social media should have customization options, themes, and links to repositories or gists..

GrahamTheDev • Sep 21 '23

Yeah, that would be amazing! 💪🏼💗

Shawn2208 • Sep 20 '23

connect-codechat-4c2d444b36df.hero... my real time chat app supports code in markdown.

Jacob Ashley • Sep 27 '23

Love this! I do these snippets all the time! I didn't know that this could be an issue! Thank you Graham!

GrahamTheDev • Sep 28 '23

Glad it was useful bud! 💗

Hemanth Vk • Sep 26 '23

Hey great post I was actually trying to find how ppl share those code snippets of carbon

Sudhansu • Sep 27 '23

How about a paste bin link with the code snippet?

GrahamTheDev • Sep 28 '23

Should be fine, I chose Gists just because they are pretty accessible, I am not sure about pastebin, but the concept is the same and is certainly an improvement over images of code. 💗

Etienne Burdet • Sep 22 '23

We don't have a11y needs on snippets, we have c3-7g needs!