Detailed Overview of Implementations: A–Z

Headings Automatically Set by Intrexx

When you create a new page in Intrexx, an H1 heading with the page title is automatically assigned to it.

Establishing a Relationship Between a Form Element and a Label Using "aria-labelledby"

In Intrexx, you can manually establish a relationship between a (form) element and a 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.

Step 1: Determine the label's name

Step-by-Step

To determine the name of an element, follow these steps:

1. Select the page on which the element is located.

2. Right-click.

3. Select the "Show Items" option.

4. Select the item whose name you want to find.

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 create a reference to another element, follow these steps:

1. Open the element for which you want to store a reference to another element.

2. Go to the "Accessibility" tab.

3. Click the " " icon.

   A new, empty data set for ARIA attributes is displayed.

4. From the "ARIA Attributes" drop-down list, select "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"

   

Reference to a form element and a label

An important aspect of accessibility is ensuring the correct association between input fields or form fields and their labels.

(The terms "label," "title," or "field title" are often used interchangeably.)

While the relationship between a field and its label is obvious to sighted people due to their spatial proximity, this relationship must be established programmatically—that is, through the source code interpreted by the browser—so that assistive technologies can convey this relationship to blind users.

(This aspect of accessibility has less to do with the visual structure of a page and more to do with the relationships between elements.)

9.1.3.1h Labels of form elements can be determined programmatically

Elements with Labels

If you use elements in Intrexx that can have a label, you always have the option to create that label along with the element. The label is then automatically associated with the element, and assistive technologies can identify the relationship.

Example - Input Field

When creating an input field, select the "Generate field title" checkbox. The field title is used as the label for the input field.

Example - Form Wizard

When you use the Form Wizard, the label and the corresponding data field are displayed.

After closing the Form Wizard, the relationship between the label and the field is indicated in the Application Designer by their visual proximity.

CAPTCHAs

9.1.1.1d Alternatives to CAPTCHAs

The Intrexx CAPTCHA element is not yet designed to be accessible. If you need CAPTCHAs, you should implement a text-based alternative.

How to Structure Data Tables Correctly

9.1.3.1e Data Tables Structured Correctly

9.1.3.1f Assigning Table Cells

When you use the "View Table" element in Intrexx, the corresponding table is automatically marked up with the appropriate HTML tags.

Be sure to give the view table a title and select the "Show Title" checkbox.

Duration of the Portal Session

You can set the duration of the portal session. This is done in the portal properties. You can access these via "Main Menu 'Portal' > Portal Properties > Startup Parameters."

Before the set session duration expires, the portal user is notified via a dialog box and can extend the session further from there.

More Information

Portal Properties - Startup Parameters

Element - Diagram

You cannot enter a text alternative for the "Diagram" element. However, you can use ARIA roles and attributes to specify the graphic in greater detail.

If you do not manually specify an ARIA role, the "graphics-datachart" role is set by default on the published application page.

More Information

Chart

Element - Button

9.1.1.1a Alternative Text for Control Elements

When creating a button, you can choose from three button types:

• Button

• Text

• Image

When it comes to accessibility, the "Image" option is particularly important.

	For example, if you use an image with the text "New," a screen reader will not be able to identify that text.
	A picture or icon containing a symbol cannot be interpreted by a screen reader either.

In both cases, it is necessary to provide a text alternative. This alternative text should not merely repeat the text on the button or explain the meaning of the icon. Instead, the action triggered by clicking the button should be described.

For example, the text alternative could be "Create a new customer" or "Create a new project."

Step-by-Step

To add text alternative to an "Image" button, follow these steps:

1. Select the "Image" button type.

   

2. In the navigation pane, select the "Image" entry.

   

   Please note that the text entered in the "Title" field is not used as alternative text. It is not interpreted by screen readers.

3. Click the " " icon (Edit text alternative).

   The "Text Alternative" dialog box appears.

   

4. Enter the alternative text in the "Description" field.

More Information

Button

Add Headings to Fieldsets

You can group elements and add a heading to the group.

Step-by-Step

1. Insert the "Grouping" element onto the page.

2. Go to the "Options" tab.

3. In the "HTML Element" drop-down menu, select "Fieldset (e.g., group of input elements)."

4. Select the "Show Title" checkbox.

   

5. Go to the "View" tab.

6. Click the pencil icon. (Do not click the down-pointing arrow icon.)

   

   The "Select Style Class" dialog box appears.

   

7. Select the desired style class.

8. Click "OK."

Setting Focus - Input Fields and Buttons

You can set the focus on input fields and buttons of the "Button" or "Text" type when the page loads by selecting "Edit" / "Set Focus " from the main menu or using the context menu. You can use the "Set Focus" option to select one or more elements on the page. After loading, the first visible element will then receive focus.

