Welcome to the first "quick accessibility" post to quickly (quicka11y π) improve the accessibility of your content, websites etc.
Today's tip is a...
For further actions, you may consider blocking this person and/or reporting abuse
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?
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! π
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.
I'm not sure why "A quick win, with huge impact!" reminded me of the Lion King but it did.
Haha, I kind of like the idea of my accessibility tips being "slimy, yet satisfying"! π±ππ
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 guessaria-labelledby
?I guess automated a11y checkers might yell at you for omitting
alt
though... but is it necessary to still include it ifaria-labelledby
is provided?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!).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. π
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.
Blessings from Venezuela.
I wrote something similar a while back about embedding code in posts.
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!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.Which produces:
oh nice, didn't know that! ππ
I never did find the workaround, but I never needed to do it again either :)
Very well structured post!
It reads like a (tiny) research paper:
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.
Thanks! π
Thank you for writing this, Graham!
I'll try to employ this in my posts going forward β¨
Sharing code snippets on social media should have customization options, themes, and links to repositories or gists..
Yeah, that would be amazing! πͺπΌπ
connect-codechat-4c2d444b36df.hero... my real time chat app supports code in markdown.
Love this! I do these snippets all the time! I didn't know that this could be an issue! Thank you Graham!
Glad it was useful bud! π
Hey great post I was actually trying to find how ppl share those code snippets of carbon
How about a paste bin link with the code snippet?
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. π
We don't have a11y needs on snippets, we have c3-7g needs!