Allyable - Accessibility Icon Positioning

Allyable - Accessibility Icon Positioning

Allyable - Accessibility Icon Positioning

  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.

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

  1. Setting the location. The accessibility icon location can be adjusted to the following:
  1. Vertically: top, bottom, middle
  2. Horizontally: right, left, center

            Positioning the icon through the Allyable platform will set the CSS classes to “top”, “bottom”, “middle”, “right”, “left”, “center” accordingly.

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

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

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

  1. Expand AllyAudit in the main menu
  2. Select Fixes
  3. Click the “+” button at the bottom right and select “layout fix”
  4. Pick the required domain from the domains list
  5. Publish the layout fix for the first time

Assigning a layout fix to a bundle:

  1. Expand AllyAudit in the main menu
  2. Select Bundles
  3. Click the “pencil” button at the bottom right
  4. Pick the required domain from the domains list
  5. Provide a name to the bundle
  6. Click the “+” button to the right of the “Fixes” title to assign a layout fix to the bundle (only published layout fixes will be listed)
  7. Select all layout fixes if you have only one or pick the one that you’ve created
  8. Publish the 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.

  1. The default settings should be adjusted for desktops as described above.
  2. For mobiles or other devices, we will add CSS styling and code to override the default adjustments.

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

  1. this.event(function (content, $) {

    if ($( window ).width() < 980) {

        $(`.${MENU_CLASS_PREFIX}-accessibility-panel`).removeClass('top').addClass('bottom').css('bottom', '15px');

        $(`#${AWEB_PREFIX}-open-panel`).removeClass('top').addClass('bottom').css('bottom', '15px');


    }, EngineState.Ready);

            CSS styling code example: Adjusting the top class value of the accessibility icon and menu
  1. @media only screen and (max-width: 980px) {

    body #mk-aweb-accessibility-panel-wrapper {

    top: 207px!important;


    body #mk-aweb-accessibility-panel-wrapper {

    top: 246px!important;



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.

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

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




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

  1. Create a custom element like a link or button for activating the AllyToolbar menu
  2. Make the custom element accessible by providing all the necessary attributes and functionality.
  3. Hide the default icon by checking “Menu hidden”.  Main menu – Administrator – Domains – Edit the domain – Menu customization tab – Menu hidden
  4. Create a keyup/click events for opening AllyToolbar from within Allyable layout fix
    Code example: creating a function to control clicking a custom accessibility icon with the relevant ARIA attributes.

    function changeIcon($: JQueryStatic): void {
       $('.customerCustomIcon’).off(‘click keyup tap’).attr('tabindex', '1').attr('aria-label', 'Open accessibility menu. click ESC to close').on('click keyup tap', function (e) {
           if (e.which == 13 || e.type == 'click') {

  1. Control AllyToolbar from within the customer code
    Code example: function we want to call that require window.aweb object to be ready

    funtion openAwebMenu() {
           window.aweb.addExtension(8 /*EngineState.Localized*/, function ($ /* jQuery */) {
               //MENU OPEN CODE GOES HERE, after localization is finished
Code example: Wrapper for the above function that ensures window.aweb object is ready before we access it
if (window.aweb === undefined) {
   /* if window.aweb is not defined, we add listener that will listen to aweb initialization event */
   window.document.addEventListener('awebInitialized', function () {
       /* AWeb is initialized here and now window.aweb exist, so we ready to call function that utilize it */
       once: true //This settings will destroy listener After AWEB is ready. There is no need of it afterwards cause window.aweb is already defined and can be accessed directly
} else {
   /* if window.aweb is already defined, we can call required function directly */
  1. Set AllyToolbar location based on the location of the custom icon
    SS classes provided to AllyToolbar will set its location. “top”, “bottom”, “middle”, “right”, “left”, “center”. Additional adjustments.

    Additional CSS classes can be overridden to adjust better AllyToolbar location in accordance with the 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 “”
  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




            var AWEB_BOOT = ‘none’;


        <script src="<LICENSE_ID>" async referrerpolicy="no-referrer-when-downgrade" referrerPolicy="no-referrer-when-downgrade"></script>



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

    function success()



            function success () { 

                // success code here 


            function failure() { 

                // failed code here 


    },function failure() { 

        // failed code here