Setup Guide for Accessibility Toolkit by WebYes
Last updated on 19 August 2025
WebYes’s Accessibility Toolkit is a WordPress accessibility plugin that helps you meet most accessibility requirements for your website. This plugin ensure that your website is compliant with standards like the WCAG (Web Content Accessibility Guidelines) and legal frameworks such as the ADA (Americans with Disabilities Act), Section 508 of the Rehabilitation Act, and the EAA (European Accessibility Act), making it inclusive for people with diverse needs.
Features Offered
1. Accessibility Options
- Readability: Ensures screen readers detect the correct language and text direction.
- Keyboard Navigation: Improves navigation flow and highlights focused elements.
- Accessible Names: Prevents confusion from redundant or missing title attributes.
- Responsive Design: Maintains content clarity and zoom functionality on mobile devices.
- Link Visibility: Ensures links are clearly identifiable without relying solely on colour.
- Link Behaviour: Prevents unexpected new tabs and informs users when links open externally.
- Forms: Adds proper labels to form fields for accurate screen reader interpretation.
2. Accessibility Toolbar
Adds a simple on-screen toolbar that lets users adjust your website’s appearance for better readability and visual comfort.
Features include:
- Font Size Button: Increase or decrease text size.
- Contrast Button: Switch to high contrast mode for improved visibility.
- Grayscale Option: View and test content in grayscale mode.
- Hide on Small Screens: Option to hide the toolbar on mobile devices.
Placement Options:
- Position the toolbar on the left or right side of the screen.
- Adjust its vertical position using a percentage slider.
This feature helps users personalise their viewing experience and enhances accessibility across devices.
3. Statement Generator
Statement generated via the Statement Generator will include :
- Communicate your organisation’s commitment to accessibility.
- Outline the standards followed (e.g., WCAG).
- List known accessibility issues.
- Provide contact details for users needing support.
This feature simplifies the process of producing clear, consistent, and compliant accessibility statements without manual writing.
Prerequisite
Ensure that the AccessibilityPlus Plugin by WebYes is installed and activated on your WordPress site.
Getting Started
After activating the plugin, an Accessibility Toolkit tab will appear on the WordPress dashboard. Click on it to get started.
Accessibility Toolkit Tab
It will open a panel like the one given below.
Accessibility toolkit panel
Now, let’s go through each feature offered by this plugin.
1.Accessibility Options
Readability
This feature will help you to automatically add the ‘lang’ and ‘dir’ attributes to the <html> tag, enabling the screen readers to precisely identify the language and the reading direction of the content. Select the checkbox and click on ‘Save settings’ at the bottom.
💡 ‘lang’ attribute: This tells the browser what language the page is written in, so screen readers can read it correctly
💡‘dir’ attribute: The dir attribute specifies the direction of the text.
Readability option
To see the changes, go to your site and refresh once the changes are made and inspect the page. Note: If any one of the ‘lang’ or ‘dir’ attributes is already present, then only the missing element would be added.
Before enabling readability
After enabling readability
To know more about how ‘land’ and ‘dir’ attributes affect readability, refer to “How dir and lang Attributes Improve Web Content Readability”.
Keyboard Navigation
This feature provides you with three options to improve keyboard navigation, which include:
- Removing Tab Index: If there is a custom ‘Tab Index’, it might cause an inconvenience to users who rely on keyboard navigation as well as screen readers. This issue can be resolved using this feature
- Add skip link to content: Without a skip link, keyboard and screen reader users have to go through the entire navigation menu every time they are on a new page. A skip link allows them to jump directly to the main content, saving time and making navigation more efficient.
- Adding an outline to focused elements: If there is no proper outline on focused elements, users can lose track of their location on a webpage, which can result in the webpage being inaccessible to some users. Adding an outline to the focused elements can resolve this issue.
1. Removing Tab Index
‘Remove tabindex’ option
After enabling the ‘Remove tabindex from focusable elements’, click on the ‘Save settings’ button at the bottom. After refreshing, inspect the webpage to see the changes.
Before the tabindex checkbox is enabled
After the tabindex checkbox is enabled
2. Add Skip Link to Content
‘Add to skip link content’ option
After enabling the checkbox, you will see a textbox to define the necessary ID(s) of the main content area that you need to skip to and then click on the ‘Save settings’ button at the bottom.
Note: If the ID(s) of the content are not mentioned, then it will result in default navigation, i.e on pressing the tab key, the focus will move towards the closer elements that can be interacted.
After refreshing, use the keyboard navigation using the ‘Tab’ key to see the changes. A skip to content link would appear during keyboard navigation after the changes are made. When you click on the ‘Enter‘ key, the navigation will skip to the specified ID.
Skip to content link
3. Add Outline to Focused Elements
Adds a visible outline to focused elements so that users can identify the active element with ease, even if no default outline is present.
‘Add outline’ option
After enabling the checkbox, click on ‘Save settings’ to apply the changes. Then go to your webpage, after refreshing, you will see the outline for focused elements while using keyboard navigation.
Outline for focused elements
Note: If an outline is already present by default, then it will not be overwritten. To know more about keyboard navigation, refer to: “Keyboard Navigation Enhancements in the Accessibility Toolkit”.
Accessible Names
By enabling this feature, you can remove the ‘title’ attributes from the elements that already have accessible names, thus avoiding duplication in assistive technologies.
‘Remove title attributes’ option
After enabling the checkbox, click on ‘Save settings’ to apply the changes. After refreshing, inspect the webpage to see the changes.
Before removing the title attributes
After removing the title attributes
To know more about accessible names, refer to: “Why Managing Accessible Names Is Important”.
Responsive Design
This feature ensures that the website layout supports pinch-to-zoom on mobile for improving accessibility for users who need larger text or image visibility.
‘Responsive Design’ option
After enabling the checkbox, click on the ‘Save settings’ to apply the changes. To see the changes applied, inspect the webpage and check the meta in the <head> tag.
Before the responsive design setting is applied
After the responsive design setting is applied
To know more about responsive design, refer to: “Why Responsive Design Matters for Accessibility”.
Link Visibility
Users with disabilities may struggle to distinguish links if colour is the only indicator. For them, a link might appear as regular text, which creates confusion and makes navigation difficult. When this feature is enabled, it ensures that all the links are identifiable without solely relying on colour alone, by providing visual indicators such as underlines.
‘Link Visibility’ option
After enabling the checkbox, click on the ‘Save settings’ button to save the changes. To see changes, go to your webpage and then check for links in that page. You will see that an underline is added to make sure that colour is not the only indicator.
Note: The colour of the underline will match that of the colour of the link text.
Before ‘Link Visibility’ is enabled
After ‘Link Visibility’ is enabled
To know more about link visibility, refer to: “Why Link Visibility Matters for Accessibility”.
Link Behaviour
People with disabilities could become lost when a link suddenly opens in a new browser tab without prior warning. For screen reader users, it could feel like they have been “moved” to a new place without any warning. This feature prevents such unexpected tabs from being opened suddenly, and also the users can be informed if a link is being opened in a new tab. In the ‘Link Behaviour’ section, you can see the features mentioned below.
To Remove target=”_blank” by Default
‘ target=”_blank” ’ removal option
After enabling the feature, click on the ‘Save settings’ button to apply the changes. To see the changes, inspect the required link.
Before enabling the feature
After enabling the feature
Adding Label/Icons to Links
Add label/icon option for links
After enabling this feature, click on the ‘Save settings’ button to apply the changes. An icon will be added to the links indicating it will open in a new tab, and a label will be added to the link, which can be viewed by inspecting that particular link.
Before the label feature is enabled
After the label feature is enabled
Before enabling the feature
(No visible icons on links)
After enabling the feature
(visible icons on links)
💡 Note: When both link behaviour options are enabled, the first option (preventing links from opening in new tabs/windows) takes priority. However, if you want a specific link to open in a new tab, you can add the class ‘wya11y-allow-open-new-tab‘ to its anchor tag. When this class is applied, the link will open in a new tab, and an accompanying icon will be displayed to inform users.
To know more about link behaviour, refer to “Why Link Behaviour Matters for Accessibility”.
Forms
This feature makes sure that all form fields in the WordPress comment form are properly labelled.
It also ensures that the WordPress search field has a clear and defined label. Together, these improvements will provide better accessibility for all users.
WordPress Comment Form Labelling
Option to add missing labels to
WordPress comment form
After enabling the option, click on the ‘Save settings’ button to apply changes.
Note: Almost all newer themes will have this enabled by default; if you are using an older version of themes, then this feature can be useful.
Added labels to WordPress comment
form
WordPress Search Form Labelling
Option to add missing labels to WordPress search form
After enabling changes, click on the ‘Save settings’ to apply changes.
Label added to search field
Note: Just like for the WordPress comment form, all newer themes will also have a label by default for the WordPress search form. If you are using older versions of themes or themes that do not have form labels added, then you can use this feature.To know more about link behaviour, refer to “Why Link Behaviour Matters for Accessibility”.
2. Accessibility Toolbar
Accessibility toolbar
Click on the ‘Accessibility Toolbar’ option in the Accessibility Toolkit, as shown below.
Accessibility Toolbar option
Once the toggle is switched on, you can select which toolbar options to include and decide their position on your site. Click on ‘Save settings’ after making your selections.
1. Include Font Size Button
This option adds a Font Size button to the accessibility toolbar, enabling users to adjust the text size across your website for improved readability.
Font size button option
After enabling the checkbox, click on the ‘Save settings’ button.
To view the change, visit your site, and you will see a toolbar icon appear on the selected side of the page. Clicking the Font Size button dynamically enlarges or reduces the text size.
Adjust font size option enabled
2. Include Contrast Button
This option adds a Contrast button that allows users to switch between normal and high-contrast modes, enhancing visibility and making content easier to read for users with low vision or colour sensitivity.
Contrast button option
After enabling the checkbox and saving the settings, refresh your site. You will see the contrast button added to the toolbar. Clicking it will toggle high-contrast mode on or off.
Color contrast off
Color contrast on
3. Test with Grayscale
This option adds a Grayscale button to the toolbar, allowing users to view your website in grayscale mode. It helps test colour dependencies and provides an accessible option for users who prefer reduced colour visuals.
Grey scale option
After enabling this checkbox and clicking ‘Save settings’, refresh your website to see the changes. The grayscale mode can be toggled on and off from the toolbar.
Grey scale off
Grey scale on
4. Hide Toolbar on Small Screens
When this option is checked, the accessibility toolbar will be automatically hidden on smaller screens (such as mobile devices) to maintain a clean and uncluttered interface.
Hide toolbar option
After selecting this option and clicking ‘Save settings’, refresh your website on a mobile or small-screen device to confirm the toolbar is hidden.
5. Placing Toolbar
You can customise the position of the toolbar on your website:
- Position: Choose to display the toolbar on the Left or Right side of the screen.
- Vertical Position: Adjust the vertical placement using the slider or by entering a specific percentage value.
Placing the toolbar edit option
Once you set the desired position, click ‘Save settings’ to apply changes. Refresh your site to see the toolbar positioned as configured.
Example:
Position: Left
Vertical Position: 25%
3.Statement Generator
Click on the ‘Statement Generator’ option in the Accessibility Toolkit, as shown below.
Statement generator option
The first one is the ‘Basic information’ section. Here, you can fill in the details of your organisation name, website URL and then click on the ‘Next’ button to continue.
Basic information section
Then you will be in the ‘Your efforts’ section. Here, click on the checkboxes that describe the actions your company or organisation is taking to ensure web accessibility.
Your efforts option
To provide additional efforts, click on the ‘Additional efforts’ option, and a text box will appear to enter the details. Then click on the ‘Next’ button as shown below.
Additional efforts option
Now you will be in the ‘Conformance status’ section. This section inquires about how closely a website, app, or digital product adheres to the Web Content Accessibility Guidelines (WCAG). Use a tool like WebYes to check your website’s conformance status.
Conformance status section
Select the option that is true for your website’s conformance status. There is also an option to add additional accessibility considerations.
Under conformance status, include an ‘Accessibility limitations’ section to clearly state areas where your content does not yet fully meet accessibility standards. For example, “Our videos currently lack audio captions. We plan to provide accurate captions for all existing and new videos by the end of Q3 2025”. This helps users understand current barriers and reassures them that improvements are planned
Accessibility limitations
After filling out each field in that section, click on the ‘Next’ button as shown below to continue.
The fourth is the ‘Technical specifications’ section. In this section, you can choose the technologies used to make the content accessible and also mention which environment is required for that to work.
Technical specifications section
You can also mention which environments are not compatible.
You can mention the browser, operating systems and assistive technologies that may be incompatible with your website. You can also inform users about how you conducted the accessibility assessment.
You can add links to your recent evaluation reports and statements in this section, as shown below. Then click on the ‘Next’ button to continue.
You will now be in the fifth section, called ‘Feedback options’. Here, you can add your company details and other contact information.
Feedback section
In this section, you can provide your postal address, other contact options, duration of response, etc.
After ensuring the details provided are correct, click on the ‘Generate’ button to generate your accessibility statement.
Generate button
Then, click on the ‘View Accessibility Statement’ button to view your accessibility statement. You can also edit your statement if changes are to be made by clicking the ‘Edit statement’ button next to it.
View accessibility statement button
Your generated ‘Accessibility Statement’ will be seen as shown below. Scroll down to view all information.
Accessibility statement
Final Thoughts
With the Accessibility Toolkit by WebYes, you can quickly make your website meet the intermediate level of accessibility requirements. It keeps things simple while ensuring all users can access your site without difficulty. If you’d like to know more or need any further assistance, please feel free to reach out to our support team.