A-WEB User Guide – Beta

The material herein is proprietary to Make-Sense, Inc. This document is for informative purposes. Any unauthorized reproduction, use or disclosure of any part of this document is strictly prohibited. The Make-Sense name and logos are trademarks of Make-Sense, Inc., its subsidiaries or affiliates. All other company or product names are the trademarks of their respective holders.

Make-Sense Inc.
Tel: +1 (202) 469-6901
E-Mail: info@mk-sense.com
Website: www.mk-sense.com

User Guide

1 Dashboard

Once you have logged into A-platform, the first page you’ll see is a user-friendly dashboard that monitors content, reports issues, and provides information about encountered accessibility issues and domains with the most errors.

Image of main dashboard charts and tables. Showing all domains and issues

Clicking a specific domain in the graph or in any of the tables in the dashboard brings you to the issues details page, which displays more information. You can also get to these details by selecting the appropriate Make-Sense menu item.

Image of issues main screen. Showing the domain and issues counters

2 Setting the scope

Setting a scope allows the system to display only relevant information by a domain, account, partner or date range. It is possible to use multiple filter types simultaneously.

Image of using a filter to set the scope of the information to display.
Image of an autocomplete list for setting the scope.

3 Partners

Partners contains the list of partners and resellers. Each partner or reseller can log in to the system with his specific permissions and manage his accounts and domains.

Image of partners section. allows to create new partners, edit and display of existing partners

3.1 Creating a new partner

The new partner page will ask for some information to be filled in:

  • Status – Partner can be set as Active, Disabled or a Lead (Automatic)
  • Partner contact – The administrator user who is assigned to that partner
  • Company details – Name, Number, Address, etc.

Image of creating new partners form.

4 Accounts

Accounts contains the customers list. A customer may have credentials to log in to the system and manage his account as well as one or more domains.

Image of accounts section. allows to create new accounts, edit and display existing accounts.

4.1 Creating a new account

Each account must have a partner set and additional information entered in:

  • Status – Active, Disabled, Lead (Automatic)
  • Account contact
  • Company details – Name, Number, Address, etc.
  • Subscription plan – The required sale package

Image of creating new accounts form.

5 Domains

Domains are required for licensing and each license is set for a specific domain/Sub domain.

Image of domains section. allows to create new domains, edit and display existing domains.

5.1 Creating a new domain

To create a new domain there is a multiple step wizard. The steps are as follows:

5.1 Step 1 – Partner

In order to create a new license/domain, the partner must be selected. If the partner does not exist, it will be created by filling in the empty fields in each form. Once a new partner is created, user information is also required.
Picking a partner from the list will allow you to skip to step 2 – account.

Image of selecting partner field in the creating domain wizard.

5.2 Step 2 – Account

To create a new license/domain, the account must be selected. If the account does not exist, it will be created by filling in the empty fields in each form. Once a new account is created, user and subscription information are also required.
Picking an account from the list will allow you to skip to step 3 – domain.

Image of selecting account field in the create domain wizard.

5.3 Step 3 – Domain

The domain page requires:

  • Domain –The domain on which the license will be created
  • Aliases – Additional domains, sub domains or IP addresses to add to the current license
  • Statement URL – Optional. A URL that directs to the customer accessibility statement. If using the default accessibility statement, please update the contact details in it by using the syntax as follows:
    • “contact:;phone:;email:;” phone and email are optional fields. Empty fields will take the information from the account contact
  • Contact URL – Optional. A URL that directs to the customer contact details page. If not supplied, the contact option will not be displayed in the accessibility menu
  • Default language – The main accessibility menu language
  • Allowed cultures – Additional languages

Image of setting the domain details in the create domain wizard.

5.4 Step 4 – Configuration

