1. Floating (Default)

Allyable accessibility icon is floating as default. Scrolling the page does not affecting the icon position and it will always be displayed.

Allyable provides ways to manipulate the icon position through its platform:

1. Hiding the icon. The accessibility icon can be hidden while the virtual layer is running in the background, scanning, and applying fixes. Enabling “Menu hidden” in the platform will set the CSS class to “mk-aweb-menu-hide-self” to the icon.

2. Use a custom icon. A new icon can be uploaded to be displayed on the digital asset. Styling can be added to the new icon to support its size and necessary adjustments. Uploading a new icon will set a CSS class to “mk-aweb-menu-img-custom” to the icon image element.

3. Setting the location. The accessibility icon location can be adjusted to the following:

Main menu – Administrator – Domains – Edit a domain – Menu Customization tab

2. Embedded

The accessibility icon can be embedded in the DOM as part of a menu, list, or anywhere else on the digital asset.

Embedding the accessibility icon in the DOM requires code adjustments. Using a layout fix in the Allyable portal allows creating customized code and the necessary adjustments.

3. Best Practices

Creating a layout fix

A layout fix is a code editor which is not related to a CSS selector (specific element) or a specific page. Any code adjustments can be added for DOM manipulations. A layout fix must be assigned to a bundle for publishment to digital assets. A bundle is published only once, after assigning a layout fix to it we should work on the layout fix only.

Creating a layout fix (if does not already exist): 

Assigning a layout fix to a bundle:

Setting different positions for different devices

In some cases, we want different positions for different devices like desktops, mobiles, etc.

To set a different location to a specific device, code adjustments need to be created.

Code example: Adjust the location of the accessibility icon and menu to the bottom in mobile devices (width<980)

Adding an element to keyboard navigation

When the "Tab" button is used for navigating, the “tabindex” attribute specifies the tab order of an element. The default tab order provided by the DOM moves the focus from top to bottom on native focusable elements (input, select, textarea, anchor, button, area). To add our custom icon to the navigation order tabindex=”0” attribute should be added to the element.

Code example: adding tabindex=0 attribute to an element using jQuery

1. $('.myObjectClass').attr('tabindex', '0');

If the custom icon is not located first in the navigation order, we would want assistive technologies to move the focus first to the custom icon and then to other elements. Providing a tabindex greater than “0” to elements should be avoided according to accessibility guidelines but to set our custom icon first in navigation order will assist users with disabilities and assistive technologies to find the accessibility features easily. 

Code example: adding tabindex>0 attribute to an element using jQuery

1. $('.myObjectClass').attr('tabindex', '1');

Activating an element using only the keyboard

Customized elements need to be operated using a mouse and a keyboard for people who use assistive technology. Links support keyboard functionality by default.

For custom elements to be part of the keyboard navigation order, they must have a tabindex attribute with a positive value. To activate it by keyboard, Click and Keyup events must be implemented.

To remove focusable elements from keyboard navigation tabindex=”-1” attribute should be provided.

1. $('.myObjectClass').on('keyup', function (e) {
       if (e.which === 13) {

           $(this).trigger('click');

       }

   });

Code example: adding a keyup keyboard event to activate the click event of an element using jQuery

1. $('.myObjectClass').on('keyup click', function (e) {

       if (e.which === 13 || e.type === 'click') {

           // do something

       }

   });

Activating AllyToolbar using a custom icon

Activating the accessibility layer manually

Though it is not recommended, the accessibility layer can be activated manually by end users. Accessibility assists all users, with or without disabilities and applying the accessibility layer when the page loads makes the site accessible and easier to navigate to all.

To run the accessibility layer by an element click:

1. Create a variable (in the DOM) named “AWEB_BOOT” with a value of “none”
2. The customer to create an element to activate the accessibility layer such as a link, button, etc.
3. Run the accessibility by using the command “aweb.run()”
4. Open the accessibility menu (AllyToolbar) by using the command “aweb.openMenu()” after AWEB completed its process. Closing the menu by using the command “aweb.closeMenu()”
5. Allyable embedded script must be after the variable declaration

6. To determine when “aweb.run()” has completed its loading and active use the below promise inside the button/link click/keyup event:

window.aweb.run().then( 

    function success()

    {

        window.aweb.openMenu().then(

            function success () { 

                // success code here 

             }, 

            function failure() { 

                // failed code here 

        }); 

    },function failure() { 

        // failed code here 

});