Web accessibility is one of the overlooked areas in this digital world. Though there are legal laws in US like Americans with Disabilities (ADA), not many business websites offer accessibility features to users. Fortunately, web browsers offer variety of accessibility features like captions, dark mode, zoom in/out, etc. However, did you anytime wonder how to add additional web accessibility toolbar exclusive in your WordPress website? It’s easy and free with a simple plugin.
How Web Accessibility Toolbar Looks?
It works like this – add an icon floating on the site’s frontend so that users can click and make use of the available accessibility features. We talk about a simple solution which will look like below on your site:
Add Web Accessibility Toolbar in WordPress
- Login to your WordPress admin panel and navigate to “Plugins > Add New” section.
- Search for “one click accessibility” and find One Click Accessibility plugin.
- Click “Install Now” and then “Activate” button to start using the plugin on your site.
After activation, the plugin will automatically add an accessibility icon nearer to top left corner as shown in the above screenshots. The plugin offers the following accessibility features:
- Skip to content button when using keyboard.
- Underline and remove target attributes from all hyperlinks.
- Add sitemap, help and feedback links.
- Increase or decrease text size.
- Adjust the background to light color for easy reading.
- Make the font readable.
- Adjust contrast to high, negative or use grayscale.
- One click reset to revert back all changes.
You can customize the style and options by navigating to “Accessibility” menu added by the plugin. The menu has three sub-sections – Settings, Toolbar and Customize.
1. One Click Accessibility Settings
Go to “Accessibility > Settings” where you can customize some global settings.
- Add Outline Focus – enable this option to add a thin border to elements when focusing with keyboard (normally with tab key).
- Skip to Content Link / Element ID – enable to show a “Skip to Content” link and make sure to provide the correct element ID to jump when the link is clicked.
- Remove target attribute from links – this will remove target attributes from <a> html tags and force to open links in the same browser tab.
- Add landmark roles to all links – add role=”link” to all hyperlinks source code.
- Sitewide accessibility – enable accessibility consistent throughout all pages on the site.
- Remember user for – select from 1 hour 1 month range to remember user’s settings.
After changing the options, make sure to click “Save Changes” button to apply your changes.
2. One Click Accessibility Toolbar
Go to “Accessibility > Toolbar” to customize the options showing in the accessibility icon on your site’s frontend.
- Select the devices on which you want to show the accessibility icon. It is possible to show or hide the icon on desktop, tablet and phone.
- You can enable or disable each option showing in the toolbar and customize the text labels.
- Sitemap, help and feedback items will appear on the toolbar only when you provide the links in the corresponding boxes.
Click “Save Changes” button to apply the changes you have made.
3. Customize Toolbar Style
The last option is to customize the style of toolbar by going to “Accessibility > Customize” section. This will take you to the default WordPress customizer where you can change the followings:
- You have three options to choose the icon to show – One Click, Wheelchair and Accessibility.
- Change the toolbar position to left or right and adjust the offset from top to align the toolbar on your site.
- Change the text, background and focus colors of the accessibility icon and the panel.
Check the live preview and click “Publish” button to make your changes live.
Testing On Your Site
Once you have done the setup, open your site in a new tab and you will see the customized accessibility icon appears. Press the tab key and you will see the “Skip to content” button appears dynamically. Click on it to navigate to the element ID you have provided in “Accessibility > Settings > Skip to Content Element ID” box.
Click the accessibility icon and confirm the toolbar shows as per your customizations. Select each option from the toolbar and test if everything works fine with your theme. Remember, some options like “Negative Contrast” may not work well with all themes and elements. You can disable those options from “Accessibility > Toolbar” section if you want to remove them from the toolbar.
Note: Whether you offer accessibility toolbar or not, make sure to use other basic things like using alt text for images, readable font size, web safe colors. etc.
As mentioned, nowadays browsers and operating systems offer most of the accessibility features to make the disabled people’s life easier. You can use plugins like One Click Accessibility to add web accessibility toolbar to your WordPress site which can be used as an additional option. The plugin offers limited features as it is completely free to use. If you are running a legal business, then there are comprehensive solutions available like AudioEye. Below is how the toolbar from AudioEye will look but you need to purchase a premium plan which will cost you at least $49 per month.