How to Add Accessibility Toolbar to Site

A quick and easy way to make your website more accessible to those with disabilities is by adding an accessibility toolbar. While most accessibility issues can’t be addressed without directly changing your content, One Click Accessibility adds a number of helpful features with minimal amount of setup and without the need for expert knowledge.

When added to your site, the toolbar will appear as a small icon in your header.

toolbar_header.png

If you click on the icon, the menu will appear.

toolbar.png

Toolbar Features

  • Resize font (increase/decrease): Use the resizing tool to make your text readable on any device. The more times you click increase the bigger the text gets. The more times you hit decrease, the smaller it gets.
  • Grayscale: Ensure sufficient contrast on your website by reducing colors to grayscale.
  • High or Negative Contrast: Provide high contrast for lighter shaded text by using a dark background and inverted colors.
  • Light Background: Help people with low vision see your website content better with dark text on light background.
  • Links Underline: Highlight any link with an anchor text to ensure better user experience.
  • Readable Font: With one click you can ensure your text will always be visible on any screen or device.

Toolbar Settings

This set of controls allows you to enable or disable the toolbar and determines which settings will appear. You can enable or disable each of the options and make appropriate setting changes for each.

To enable the toolbar, go to Accessibility > Toolbar. Not only can you turn it on or off, but you can select which devices it appears on.

access9.webp

 

Core Features

  • Skip to content: Allow your keyboard-only users to easily skip from link to link.
  • Focusable elements: Use Tab to focus on the various elements on the page.
  • Remove the target attribute: Make sure links open in the current tab and don't interrupt flow.
  • Add landmark roles to all links: Use ARIA landmarks to identify regions of the page.
  • Sitewide accessibility: Consistent accessibility throughout your site visit. Site remembers you and stays accessible.

General Settings

This panel controls the plugin’s main functionalities. These features too can be enabled or disabled.

To access, go to Accessibility > Settings.

access8.webp

Customize

Finally, you can set the image, color and position of the toolbar, as it is seen by the user. 

To do so, go to Accessibility > Customize and a special custom panel will open up.

access10.webp

 Options

  • Toolbar icon: You can choose from three images.
  • Toolbar position: You can set the toolbar to appear on the left or right side of header.
  • Toolbar color: You can change both the icon colors and toolbar colors.

As you can see, utilizing this plugin gives the user many accessible options, all with one click of the accessibility toolbar icon.

 

 

 

Сategory Menu
Powered by Zendesk