#1 License Section
License settings – detailed instruction how to activate your license key.
License settings – detailed instruction how to activate your license key.
Keyboard navigation – when enabled, applies yellow highlight on each focusable element like a,button, input,textarea, select and every element with tabindex attribute.
Clear cookies – reset all accessibility settings, clear saved cookies. You can name it as you need, for example “Reset Settings”.
Enable skiplinks – allows you to add skip links to your website. This menu managed on WordPress menu screen. You have to add links with anchors to relevant divs on your web page. More information about skiplinks you can find here LINK.
Enable dark theme – switch between light and dark sidebar themes.
Custom logo position – allows you to control logo position. Hide for mobile – hide/display accessibility sidebar for mobile devices. Show sidebar on the left side – option to control sidebar position, it can be relevant for websites with multiple languages support. Enable Greyscale Images – option to apply grey scale filter on you images. Enable Invert Colors – option to apply strong contrast effect on all your website look.
There are 3 options for font resizing:
1. You should use REM units resize, only when your theme is built with REM units, not in PX (pixels). For example, you should see (in your theme style.css file) as follows:
html { font-size:16px; } body { font-size:1rem; } h1 { font-size:2rem; }
2. Zoom in/out page will be useful for websites with unclear html/css standards, website that was overridden and fixed several times. For example, one part of a code was written in REM units and the second part – in pixels or percents…. There are many websites that are developed by 4-5 developers…
3. Script base resize option will be useful for… everyone =) This script calculates font size for the next html tags:
h1,h2, h3,h4, h5,h6,a
***Please remember, reset fonts button works only with script base resize option
Contrast Settings – allows you add contrast variations of text color & background color to your website. If your don’t like the default colors settings, you can easily create one of yours with the simple color picker (up to 4 variations).
Remove animations mode – remove all animations from your website.
Remove styles mode – remove all website’s styles and shows webpage in raw html version. Please remember, this feature does not works with cache plugins that print all your css inline.
Enable large mouse cursor – makes mouse cursor very large
Underline links mode – apply underline for all links on page, for better user experience.
Highlight links mode – adding yellow background color to all links.
Add role link – add role="link"
to all a
tags.
Remove link title attributes – removes all title attributes from all website links.
Lights Off mode – focus user on specific section. Just enter element class or id.
Enable Web Speach API – The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.). Currently only English language supported.
Enable log – display plugin log in browser’s “console log”.
Cookies – control user’s cookies
Show WAH credits – shows link to WAH website at the bottom of the sidebar
Report a problem – allows to send feedback to website admin
If you want to hide accessibility plugin (not load it at all) on specific page, you can do that. Select pages and it’s done.
All widgets can be reordered, disabled or enabled by user with a simple Drag & Drop functionality. Grey colored widgets – widgets that are disabled by user, and other widgets are currently in use.
Currently on beta stage. WAH DOM Scanner allows you to scan your posts & pages, and give you a report about images and links status on the selected page. See image below: ***Please remember, ‘allow_url_fopen’ module must to be installed on your server.
Attachments Control Center – allows you to control all your attachments (images) from the one place. You can preview image, edit alt tags and edit image to improve accessibility of your website. Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text. There is example for the valid image tag:
<img src="dog.jpg" alt="Hello, I am the Dog's alt text">
The following roles are regions of the page intended as navigational landmarks. All of these roles inherit from the landmark
base type and, with the exception of application
, all are imported from the Role Attribute. The roles are included here in order to make them clearly part of the WAI-ARIA Role taxonomy.
application
banner
complementary
contentinfo
form
main
navigation
search
Example:
<header class="header" role="banner"></header> <footer class="footer" role="contentinfo"></footer>
More information about landmarks you can find HERE.
Modern View – new WAH PRO accessibility sidebar theme. Very compact and user friendly.
All the options grouped by categories.
Important!
When this option selected, widgets order will not works here, because of complex structure of this module.
Admin side:
Modern view section:
Front view:
Filter – WAH sidebar logo:
add_filter('wah_icon_url', 'http://mylogo.com/logo.png');
Filter – Change Remove animation button accesskey:
add_filter('wah_remove_animations_accesskey', 'change_remove_animation_ak'); function change_remove_animation_ak(){ return "q"; }
Filter – add custom buttons/text to WAH sidebar:
add_filter('wah_enabled_widgets', 'custom_front_widgets', 10, 1); function custom_front_widgets($widgets){ $widgets["widget-100"]["active"] = 1; $widgets["widget-100"]["html"] = '<div class="a_module"> <div class="a_module_exe"> <a rel="nofollow" href="#test" id="test_link" class="contrast_trigger action_button wahout wah-lights-off">Test link</a> </div> </div>'; return $widgets; }
Action – Before WAH wrapper:
add_action('before_wah_wrapper','my_custom_wrapper_start'); function my_custom_wrapper_start(){ echo '<div class="my_custom_wrapper_start">'; }
Action – After WAH wrapper:
add_action('after_wah_wrapper','my_custom_wrapper_end'); function my_custom_wrapper_end(){ echo '</div>'; }
Add/change dialog inner wrapper:
add_action('wah_dialog_inner_start','custom_inner_start'); function custom_inner_start(){ ?> <div class="dialog-inner-start"> <p>some HTML here</p> </div> <?php }
Add/change dialog inner wrapper end:
add_action('wah_dialog_inner_end','custom_inner_end'); function custom_inner_end(){ ?> <div class="dialog-inner-footer"> <p>some HTML for foooter here</p> </div> <?php }
Open WAH PRO sidebar:
wah_open_sidebar();
Close WAH PRO sidebar:
wah_close_sidebar();
You can select one of 5 presented layouts to provide better user experience.
Sepia and Monochrome modes provides better accessibility for people with vision problems.
WebSpeach API – read selected text
Enable log – print plugin and website information on browser console.
Cookies – number of days to save user page to page plugin settings. Website admin can control this parameter to providing better privacy policy.
Every user can focus on every part of your website and display the content inside Inspector popup, there is very useful tool for many users.
More info you can get by watching our video tutorial here
If you need to display a custom link inside the WAH Pro sidebar (like Terms or custom url ), you can do that with “Custom link/button” module.
Add letter spacing to your website content and improves text reading.
Web Speech API (English only)
You can enable this feature if you want that your computer will speech selected text.
Text-to-Speech AI (TTS) (coming to 0.1.8.5 plugin version)