Assign ARIA roles and attributes

You can assign ARIA roles and attributes to any Intrexx element in the Application Designer.

Targeted Use of ARIA Roles and Attributes

The use of ARIA roles and attributes is not always necessary or appropriate. In particular, the following points should be considered during use:

  • As a general rule, you should use native HTML elements with appropriate semantics—when available—instead of ARIA roles and attributes. Example: To represent a paragraph on a page, you should use <p> rather than <div role="paragraph">.

  • ARIA roles and attributes should not be added to HTML markup if it already has the desired semantics. Example: <button role="button">.

  • ARIA roles and attributes should not be used to reinterpret HTML semantics. Example: <button role="link">

More Information

Requirement

To assign ARIA roles and attributes to elements in the Application Designer, you must select the "Enable accessibility options" checkbox under "Tools > Options > Applications."

The "Accessibility" tab will then appear in the elements.

Assign ARIA roles and attributes

Step-by-Step

To assign ARIA roles and attributes, follow these steps:

  1. Open the element for which you want to assign ARIA roles and attributes.

  2. Go to the "Accessibility" tab.

  3. Select the desired value from the "ARIA Role" drop-down menu.

  4. Click the " " icon (Add ARIA Attribute) if you want to add an ARIA attribute.

    A list of ARIA attributes is displayed.

  5. Select the desired ARIA attribute.

    You can also enter ARIA roles and attributes manually by typing them into the selection fields or by overwriting a displayed role or attribute.

    Please note that ARIA roles and attributes entered manually are not validated by Intrexx.

  6. Place the cursor in the "Value" column.

  7. Enter the value of the ARIA attribute.

  8. Click "OK."

ARIA "labelledby" attribute

In Intrexx, you have the option of manually establishing the relationship of a (form) element and label This is done using the ARIA attribute "aria-labelledby."

Step 1: Determine the name of the label you want to reference.

Step 2: Enter the name in the element from which you want to reference it.

Please note that you can only determine the name in Expert Mode.

Step 1: Determine the label's name

Step-by-Step

To determine the name of an element, proceed as follows:

  1. Select the page where the element is located.

  2. Right-click.

  3. Select the "Show Elements" option.

  4. Select the element whose name you want to determine.

  5. Right-click.

  6. Select the "Details" option.

    The "Details" dialog box appears.

    The name is displayed.

Step 2: Enter Names

Step-by-Step

To establish the reference to another element, proceed as follows:

  1. Open the element where you want to save the reference to another element.

  2. Go to the "Accessibility" tab.

  3. Click the " " icon.

    A new empty record for ARIA attributes is displayed.

  4. From the "ARIA Attributes" drop-down list, select the value "aria-labelledby."

  5. In the "Value" field, enter the following: "ID_" + the name of the element you want to reference.

    In the example shown, the value is as follows: "ID_labelcontrol64CC76C9"

More Information

Accessible Rich Internet Applications (ARIA)