Accessibility Controls for the Help Center Users

Accessibility Controls for the Help Center Users

Users belong to diverse groups and have different needs and abilities that directly impact their work preferences. For example, users with dyslexia or auditory impairment may prefer less animated texts and screen reading ability. Applications that support such facilities reduce the accessibility challenges for users who have special needs. 

To enhance accessibility, Zoho Desk already offers accessibility settings for agents. To provide a similar user experience, accessibility settings are also available in the Help Center.

Accessibility settings in Help Center

The accessibility settings in the Help Center comprise of:
  1. Accessibility personas
  2. Display
  3. Font
  4. Contrast
  5. Highlights
  6. Cursor
  7. Reading tools
To access accessibility settings
  1. Navigate to the Help Center and select the Accessibility controls () icon from the top-right corner.
  2. Under Accessibility Persona, select the desired persona. 

Accessibility personas

Accessibility personas are a list of user personas who have specialized needs. Each persona has a set of unique requirements which are grouped together under features for convenience and to provide personalized experience.
The table below lists the different personas and the corresponding features:

Persona

Features

ADHD Friendly

  • Pause animation

  • Reading Mask - Medium

  • High Saturation

  • Emphasize focus area

Astigmatism

  • Content Scaling - 120%

  • Font size - 125%

  • Text Spacing - 120%

  • High Contrast

  • Highlight Headings

Blindness  

  • Screen Reader - VoiceOver

  • Keyboard Shortcuts

  • Font Size - 120%

  • Pause Animation

Color Blindness

  • High Contrast

  • Highlight Headings

  • Underline Links

  • Emphasize focus area

Dyslexia Friendly

  • Font Size - 120%

  • Text Spacing - 150%

  • Reading Mask - Large

  • Display Layout - Full Width

  • Text Alignment - Left

  • Pause Animation

Epilepsy Safe

  • Low Saturation

  • Pause Animation

  • Default theme

  • Text Spacing - 110%

Elderly Users

  • Content Scaling - 120%

  • Font size - 125%

  • High Contrast

  • Emphasizing the focus area

  • Underline links

  • Custom Cursor - Black, Size 3%

Low Vision

  • Underline Links

  • High Contrast

  • Highlight headings

  • Custom Cursor - Black, Size 4 %

  • Content Scaling - 130%

  • Font size - 140%

  • Emphasizing the focus area

Motor Disabilities

  • Custom Cursor - Black, Size 3%

  • Pause animation

  • Underline links

  • Screenreader - Voiceover

  • Keyboard Shortcuts

Seizure Safe

  • Pause animation

  • Low Saturation

  • Themes - Default

  • Text Spacing - 120%

Keyboard Navigation

Shortcut keys using keyboard

  • M - Menu

  • H - Heading

  • F - Form

  • B - Button to navigate through specific elements

Display

Settings

Features

Themes

Set the theme according to your preference: Default, Night, or Auto mode.
Alignment
Choose the placement of the menu: Aside Left or Aside Right.
Width

Select the content width: Default or Full Width.

Content scaling

Set the zoom percent for better viewing.

Setting Night and Auto mode in Custom Help Center Theme 
  1. Night and Auto mode are only supported for the default theme available in the Help center and not for custom themes.
    To support Night and Auto mode on customized pages, use the following class names:
    1. Auto mode: ac_auto_night_mode
    2. Night Mode: ac_night_mode
      Applying these classes ensures that the custom theme pages remain compatible with adaptive theme options. For more information on how to customize the help center, refer to Advanced Help Center Customization Using HTML and CSS.
  2. Headings will be highlighted only if the appropriate header tags (<h1> to <h6>) are used while customization. 
  3. The font size must be set in rem and not in px for the accessibility settings to work.

Font

Settings

Features

Font size

Select a preferred font size, starting from a minimum of 50% to a maximum of 150%.

Text spacing

Adjust the spacing between lines for better readability.

Text alignment

Choose the alignment of the text (Left, Center, or Right).


Contrast 

Settings

Features

Monochrome

Convert to black and white colors

Low saturation

Decreases the intensity of colors

High saturation

Increases the intensity of colors

Low contrast

Softer colors, less difference

Medium contrast

Balanced and clear

High contrast

Bold and easy to see


Highlights

Settings

Features

Underline Links

Enable this option to underline hyperlinked text.

Emphasize Focus Area

Adds a border around the text as you scroll to help focus.

Highlight Headings

Highlights headings by adding a border around them.

Highlight Hovers

Adds a border around elements when hovered over.

Cursor 

Settings

Feature

Big Black Cursor

Select this option if you have a light background/light mode and you want the cursor to be visible.

Big White Cursor

Select this option if you have a dark background/dark mode and you want the cursor to be visible. 

Reading Tools

Settings

Feature

Select to Speak 

 

Enables text-to-speech functionality as you scroll through the content.

Pause Animation

Pauses animations to provide a more stable reading experience.

Text Magnifier

Enlarges text for easier reading.

Reading Guide

Adds a moving highlight to guide reading as you navigate through the content.

Reading Mask

Masks surrounding content to help you focus on the section you are currently reading.