[EuiCodeBlock][a11y] Should line numbers be audible to screen readers?

[cee-chen]

@1Copenut I'd love your thoughts on this!

Currently https://elastic.github.io/eui/#/editors-syntax/code#line-numbers has visual but not screen-reader-accessible line numbers. This doesn't feel like crucial information necessarily, but it's still information available to sighted users that non-sighted users don't have.

What's your recommendation here? Do you know any best practices around code line counts that we should be following for screen readers?

[cee-chen]

I wonder if we should also add screen reader affordance for highlighted lines as well. Including a screenshot for completeness.

[1Copenut]

This is a really good question @constancecchen! My initial impression is that the line numbers should be ignored. When I'm evaluating code, I typically consider it as blocks of functionality, and block out the line numbers. That works for me, but I think it's couched in my own bias. I asked the question in our accessibility channel to get some additional feedback. Will add another comment when I hear back.

[zuhairmahd]

The short answer is yes.
Look at the last three lines of this code segment:

{
  "id": "1",
  "rawResponse": {
    "took": 19,
    "timed_out": false,
    "_shards": {
      "total": 1,
      "successful": 1,
      "skipped": 0,
      "failed": 0
    }
  }
}

A screen reader user will only hear Right Brace three times. Having the line numbers will help differentiate each of the braces. Knowing line numbers could also be helpful when debugging. In VS Code, the IDE makes that info available to the screen reader, but in a web editor, it is important to have it with each line.

[1Copenut]

Added a second ticket for toggle enhancement: #5382

[thompsongl]

Thanks for raising this, Constance!

My initial impression is that the line numbers should be ignored. When I'm evaluating code, I typically consider it as blocks of functionality, and block out the line numbers.

This was my thought, also, when implementing the line numbers. Happy to have my biases debunked and come up with a better solution.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cee-chen]

I investigated this while working on #6580 and it wasn't pretty. Unfortunately, aria-describedby doesn't work (for VO at least, it might work for JAWS) since the text isn't an interactive element, leaving us little choice but to make the actual line number non-hidden. That presents its own set of issues however, as presumably we want to read out the actual words "Line 32", and not just "32", for more context... which then leads us down another rabbit hole of figuring out how to correctly i18n translate the SR text (while still hiding the visible line number text).

I got somewhat far with this with an EuiScreenReaderOnly text next to an aria-hidden span with the visible line number, but for some reason this caused safari+VO to stop navigating each line cleanly. All in all, it was a nightmare.

TBH, since VSCode and other editors have yet to solve this issue (microsoft/monaco-editor#410 & nvaccess/nvda#14268) themselves, I'm tempted to put a pin in this for a while until screen reader behavior gets better in many ways (e.g. universal aria-description support would make this trivial, as would actual role="mark" support to indicate highlighted lines).

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[github-actions]

❌ Per our previous message, this issue is auto-closing after having been open and inactive for a year. If you strongly feel this is still a high-priority issue, or are interested in contributing, please leave a comment or open a new issue linking to this one for context.