Assign ARIA roles and attributes

You can assign ARIA roles and attributes for each 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. The following points in particular should be considered before use:

  • Generally, you should use native HTML elements with appropriate semantics instead of ARIA roles and attributes, if available. Example: To display a paragraph on a page, you should use <p> and not <div role="paragraph">.

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

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

More information

Requirements

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

The Accessibility tab is then displayed in the elements.

Assign ARIA roles and attributes

Step-by-step guide

To assign ARIA roles and attributes, do the following:

  1. Open the element to assign ARIA roles and attributes.

  2. Switch to the "Accessibility" tab.

  3. Select the value you want to use in the "ARIA Role" selection field.

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

    A drop-down list with ARIA attributes is displayed.

  5. Select the ARIA attribute you want to use.

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

    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 on "OK".

ARIA attribute "labelledby"

In Intrexx, you have the option of manually establishing the relationship of a (form) element and label with 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 you to want use for the reference.

Note that you can determine the name in Expert mode only.

Step 1: Determine the name of the label

Step-by-step guide

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

  1. Select the page where the element is located.

  2. Right-click on it.

  3. Select the "Show elements" option.

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

  5. Right-click on it.

  6. Select the "Details" option.

    The "Details" dialog box is displayed.

    The name is displayed.

Step 2: Enter names

Step-by-step guide

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. Switch to the "Accessibility" tab.

  3. Click on the icon.

    A new empty record for ARIA attributes is displayed.

  4. Select the value "aria-labelledby" in the "ARIA Attributes" drop-down list.

  5. Enter the following in the Value field: "ID_" + 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)