Docs

Global 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 keyboard navigation – add focus with highlights to all focusable elements when you navigate with “TAB” key.

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.

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

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

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.

 

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.

Content Settings

 

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

 

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.

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.

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:

Hello, I am the Dog's alt text

<img src="dog.jpg" alt="Hello, I am the Dog's alt text">

 

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.

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

 

Modal windows (popup) [pro only]

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
}