Gregory's Serverquestion for the #a11y/#accessibility crowd: what’s the best practice for alt text on code snippet images? I can’t imagine pasting the raw code into the alt text is great for screen readers but I don’t know if an english explanation is better (“an object containing key X with value Y gets passed into a function that does Z.”)
 6 comments
 @samhenrigold I suppose the response is "Why are you using an image of code?" If the code is meant to be understood - just stick it in a <code> block. You can use something like Prismatic to make it look nice. If it is just illustrative - then the alt should say what you're trying to convey. e.g. "A tangled nest of for loops and gotos which look like someone bashed their head on the keyboard to create." @Edent For blog posts, absolutely — <code> all the way. For social media posts, though, our studio does these iOS dev tips and sometimes the snippets can exceed character limits: https://twitter.com/lickability/status/1573019817384484864  @samhenrigold if the answer isn’t pasting the raw code, I am going to be massively cringing 😬  @samhenrigold I think the code is probably fine, and actually better as it gives people reading the alt the same chance to read the actual code as people who can see the image  @samhenrigold All images with text should include the entirety of the text in the image if the text can't be included in the post itself. #accessibility |
@samhenrigold can you include it below in text? even if it's in an expand contract widget that would be better...