so, here's an interesting question that I'd love some input on.

right now, the static site generator I use (getzola.org) has an optional "line numbers" mode for code blocks which is meant to display line numbers alongside a section of code. right now, this switches from outputting the code as a raw block of text to a table, where the line numbers are on the left and the lines are on the right.

my gut feeling is that the correct way to do this is to not use a table, and just find some other way of styling the code so that each line is prefixed with a number, and maybe you can toggle that on and off. but I don't actually know if this would be better for screen reader users or worse.

and this also occurred to me: I don't actually have any idea what the most common ways screen reader users interact with line numbers are. I personally would prefer to avoid adding extra javascript to this, so, that sets aside the option to do things like custom key combinations for revealing the line number, although I could do those instead and have some kind of fallback. although this wouldn't work nearly as well for mobile viewers, since that has much more limited support for key combinations. (maybe long press for line number?)

like, would it be obnoxious to just say the line number before every line, as if they were formatted as text? would it be helpful? I genuinely don't know since I don't develop this way, and would love to know what people think is best. this is a case where simply testing it out with a screen reader isn't enough: I know what the result would sound like, but I don't know if that's the result people would like to hear.

and it is worth saying, all of these options should ensure that you can just copy-paste the code into whatever editor you want and read it there. this is pretty doable with a table or any other method, and I'm not super worried about that aspect. mostly just what people who are browsing the site on their device would like as far as navigation goes.

#WebDev #ScreenReader