The configuration page enables to work with the license in different ways:

  • Disable A-WEB runtime – A-WEB runtime will run in safe mode, with limited functionality
  • Enable A-WEB report – Continuously transmits violations report to the server
  • Use website jQuery – A-WEB runtime will prefer using jQuery available on website
  • Switch to A-WEB develop mode – A-WEB runtime enters development mode, using the mk_dev parameter will download all instructions in draft mode
  • Website made of Static HTML only – A-WEB runtime will execute only once on boot. Monitoring is disabled

Image of setting the subscription details in the create domain wizard.

5.5 Step 5 – Final

This step allows you to send an email with the credentials and license details.

  • Send welcome email – Send a welcome email to the contact person with the new license and guidelines for installing the script
  • Send credentials email – Send credentials to the contact person if the customer is allowed to log in to the system

Image of the final step of create domain wizard. allows to send subscription and credentials emails.

5.6 Edit domain

Using the portal, a domain license details can be edited. The new license is displayed at the bottom in the “Embedded code” field. The subscription of the domain is inherited from its account.

Image of editing an existing domain.

5.7 Accessibility Icon

The editing domain page has a section for updating the accessibility icon image and location.

  • Menu Hidden – Checking this option will hide the accessibility icon
  • Horizontal Alignment – Set the horizontal alignment of the accessibility icon. The options are:
    • Default – Aligned with the accessibility menu
    • Left – Aligned to the left
    • Center – Aligned to the center
    • Right – Aligned to the right
    • Start – Aligned with the body of the document
    • End
  • Vertical Alignment – Set the vertical alignment:
    • Default – Aligned with the accessibility menu
    • Top – Aligned to the top of the screen
    • Middle – Aligned to the middle of the screen
    • Bottom – Aligned to the bottom of the screen
  • Menu Icon – Change the accessibility menu icon
  • Menu Icon Width – In case the icon is a sprite set the width of the icon
  • Menu Icon Height – In case the icon is a sprite set the height of the icon
  • Menu Icon Offset X – In case the icon is a sprite set the offset x of the icon
  • Menu Icon Offset Y – In case the icon is a sprite set the offset y of the icon
  • Menu Icon Extra Styles – Insert additional style to go with the icon

Image of setting the menu and icon views in the edit domain form.

5.8 Licenses

The license is determined by the plan and subscription of the account. Changing the plan of A-WEB packages and the period will set the license accordingly. There are different products added to the license: A-WEB, A-CHECK, etc. Each license can have one or more products and it will be set automatically by the plan and subscription.

Image of the licensing details and products for the domain in the edit domain form.

6 A-Check Dashboard

The A-Check dashboard displays the number of issues and their impact, within a time-frame. The data can be filtered by:

  • Domain name
  • Date range
  • Source (A-WEB/A-Check)
  • Impact (minor/moderate/serious/critical)
  • Category – Law regulations

This page also shows a table with detailed information grouped by issue or by filtered values.

Image of a-check dashboard showing the scanning details, issues and severity.

The graph details can be displayed in a meaningful way by clicking the Table icon in the top-right corner of the graph.

Image of a-check dashboard graphs in an accessible table style.

7 Issues Summary

Clicking the details for a specific domain and page takes you to the Issues list of the selected domain or page.

Image of the issues item list page with issues counters by domain pages.

7.1 Summary Row

The top main row allows you to filter the issues by Auto/Manual fixes, Impact/Severity, Waiting for approval, etc.

Image of the main issues page with filters and issues type.

7.2 Issues List

Issues are divided into categories identified by the accessibility guidelines.

Image of a selected issue, its details and ways to fix it.

Clicking on the issue will show more information on the right panel.

7.3 AutoFix

This section gives instructions on the automatic fix created by the accessibility engine and a new popup link, which shows the new patch injected into the source code.

Image of an issue AutoFix display.
Image of an issue AutoFix, before and after comparison.

7.4 Path

The path leads to the source element by its selector.

7.5 Element Code

The element shows the original element in source code.

7.6 Fix Instructions

Information on how to fix the issue in the source code and related guidelines and rules, which identify the issue.

