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

Welcome to the first "quick accessibility" post to quickly (quicka11y 😁) improve the accessibility of your content, websites etc.

Today's tip is all around improving the accessibility of some of your social media posts, in less than 30 seconds! Let's jump right in!

Edit / note!

There was a little confusion in the comments.

Just for clarity, what I am suggesting here is targeted for social media. This is due to the lack of flexibility you have in terms of markup and tools to make things accessible.

Please, if you are displaying things on a site where you control the markup and or CSS, use properly marked up code blocks and use CSS to make them as pretty as you want (as long as you don't ruin the accessibility of course!).

For example, on DEV, just use triple backticks and state the language used to get properly marked up code snippets...not images.

For example, this markdown:

``` js
const array1 = [1, 4, 9, 16]; 
// Pass a function to map 

const map1 = array1.map((x) => x * 2); 
console.log(map1); 

// Expected output: Array [2, 8, 18, 32]
```

will look like this:

const array1 = [1, 4, 9, 16]; 
// Pass a function to map 

const map1 = array1.map((x) => x * 2); 
console.log(map1); 

// Expected output: Array [2, 8, 18, 32]

and that is far more accessible and looks good enough!

Hopefully that is clear, now on with the article!

What are we trying to improve?

Loads of developers and companies share amazing, beautiful code snippets on social media every day!

The problem is, the way that they share them is not accessible...and it provides a poor experience for everyone.

Let me explain...

How most people / companies share snippets

[Note: alt description deliberately omitted as an example]

People share code snippets like the one in this above, using tools like "carbon" to create pretty code snippets.

But an image of code is not as useful as actual code (and is not accessible).

You see, anyone using assistive technology (for example a screen reader), cannot access the code in your image as they need the code as actual text for a screen reader to work!

One way that people attempt to fix this is to add all of the code to the alt description on the image. 👎🏼

Adding code to the alt description

[note: the alt description in the above image is not accessible]

It is well intentioned, but still not very accessible.

You see alt text is a single line text attribute.

So when you add all of that code to an alt description it gets "smushed" onto one line and is read as plain text, which is nearly impossible to understand.

It ends up being like this (this is the alt of the above image):

const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map((x) => x * 2); console.log(map1); // Expected output: Array [2, 8, 18, 32]

As you can imagine, it is very difficult to understand that code and know where comments end and being etc!

So screen reader users cannot really use your snippet, even with the code in the alt.

On top of that, everybody who wants to try your snippet will have to retype it, character by character into their IDE.

Time consuming, prone to errors and a terrible User Experience (UX).

A better way

So can we do better?

You bet we can!

Here is a straight-forward way to make your code snippets top-tier, easy to copy and super accessible!

• Step 1: create your code image (same as before).
• Step 2: add a description of what the code does (not the actual code) in the alt description.
• Step 3: Link to a GitHub Gist,CodePen or web page containing the code.

That is it!

Let's look at our earlier example!

The template we will use is:

[Explanation of code]

[link to Gist]

[image of code with alt description explaining, briefly, what the code is for]

Let's see what that would look like.

Better way example

The map() method of an Array instance creates a new array, populated with the results of calling a provided function on every element in the calling array. [MDN]

Here is a demo: https://gist.github.com/GrahamTheDevRel/9ba078625dd07acaee2765c86f43f911

[Note: The alt text in the above image reads "Code example for using the map function in JavaScript."]

Quick notes:

First of all, above I have included the full URL as that is how social media tends to handle URLs. If sharing on a platform that allows you to change the text of a hyperlink, then please make your text more descriptive like "GitHub Gist demo for JS Map".

Secondly, if you do use GitHub Gists, as I have here, don't forget to change from "secret gist" to "public gist" before sharing.

Finally, if your code snippet URL is too long (for example if a long URL takes you over your character limit on X / Twitter) you can handle that slightly differently.

In that case, it's acceptable to say "Code example in next post" and then post the URL as the first reply under the original:

Post 1: explanation + "Code example in next post" + image (with alt!)

Post 2: "Code snippet for JS map: [link]"

That way, you can protect your character count while still providing an easy to find and use code example.

A quick win, with huge impact!

So with all that in mind, how much extra time do you think that took me?

It took about 30 seconds!

I had to copy paste the code into a Gist, give it a title and a file name, grab the URL and paste it into my post.

Very little work, but look at what we have achieved:

• ✅ Millions of people using Assistive Tech (Screen Readers) can now access the code snippet.
• ✅ People who want to try your code snippet can follow the link and copy and paste it.

A wider audience, inclusive practices and better UX?

That is a great return on time invested!

What now?

• Create more accessible snippets going forward!
• If you see someone (particularly Companies!) sharing inaccessible code snippets on social media...share this post with them!

It only takes a few of us to make a huge impact on inclusion...I hope you join us! 💪🏼💗