Skip to main content

#Accessibility question - what's the best way to expose code-blocks to readers? There's a lot of information around visual contrast, but not much on how screen readers are used.

#blind #webdesign

#Accessibility #blind #webdesign

Tamas G reshared this.

in reply to Silvenga

André Polykanine
André Polykanine
• •
Great question. I can tell you what not to do: don't try to expose line numbers. Because usually it looks like "1 2 3 4 5 6 7 … 125" and then the code. Do it if and only if you test it with screen readers and you know what to do. Also, would be nice if you wrap the block in something like article, blockquote or another "start-end" element that can be easily found.
in reply to André Polykanine

Silvenga
Silvenga
• •
@menelion makes sense! Is there any extra information that could be useful? I'm including language right now and planning on a title. Would number of lines be helpful?
@André Polykanine
in reply to Silvenga

Pitermach
Pitermach
• •
@menelion Hello. Andre already voiced my main frustration with reading code blocks with the line numbers, because they often appear before the code itself requiring literarly twice the keystrokes to read. If you do wrap the code in a region or quote mentioning the language used won’t hurt anything, though if it’s not displayed anywhere visually I don’t think it would be much point telling screen readers what it is, ditto with the number of lines.
@André Polykanine
in reply to Pitermach

Silvenga
Silvenga
• •

@pitermach @menelion Thanks!

And yeah, I don't like line numbers in general - they are hard to do right. A lot of code regions mess up text selection or break machine reading (for the same reasons you've mentioned).

@Pitermach @André Polykanine
in reply to Silvenga

André Polykanine
André Polykanine
• •
I don't think so but won't hurt. Also, I'm thinking now how to deal with a situation where you have this large'ish block of code, and then the text says: "As you see, we call the `insert()` method on line 83". This is quite complicated actually.
in reply to André Polykanine

Silvenga
Silvenga
• •

@menelion Yeah, that was my thought too.

On one hand, it might be best to allow the screen reader (and any user customization) to "figure it out" (so take the most standard approach seen).

Or on the other hand, I can focus on being less annoying, even if non-standard (e.g. exposing how large the code block or providing an anchor directly to the section referenced).

I'm going test it all with a reader anyway, but I also know that there are custom flows people use that I won't know about.

@André Polykanine
in reply to Silvenga

André Polykanine
André Polykanine
• •
Oh yeah! If you have enough power (like, you are the author(, you can code it so each line has an ID and an anchor, and then reference them in the articles as needed. It's a great solution actually.
⇧