Syntax highlighting and accessibility

Question

There are a lot of tools that automatically detect the programming language used in code blocks and add proper syntax highlighting. For example: Highlight.js and google-code-prettify.

Given that using those is fairly straightforward (add bit of CSS and JS to your site), I suggested to a documentation team that they should incorporate it in their documentation HTML output. They told me this was not possible for accessibility reasons - for example, people that use screen readers may have trouble reading the code.

It's very hard for me (a person that doesn't use screen readers) to read source code without syntax highlighting. I usually need to copy/paste it to my text editor. That is not ideal from a UX standpoint. I assume other people will run into the same issue.

What are considered best practices regarding syntax highlighting and accessibility? What would be the best approach to take from a UX standpoint? (e.g. a toogle/switch, code for the majority of users)

Answer 1

Particular low-contrast ratios (text color to background color) can be an accessibility flag--so maybe avoid light yellow on white for some code--but otherwise, I can't see how syntax highlighting via color would be in any other way any sort of accessibility issue.

As you point out, without it, it's actually less accessible for people such as yourself.

As for their comment about screen readers, that's bizarre, as the color of the text has zero bearing on a screen reader. I think they may be misinformed or not entirely understanding what syntax highlighting actually is.

Answer 2

Quite the contrary: Syntax highlighting is good for accessibility.

(Unless the implementation breaks accessibility rules, like using not a high enough contrast etc., of course.)

Simple reason: It helps reading/understanding the code. The meaning of the code doesn’t depend on the highlighting, so nothing is lost for a user who can’t perceive the colors.

When you use the "meaningless" HTML elements span resp. div to mark-up the relevant code parts (keywords, braces, variables etc.) and CSS to color them (e.g. via class name hooks), then there is nothing in the way for a screen reader. It will simply ignore it.

Answer 3

I don't think syntax highlighting should break accessibility. Of course if someone uses instead of with proper CSS to highlight some keywords it can affect screen reader output - some of them change voice for strong in case of it is semantic markup.

What can cause issues is line numbers which are often added by those tools. They are of course huge UX and accessibility improvement because it is much easier to understand code with line numbering. Speech synthesizers could in most cases read those numbers and it could make misunderstanding. I would look for solution.

Answer 4

it's quite easy to provide that with the CSS that provides the color, I think screen readers can get the info from the HTML:

// Create two leads to convert
      Lead[] leads = <span class="keyword">new</span> Lead[<span class="number">2</span>];
      Lead lead = <span class="keyword">new</span> Lead();
      lead.setLastName(<span class="string">"Mallard"</span>);
      lead.setFirstName(<span class="string">"Jay"</span>);
      lead.setCompany(<span class="string">"Wingo Ducks"</span>);
      lead.setPhone(<span class="string">"(707) 555-0328"</span>);
      leads[<span class="number">0</span>] = lead;
      lead = <span class="keyword">new</span> Lead();
      lead.setLastName(<span class="string">"Platypus"</span>);
      lead.setFirstName(<span class="string">"Ogden"</span>);
      lead.setCompany(<span class="string">"Denio Water Co."</span>);
      lead.setPhone(<span class="string">"(775) 555-1245"</span>);
      leads[<span class="number">1</span>] = lead;
      SaveResult[] saveResults = connection.create(leads);

All I know for sure is our documentation meets accessibility requirements and we have syntax highlighting.