You can find the single page in the main navigation under “System and settings” > “Barrier Settings”.
On this page you will be able to customize the “Accessibility Tool”. There are three tabs for different configurations:
- Active Module
- Module Settings
- Filter Settings
We will go through each of them and explain what exactly you can configure here.
This tab is the simplest. The only thing to do here is basically just activate and deactivate certain modules of the “Accessibility Tool”. Let’s say you don’t want the user to use the “Reading Guide” module. You can deactivate it then by just unchecking the box on “Reading Guide”.
Here you can customize each module. I.e. changing the frame color of the “Keyboard Navigation” module. Customizations with a color pickers or checkboxes are very straight forward. However there are some settings that might need some explanation.
Large Text / Character Spacing
Each of this setting has a number field where you can insert a number between 1 and 10. The number defines the amount of pixels that is added for the corresponding CSS style. I.e. defining a 10 in the number field of “Large Text” would mean that your font-size increases by 10 pixel when using the “Large Text” module.
Font
This module has two text fields. You can insert one font style in each field. However after some researches we found out that the default fonts that we are using here, are the best dyslexics friendly fonts. Thus there should be no need to change the fonts.
Mouse Cursor
The default here is a SVG (base64 encoded) of a big mouse cursor. If you want to change it, you can replace it with any base64 encoded SVG. Alternatively you can insert the path to a PNG.
The last tab allows you to exclude website elements from being affected of the “Accessibility Tool”. You can exclude elements by inserting the class of an element into one of the text areas. You can add multiple classes by separating with a comma.
It should look like this:
.my-example-class, .my-example-class2, …
So since the “Accessibility Tool” applies a bunch of different CSS styles, it may not be compatible with some elements on your website. The four filters that we have implemented are the most common styles that produce a visual bug (so far as we have experienced).
Height Filter
Excludes the height style
Display Filter
Excludes the display style
Line Height Filter
Excludes the line-height style
Wrap Input Filter
Excludes input fields from being affected by any “Accessibility Tool” module