DEV Community

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

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...
Collapse
 
cicirello profile image
Vincent A. Cicirello

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?

Collapse
 
grahamthedev profile image
GrahamTheDev

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! πŸ’—

Collapse
 
cicirello profile image
Vincent A. Cicirello

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.

Collapse
 
link2twenty profile image
Andrew Bone

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

lion king - young Simba eating bugs

Collapse
 
grahamthedev profile image
GrahamTheDev

Haha, I kind of like the idea of my accessibility tips being "slimy, yet satisfying"! πŸ˜±πŸ˜πŸ’—

Collapse
 
lionelrowe profile image
lionel-rowe

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">
Enter fullscreen mode Exit fullscreen mode

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?

Collapse
 
grahamthedev profile image
GrahamTheDev

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. πŸ’—

Collapse
 
drfcozapata profile image
Francisco Zapata

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')
})()
Enter fullscreen mode Exit fullscreen mode

Blessings from Venezuela.

Collapse
 
moopet profile image
Ben Sinclair

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

Collapse
 
grahamthedev profile image
GrahamTheDev

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 ```

Collapse
 
cicirello profile image
Vincent A. Cicirello • 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...
```
Enter fullscreen mode Exit fullscreen mode

Which produces:

## Example markdown block
Blah, blah, blah...
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
grahamthedev profile image
GrahamTheDev

oh nice, didn't know that! πŸ’—πŸ’—

Collapse
 
moopet profile image
Ben Sinclair

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

Collapse
 
harendra21 profile image
Harendra Kumar Kanojiya
console.log("I am sharing like this")
Enter fullscreen mode Exit fullscreen mode
Collapse
 
imasharc profile image
sharc • Edited

Very well structured post!

It reads like a (tiny) research paper:

  1. Define problem
  2. Give examples of WHERE the problem occurs
  3. Propose a solution
  4. Showcase the solution
  5. 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.

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks! πŸ’—

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

Thank you for writing this, Graham!

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

Collapse
 
vuong profile image
Vuong

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

Collapse
 
grahamthedev profile image
GrahamTheDev

Yeah, that would be amazing! πŸ’ͺπŸΌπŸ’—

Collapse
 
shawn2208 profile image
Shawn2208

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

Collapse
 
jacobashley profile image
Jacob Ashley

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

Collapse
 
grahamthedev profile image
GrahamTheDev

Glad it was useful bud! πŸ’—

Collapse
 
hemanthvk11 profile image
Hemanth Vk

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

Collapse
 
sudhansu profile image
Sudhansu

How about a paste bin link with the code snippet?

Collapse
 
grahamthedev profile image
GrahamTheDev

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. πŸ’—

Collapse
 
etienneburdet profile image
Etienne Burdet

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