Set Focus - Pages

In the page properties, you can specify that the page should not receive focus. If "Set Focus" is not set for any element on a page, the first focusable element on the page is automatically determined, and focus is set there. However, there are the following exceptions:

• The focus is not placed on fields in freely designed tables

• The focus is not set within portlets

• On pages with ` tabindex `, the focus is set to the element with `tabindex` 1

Freely Formatted Table as a List

Please note that using the "Custom Table" element adds a certain degree of complexity to a page and therefore does not fully comply with the principle of keeping an application as simple as possible (see Make your applications as simple as possible").

You have the option to display the "Custom Table" element as an unordered list on a page.

Step-by-Step

1. Go to the "Options" tab.

2. In the "Data Set Display" drop-down menu, select "Unordered List (e.g., list of view elements)."

   

Please note that the embedded page does not have a heading with an H1 tag, since the page containing the freely formatted table would then contain two H1 tags.

The embedded page should be responsive.

More Information

Freely Formatted Table

Text in a foreign language

Words or passages in other languages must be marked with a "lang" attribute. So, for example, if the text is in English, you must include lang="en". This is the only way to ensure that the passage is read aloud to a blind user with an English accent. Other foreign-language words should also be marked.

Here, too, you can use all HTML structural elements in the "Static Text Field" element.

Home Logo

A company logo is often found in the upper-left corner of a website. This is usually linked to the portal's home page. It's helpful to include this in the link text. For example, a link text could read: "Intrexx - Go to the Home Page."

Step-by-Step

To manually edit the link text for the home logo, follow these steps:

1. Launch the "Design" module.

2. Open the appropriate layout.

3. In the Structure view, select the "Link" element ("Enclosing Container > Container Header > Grid Header > Homelink / Action Controls Column")

   

   In the element settings, the "Link Title" field appears as " ."

4. Customize the link text.

Icons in Tables

You can use icons in tables. The magnifying glass icon and the pencil icon are frequently used.

It is also necessary to provide text alternatives for the icons used in tables.

Step-by-Step

To add a text alternative to an icon in a table, follow these steps:

1. Select the icon (image) to which you want to add a text alternative.

   

2. Click the " " icon.

   This will take you to the "Image Button" dialog box.

3. In the navigation pane, select the "Image" entry.

4. Click the " " icon (Edit text alternative).

   

   The "Text Alternative" dialog box appears.

   

5. Enter the alternative text in the "Description" field.

More Information

View Table

Landmarks

Certain areas of portal and application pages can be marked with landmarks or roles. Key landmarks include banners, navigation, the main section, and content information.

When using the accessible layout, key landmarks are preset.

You can also assign landmarks manually.

Step-by-Step

1. Launch the "Design" module.

2. Open the desired layout.

3. In the structure view, select the element to which you want to assign a landmark ().

4. In the element settings, select the desired landmark from the "Role" drop-down menu ().

   

More Information

Design - WAI-ARIA Roles

List box

You can use the "List Box" element to create lists.

We recommend using the "Standard" option.

Select "Unordered List (e.g., list of view elements)"

If you select the value "Unordered List (e.g., list of view elements)" for the HTML element, you must select the ARIA attribute "aria-labelledby" in the "Accessibility" tab and enter the ID of the corresponding text field. This ensures that the title is read aloud correctly.

For detailed information on using "aria-labelledby," see the section on ARIA "labelledby" attribute.

More Information

Drop-down list / List box

Customize the page title for the portal's home page

By default, the title of the portal home page is "Intrexx."

It is helpful to give the portal homepage a descriptive title that is suitable for screen readers, such as "Homepage - Intrexx."

Step-by-Step

To customize the page title for the portal's home page, follow these steps:

1. Open the "Edit Menu Structure..." dialog box (Main menu item "Portal" > "Edit menu structure...").

2. In the portal menu, start by creating a new empty folder.

3. Give the folder a descriptive name, such as "Home."

   

   The text entered in the "Title" field is displayed in the browser tab.

4. Grant the "Anonymous" user permissions for this page.

   

   Since the folder does not contain any applications, the page functions as a "Home" button in portal mode. The appearance of the page can be further customized, for example, via a portal page.

More Information

Edit the Portal's Menu Structure

Information and Relationships (Structuring Pages and Content)

Creating Headings with the "Static Text" Element

You can add headings to a page by placing the "Static Text" element on the page.

Step-by-Step

1. Go to the "View" tab.

2. In the "Style Class" input field, enter one of the values from "Text_H1" to "Text_H6."

   These correspond to the HTML tags <h1> through <h6>, respectively.

   Or

3. Click the pencil icon. (Do not click the down-pointing arrow icon.)

   

   The "Select Style Class" dialog box appears.

   

4. Select the desired style class.

5. Click "OK."