WAH Documentation

#1 License Section

License settings – detailed instruction how to activate your license key.

#2 Global Settings

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.

#3 Font Settings

There are 3 options for font resizing:

1. REM units resize
2. Zoom in/out page
3. Script base resize

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

#4 Contrast Settings

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).

#5 Styles Settings

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

#6 Links Settings

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.

#7 Content Settings

Lights Off mode – focus user on specific section. Just enter element class or id.

#8 Advanced Settings

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

#9 Visibility Settings

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.

#10 Widgets

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.

#11 WAH Dom Scanner

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.

#12 Attachments Control Center

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">

#13 Landmark & CSS

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.

#14 Modern View

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:

#15 Actions & Filters Hooks

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>';
}

#16 Modal windows (popup) - WAH PRO

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
}

#17 JS functions - WAH PRO

Open WAH PRO sidebar:

wah_open_sidebar();

Close WAH PRO sidebar:

wah_close_sidebar();

#18 Layout manager - WAH PRO

You can select one of 5 presented layouts to provide better user experience.

#19 Sepia and Monochrome modes - WAH PRO

Sepia and Monochrome modes provides better accessibility for people with vision problems.

#20 Advanced settings - WAH PRO

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.

#21 Inspector mode - WAH PRO

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

#22 Custom link/button module - WAH PRO

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.

#23 Letter spacing module - WAH PRO

Add letter spacing to your website content and improves text reading.

#24 Web Speech API

Web Speech API (English only)

You can enable this feature if you want that your computer will speech selected text.

#25 Text-to-Speech (TTS) - WAH PRO

Text-to-Speech AI (TTS) (coming to 0.1.8.5 plugin version)

1. Enter Google Cloud API key. You can get your API key here
2. Select your website language
3. Enable or disable speech popup. When enabled, you will see this popup:
   
   After clicking on “Yes” button, selected text will be “played”, if you click “No”, popup will be closed.