Skip to content

Latest commit

 

History

History
44 lines (37 loc) · 3.75 KB

code-accessibility.md

File metadata and controls

44 lines (37 loc) · 3.75 KB

Accessibility of code in VS Code or the terminal

You may find that some minor adjustments to your coding setup can have a huge impact on the effectiveness and enjoyability of your experience. Here are a few things you might try customising to suit your own needs. While they are largely sourced from resources focusing on dyslexia, anyone can benefit from them.

Further accessibility features, such as keyboard navigation, screenreader compatibility, and audio cues are described in the VS Code docs.

Additionally, if you need hands-free coding, read Josh W. Comeau's description of how he does this.

Customisations that might improve readability:

  • Colours (themes and contrast)
    • This one was designed by a dyslexic coder for their own use
    • For fine-grained control, you can modify the colours of specific "tokens" such as numbers or words like "const" and "return". Here's an article on how to do this
  • Typefaces
    • This one was specifically designed for dyslexic readers and comes in a "monospace" font, which is what is typically used in code editors
  • Font size, letter spacing, line spacing (general guidance)
    • The editor is highly customisable within VS Code, and so is the integrated terminal. For example, using "terminal.integrated.fontSize": 16 in your settings.json for VS Code. The markdown preview can also be customized with "markdown.preview.lineHeight", "markdown.preview.fontSize", and "markdown.preview.fontFamily".
  • Magnification of entire interfaces (i.e. zooming in/out)
    • "window.zoomLevel": 1.5 (or whatever value you choose) in your settings.json for VS Code
  • Icons for different file types
  • Hiding whitespace characters 
    • "editor.renderWhitespace": "none",
"editor.renderControlCharacters": false
      in your settings.json for VS Code

Customisations that might benefit focus and attention:

  • Find "TODO" items in your code and build a list in the sidebar with Todo Tree
  • Hiding the minimap
    • "editor.minimap.enabled": false in your settings.json for VS Code
  • Colours to highlight (or de-emphasise) certain panels, applications, or work spaces

Customisations that might reduce errors:

Resources

These articles are primarily geared towards dyslexia, but include suggestions that may also be useful for people who are neurodivergent.