Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Reactive Web Apps

 

 

OutSystems

Testing and fixing accessibility issues

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • During the development of an accessible application, OutSystems recommends you to test for accessibility issues and fix them early. This sections shows a quick example of using the WAVE accessibility evaluation tool, identifying issues, and addressing them in Service Studio. WAVE shows issues as visual markers on the page, which lets you focus on the low-code approach of the app development. You can also audit your apps with Lighthouse, integrated in the Chrome DevTools.

    Build a page

    In Service Studio create a screen, publish the app, and open it in your browser. Here is an example of a simple screen with a title and an image.

    A sample page

    Test for accessibility

    To test your page for accessibility, perform the following steps:

    1. Load the page.
    2. Click on the WAVE extension (1) to start testing. The existing issues show on top of the page elements.
    3. Click an error marker (2) to open a pop-up box with the notes. In this example, a page title is missing.
    4. Click the reference link (3) to see which success criteria the issue affects. In this example it's the "2.4.2 Page Titled" rule, which is the Level A success criteria (4).

    Testing the accessibility

    There are other issues with this page. There is no heading, and the image is missing the alternative text.

    The accessibility analysis shows page structural elements and ARIA annotation. These elements and annotations come from the OutSystems UI by default.

    Fix the accessibility issues

    To fix all the issues from this example, follow the instructions in the Basic accessibility settings section. After some quick edits, the page now has a title, the language definition, and the image has an alt text. If you check the page again, the report shows zero errors.

    Fixing the accessibility issues