Skip to main content

Enable Accessibility Widget

Learn how to enable and use the UserWay accessibility widget to make the My Impact Page and app easier to read and navigate.

Updated over a week ago

The UserWay Accessibility Widget provides tools to adjust the appearance and behavior of the My Impact Page and mobile app to improve readability, focus, and navigation.

When enabled, a small icon appears in the bottom-right corner of your screen or app. Clicking it opens a menu with options to adjust contrast, text spacing, font style, and more. Even if you don’t change any settings, enabling the widget helps screen readers interact with the page more effectively.

Note: For this option to be available to you, your organisation needs to have this enabled first.

Important:

  • You’ll need to enable it on each browser or device you use.

  • If browser data is cleared, the widget will need to be re-enabled.

UserWay – Features & Tools

  • Language

    • This controls the language the userway widget is rendered in. It will default to match the page language, where possible (which would be the language the user has set in their "Region" setting)

    • This does NOT translate the page or any content outside of the widget.

  • Accessibility Profiles

    • This allows the user to select from a variety of pre-set setting combinations tailored to the specific disability.

  • Oversided Widget (XL)

    • Makes the widget bigger and easier to use for users with low visible or limited motor skills.

  • Screen Reader

    • Built in screen reader to read the page, you can choose slow, medium or fast reading.

  • Contrast +

    • Adjusts the color scheme of the page. There are three options:

      • Invert Colors – Flips darks to lights and lights to darks.

      • Dark Contrast – Makes the page mostly dark with high contrast.

      • Light Contrast – Makes the page mostly light with high contrast.

  • Smart Contrast

    • Uses algorithms and AI to dynamically adjust the background and foreground colours of elements to maintain an accessible contrast ratio.

  • Highlight Links

    • On/Off toggle.

    • Highlights links with black text on a yellow underline for better visibility. (Note: This can look visually “loud” or unconventional.)

  • Text Spacing

    • Three levels: Light, Moderate, Heavy.

    • Increases the horizontal space between letters to improve readability (does not affect line height).

  • Pause Animations

    • Two options: Pause Animations / Play Animations.

    • Reduces motion on certain elements, such as image galleries or embedded animations.

    • Does not stop all movement entirely.

  • Hide Images

    • Two options: Enabled / Disabled.

    • Hides most images, including icons, banners, and images embedded in content.

    • Warning: This may make the interface harder to use since it hides visual buttons and icons.

  • Dyslexia-Friendly / Legible Fonts

    • Three states:

      • Off

      • Dyslexia-Friendly – Changes fonts to a custom UDF font developed for easier reading.

      • Legible Fonts – Replaces difficult-to-read fonts (like decorative or script fonts) with standard, clear fonts like Arial.

  • Cursor Tools

    • Big Cursor – Enlarges the cursor for better visibility.

    • Reading Mask – Highlights a horizontal band of the page while greying out the rest, helping to focus on one line at a time.

    • Reading Guide – Displays a line with an arrow that follows the cursor, helping track text in tables or long lists.

  • Page Structure

    • Pops up a dialog with 3 different tabs, to help users navigate the page. Headings, Landmarks, and Links.

    • Clicking the element in this dialog will bring the user to it.

  • Line Height

    • Three options: 1.5x, 1.75x, 2x.

    • Increases vertical spacing between lines for improved readability.

  • Text Alignment

    • Four options: Align Left, Align Right, Align Center, Justify.

    • Changes text alignment, mostly noticeable in tables and lists. (Can sometimes disrupt layout.)

  • Dictionary

    • When enabled, highlighting text will then popup a dictionary definition of the word(s).

  • Saturation

    • Three options: Low, High, Desaturate.

    • Adjusts color intensity:

      • Low – Colors are darker and less vivid.

      • High – Colors are brighter and more vivid.

      • Desaturate – Colors appear mostly grayscale.

  • Reset All Accessibility Settings

    • Resets all UserWay settings back to default/off.


How to Turn On the UserWay Widget

The widget is optional. Settings are stored in your browser, so:

  • You’ll need to enable it on each browser or device you use.

  • If browser data is cleared, the widget will need to be re-enabled.

In My Impact Page (volunteer portal):

  1. Go to My Profile → Contact Information.

  2. In the Accessibility section, toggle on Accessibility Tool.

____________________________________________

In My Impact Page Mobile or App:

  1. Go to My Profile → Preferences.

  2. Toggle on Accessibility Tool.

Did this answer your question?