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:

  • In principle, you should use native HTML elements with corresponding 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 desired semantics. Example: <button role="button">.

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

More information

Requirements

To be able to assign ARIA roles and attributes for elements in the application designer, you must activate the "Activate accessibility options" checkbox under "Extras > 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 desired value 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 This is done via 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.

Please note that you can only determine the name in expert mode.

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" selection list.

  5. Enter the following in the "Value" field: "ID_" + name of the element you wish to reference.

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

More information

Accessible Rich Internet Applications (ARIA)