Adding aria labels to highlight spans

/next
#1

We are using CM5 in an application and when we had an accessibility audit performed we were told that highlighted syntax would need programmatically generated text attached to the element to give textual meaning to the colors used. We decided to evaluate CM6 since one of its goals is to improve accessibility. I am trying to wrap my head around how things are working in the codemirror/highlight package and where I could tap into it to add aria labels based on the match made. For example

  • a keyword could have <span aria-label="Syntax Highlight: Keyword">function</span>
  • an operator could have <span aria-label="Syntax Highlight: Operator">+</span>

Here is the WCAG 2.0 guideline they referred to. Understanding Success Criterion 1.4.1 | Understanding WCAG 2.0

#2

I’ve discussed this very topic with several screen reader users at the start of the design process, and they were very clear on that they didn’t think this would be a good idea—screen reader output tends to already be quite noisy, and adding several words for every token would likely just make it unusable. Are the people pushing for this just checking checkboxes, or do they actually have experience using a screen reader?

That being said, if you really want this (which I strongly advise against), I guess you could write a plugin that reads the syntax tree and adds aria-label attributes based on tokens, possibly even using the syntax highlighting metadata attached to the tree.

#3

I definitely see your point and have considered that myself. I’m not sure what the answer is.

The audit was done by Deque Systems. They are considered leaders in accessibility. The problem was brought up as part of their manual review of our application. I’ll be meeting with them soon to discuss this and other issues we ran in to.

Thanks for getting back to me.