Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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)

share|improve this question
    
Could you specify the level of impairment? They could mean that 1) they've had issues where some screen readers were having issues reading the additional in-line markup, or 2) they were having issues with vision-impaired users were having issues with the colors, or 3) they had issues with color-blind users not being able to see certain words. –  Don Nickel Aug 1 '13 at 13:03

3 Answers 3

up vote 6 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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 = new Lead[2]; Lead lead = new Lead(); lead.setLastName("Mallard"); lead.setFirstName("Jay"); lead.setCompany("Wingo Ducks"); lead.setPhone("(707) 555-0328"); leads[0] = lead; lead = new Lead(); lead.setLastName("Platypus"); lead.setFirstName("Ogden"); lead.setCompany("Denio Water Co."); lead.setPhone("(775) 555-1245"); leads[1] = lead; SaveResult[] saveResults = connection.create(leads);

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

share|improve this answer
1  
This isn't really a UX answer, it's just a load of css. The question was "what are considered best practices regarding syntax highlighting and accessibility? What would be the best approach to take from a UX standpoint?" which this doesn't answer. Can you explain what this code does and why it is beneficial from a UX perspective? –  JonW Oct 31 at 18:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.