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