Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a page about visual impairments to the docs #2258

Merged
merged 5 commits into from
Mar 18, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/user/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ The following colors are supported. Note that to target the default (gray) hat y

You can enable or disable colors in your VSCode settings, by searching for `cursorless.hatEnablement.colors` and checking the box next to the internal ID for the given shape as listed above. To navigate to your VSCode settings, either say "show settings", or go to File --> Preferences --> Settings.

You can also tweak the visible colors for any of these colors in your VSCode settings, by searching for `cursorless.colors` and changing the hex color code next to the internal ID for the given shape as listed above. Note that you can configure different colors for dark and light themes.
You can also tweak the visible colors for any of these colors in your VSCode settings, by searching for `cursorless.colors` and changing the hex color code next to the internal ID for the given shape as listed above. Note that you can configure different colors for dark and light themes. See our [visual accessibility guide](visualAccessibility.md) for more on visual accessibility.

If you find these color names unintuitive / tough to remember, their
spoken forms can be [customized](customization.md) like any other spoken form
Expand Down
28 changes: 28 additions & 0 deletions docs/user/visualAccessibility.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
# Visual Accessibility

Cursorless has multiple settings that can be customized to improve accessibility for users with color blindness or other vision impairments. The primary visual elements of Cursorless are the [hats](./README.md#decorated-symbol), so this guide will focus on customizing the hats.

## Make the hats bigger

Say `"cursorless settings"` and find the `cursorless.hatSize` setting. This setting allows you to increase the size of the hats. You may need to change the vertical offset of the hats to keep them from clipping the line below / above.

You may also want to increase your line height to allow you to make the hats even larger: say `"show settings say line height"` and increase the line height to your preference.

A reasonable place to start is to set the line height to 1.6 and the hat size to 70.

## Use shapes instead of colors

If you are a user with color blindness, it may be helpful to disable a subset or all colors and enable shapes instead. You can do so by saying `"cursorless settings"` and finding the `cursorless.hatEnablement.colors` and `cursorless.hatEnablement.shapes` settings.

## Tweak your color scheme

You can change the colors of the hats by saying `"cursorless settings"` and finding the `cursorless.colors.light` and `cursorless.colors.dark` settings.

There are several user-created color schemes available [on the Cursorless wiki](https://github.com/cursorless-dev/cursorless/wiki/Color-schemes). One notable color scheme is the [Greyscale for Night Owl theme](https://github.com/cursorless-dev/cursorless/wiki/Color-schemes#greyscale-for-night-owl-theme), which is designed to reduce visual stimulation and be compatible with most forms of color blindness. Instead of colors like "yellow", "green", etc, it uses "bright" and "dark". Here's how you use it:

1. Say `"cursorless settings"` and find the `cursorless.colors.light` or `cursorless.colors.dark` settings depending on your preferred mode
1. Change your `default` color to `#848384`
1. Change your `blue` color to `#ffffff`
1. Change your `green` color to `#333333`
1. Disable the other colors using the `cursorless.hatEnablement.colors` setting
1. Change spoken forms within your Cursorless settings folder located at `cursorless-settings/hat_styles.csv` so that you have `bright, blue` and `dark, green`. This is within your Talon configuration, not the IDE settings. This will change the spoken forms to match the new colors so that you can say eg `"take bright air"` to select the word "air" with a bright hat. See [Customization](./customization.md) for more information on how to change spoken forms.
Loading