Test the accessibility of a web mobile app

This article explains how to use the sample Java utility to test the accessibility of a web mobile app screen.

  1. Log in to your Perfecto cloud and open the device in the Manual Testing view.
  2. Launch your web application in a Safari (iOS) or Chrome (Android) browser and navigate to the page you want to test.
  3. In the Java utility, provide the following required details:
    • Perfecto Cloud URL: Your cloud URL, for example https://demo.app.perfectomobile.com

    • User Security Token: Your security token for the Perfecto cloud

      1. In the Perfecto UI at <YourCloud>.app.perfectomobile.com (where YourCloud is your actual cloud name, such as mobilecloud), click your user name and select My security token. 

      2. In the My security token form, click Generate Security Token.

      3. Click Copy to clipboard. Then paste it into any scripts that you want to run with Perfecto. 

      4. Click Close.

    • Device Name/UUID: The unique ID of the device on which you want to perform accessibility tests

    • WithSessionID: Select to prepare for session sharing

    • Device Session ID: The session ID as copied from the device in the Perfecto cloud. For more information, see Share a session with an IDE script.

    • Output Folder: The local folder where you want store accessibility reports.

    • Device option selected

    • Application type: One of the following:

      • Axe (Mobile Web): Recommended. Select if your web application is scrollable or if any content is available at the bottom of the current page. This option uses the AXE Deque solution to run accessibility tests.

      • Perfecto (Native/Hybrid/Mobile Web): Select if your web application is a single page and not scrollable. This option uses the Perfecto Accessibility solution to run your tests. This option treats the Chrome browser as a hybrid app and scans accessibility in both the Native and web portion of the application. If you use this option, ignore any violations reported for the native portion of the app. 

    • App Identifier: Provide only if you use the Perfecto option, as per device OS (with Axe, the app identifier is disabled):
      • Android: com.android.chrome
      • iOS: com.apple.mobilesafari
    • Proxy: Select if you need to connect through a proxy to enable the Proxy Host and Proxy Port fields. Then provide the required information.
      If your proxy requires credentials, provide them in the User Name and Password fields.

  4. Click Run, and then click OK. The utility now runs the script in the background to generate the report.  

    The progress bar indicates the current execution, and you can see Axe highlights in the opened device instance.

  5. Repeat step 4 for each screen you want to test. Make sure to update the Current Screen Name field each time. For example, if you log into the Expense Tracker app and run tests on the Home page, you can enter AndroidExpenseTrackerHomePage as a screen name, as shown in the following image.

     

    Note:

    With session sharing, accessibility reports will be generated only after closing the device. You can navigate to the different pages, run accessibility tests with unique screen names, and generate reports when the execution has finished for all pages.

  6. To generate the accessibility report:
    1. Close the device.
    2. Click Generate Report to download the accessibility report.

    3. To confirm that the device is closed, click Yes.

      The Java utility automatically downloads the accessibility reports with the values provided in the Current Screen Name field into the given output directory. When the report generation is complete, a confirmation message displays.

  7. Navigate to the output folder. For each app screen tested, the folder should include a dedicated subfolder.

    Each subfolder contains:

    • The PerfectoReport.txt file, which includes a link to the Single Test Report in the Perfecto UI, where you can also download the Assertions report
    • The WebAccessibilityReport.pdf file, also called the Perfecto Assertion report, which includes all assertions

    • The violations.txt file, which consolidates all violations

  8. To download the accessibility report from Perfecto Smart Reporting, navigate to the link included in the PerfectoReport.txt file.

    The following image shows consolidated executions in the Report Library.

Sample report

Following is an extract from the sample Axe Accessibility report of the Web Expense Tracker Login page with interpretations for Android and iOS, created using the Axe option. The Violations.txt file created for each execution includes the link to the STR in the Perfecto Report Library along with consolidated validations.

The result interpretation is the same for the Perfecto and Axe options.

Copy 
Error 1
Impact: critical; Rule ID: image-alt
; Summary: Fix any of the following:
  Element does not have an alt attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute or the title attribute is empty
  Element's default semantics were not overridden with role="presentation"  Element's default semantics were not overridden with role="none"; Selector:    .ion-color-primary.ion-color[color="primary"] > img
 HTML:        <img _ngcontent-c1="" height="45" src="assets/images/perfecto-logo.png">Error 2
Impact: moderate; Rule ID: landmark-one-main
; Summary: Fix all of the following:
  Document does not have a main landmark
; Selector:    html
 HTML:        <html lang="en" class="plt-android plt-phablet plt-mobile md" mode="md">

For information on Axe Accessibility rules regarding the reported violations, see this List of axe 4.1 Rules.