7.7 Actions

The following buttons appear at the top of the right panel and give ways to handle the issue:

  • Fix: Allows you to fix an issue through the following methods:
    • Code Editor: Using the code editor will open a new window for writing code in TypeScript, based on the jQuery library and CSS styles. The code editor uses IntelliSense for ease of use and supplies several Make-Sense libraries for writing standard and global code.
    • • A patch is created for a specific element by its selector and its page URL. The selector can be changed to group multiple issues of the same type or create a more generic selector. validating for a page can be overridden to make a patch apply to the entire domain.Image of the platform code editor for writing patches for selected issues.
    • Input Text: Text issues can be fixed by entering the missing text in a designated field. If more than one language is configured for the specific domain, a new field is created for each language to fill.
    • Filling the text creates the necessary code behind the scenes (the actual code is displayed in the TypeScript tab).Image of an example of automatic typescript code created using the built-in wizards.
    • Wizards: The wizard enables back office users without knowledge in coding to fix generic issues.
      • Ignore . Clicking Ignore for an issue signals to the system that the issue is known and considered as the desired outcome. The system stops alerting about the issue until the next detection.
      • Disable . Visible only on AutoFix. Clicking Disable signals to the A-WEB engine to stop auto-fixing the issue on the next run.
      • Enable . Re-enable a disabled fix.
      • Approve . Once a patch is created, an approval is necessary to use it as a patch and published to the virtual layer. (This requires special permissions.)

Once a fix is created and Saved is clicked, a new tag will appear next to it, indicating that the fix is waiting for approval. Only users with admin rights will be allowed to approve a fix. An approved fix is ready to be published to the customer website using a bundle.

Image of the main issues item list after creating a patch showing special tags and more filters.

8 Fixes

All fixes (patches and layout) will appear in the Fixes section. You can edit and approve/publish fixes directly on this page. A layout fix can be created in this section for more general issues (such as navigation, keyboard traps and other issues which can’t be identified by an automated tool).

Image of the fixes section of the menu. showing all the layout patches and patches created for specific issues.

9 Bundles

Bundles are created to group multiple fixes for publishing. Only layout fixes or fixes not related to selectors and pages should be bundled. bundles can be configured to affect the entire domain, a specific page or a group of pages by providing a regular expression combination.

Image of the Bundles section in the menu. Creating new bundle and its details.
Image of adding fixes to a bundle.
Image of complete bundle ready for publish to the customer website.

Once a bundle is published, it is sent to A-WEB as a confirmed patch. From that point on, users using the domain will not face the issues that were fixed in that bundle.

10 Accessibility Development Steps

Working with the platform allows you to make web sites accessible in a simple and easy way and with just a few steps, but the power of the platform lies deeper than just writing code.

10.1 Setting the Domain to Work in Development Mode

While a website is live, accessibility must not be changed or tampered with. The production environment also has caching and changes are not reflected on the client side. To build new patches, update existing patches, or debug a website, work in Development Mode. Setting a domain to work in Development Mode is as easy as clicking a field. The domain configuration has the option to set it to work in Development Mode.

Image of setting a domain to work in development mode.

10.2 Reflecting the Changes on the Client Side

While the domain is in Development Mode, you can debug the code changes on the end user browser, without publishing the bundle or patch. Adding a parameter to the website URL is all you need to do to make the accessibility engine download the patches and debug the new code at run-time. Concatenating the parameter with the value “TRUE” to the website URL will use the patches on the client side. For example: http://mk-sense.com?mk_dev=true Once the development phase is complete, the Development Mode must be turned off and the bundle must be published.

11 SEO Dashboard

The SEO section, just like accessibility, monitors the customer website for SEO issues and violations. The issues are displayed in the SEO dashboard and the SEO issues section for more detailed information. The SEO issues are fixed in the same way we fix accessibility issues, by using a virtual layer and creating patches.

Image of the SEO dashboard. showing SEO summary by specific filters.