Overview of implementation details A-Z

Automated headings set by Intrexx

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

Establish relationship of form element and label with "aria-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.

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"

   

Relationship between form element and label

One important aspect of accessibility is the correct relationship between input or form fields and their labels.

(The terms caption, label, title, or field title are often used synonymously)

While for sighted people, the relationship between field and label is obvious by their spatial proximity, for blind people this relationship must be programmatically producible. The source code must be interpreted in the browser for assistive technologies to convey this relationship to the blind person.

(This aspect of accessibility is less related to the visual structure of a page and more to the relationship between elements)

9.1.3.1h Labeling of form elements programmatically determinable

Elements with labels

If you use elements in Intrexx that can have a label, then you always have the option of creating the label at the same time as the element. The label is then automatically associated with the element and the relationship can be determined by assistive technologies.

Example - Input field

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

Example - Form Wizard

When you use the Form Wizard, the title (label) and its data field are displayed.

After the form wizard is closed, the relationship between the label and field is signaled by visual proximity in the application designer.

CAPTCHAs

9.1.1.1d Alternatives to CAPTCHAs

Currently, the CAPTCHA element in Intrexx does not have an accessible design. If you need to use CAPTCHAS, you should implement a text-based alternative.

Structure data tables correctly

9.1.3.1e Data tables structured correctly

9.1.3.1f Table cell assignment

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

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

Duration of the portal session

You can set the duration of the portal session in the portal properties. You can access this via "'Portal' main menu> Portal properties > Start parameters".

Before the session duration expires, the portal user is notified by a dialog and can extend the session further.

More information

Portal properties: Start parameters

Element - Diagram

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

If you do not manually enter an ARIA role, the "graphics-datachart" role is stored in the published application page by default.

More information

Chart

Element - Button

9.1.1.1a Alternative texts for control elements

Choose between three types of button when creating a button:

• Button

• Text

• Image

In terms of accessibility, the "Image" option is especially important.

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

In both cases it is necessary to save a text alternative. This text alternative should not only repeat the text on the button or indicate the meaning of the symbol. Rather, the action that is initiated by pressing the button should be described.

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

Step-by-step guide

To add a text alternative to an "Image" button, proceed as follows:

1. Select the "Image" button.

   

2. In the Navigation pane, switch to the "Image" item.

   

   Note that the text stored in the "Title" field is not used as a text alternative. It is not interpreted by screen readers.

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

   The "Text alternative" dialog box is displayed.

   

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

More information

Button

Give field groupings (fieldset) a heading

You can group elements and give the grouping a heading.

Step-by-step guide

1. Add the "Grouping" element to the page.

2. Switch to the "Options" tab.

3. Select the value "Fieldset (e.g. group of input elements)" in the "HTML element" selection box.

4. Activate the "Show title" checkbox.

   

5. Switch to the "View" tab.

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

   

   The "Select Style Class" dialog box is displayed.

   

7. Select the style class you want to use.

8. Click on "OK".

Set focus - Input fields and buttons

You can give focus to an element when opening the page via the "Edit"/Set focus main menu or the context menu input fields and "Button" or "Text" type buttons. One or more elements on the page can be configured with "Set focus". When the page is opened, the focus is set to the first visible element.

Set focus - Pages

You can define that a page should not set a focus in the Page properties. If "Set focus" has not been defined for any elements on a page, the initially focused element on the page is determined automatically. The following exceptions apply:

• The focus is not set on fields in free layout tables

• The focus is not set within portlets

• If a page has a tab index, the focus is set on the element with "Tab index 1”.

Free-layout table as list

Note that the use of the "Free-layout table" element adds a certain degree of complexity to a page and therefore does not fully comply with the principle of making an application as easy as possible (see Make your applications as simple as possible).

You have the option of displaying the "Free-layout table" element as an unordered list on a page.

Step-by-step guide

1. Switch to the "Options" tab.

2. Select the value "Unordered List (e.g. list of view elements)" in the selection field "Display records".

   

Note that the included page does not have a heading with an H1 tag, as the page containing the free-layout table would then contain two H1 tags.

The embedded page should be responsive.

More information

Free layout table

Foreign language text

Words or passages in other languages must be marked with a lang attribute. So lang="en" must be inserted for an English language text. This is the only way to ensure that the passage is read with English pronunciation to a blind user. Other foreign language words should also be distinguished.

You can use any HTML structural elements in the static text field element.

Home logo

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

Step-by-step guide

To manually adjust the link text for the home logo, do the following:

1. Start the "Design" module.

2. Open the layout.

3. In the tree view, select the element "Link" ("Surrounding Container > Container Header > Grid Header > Column Homelink / Actioncontrols")

   

   In Element Settings, the "Link title" field is displayed.

4. Adjust the link text.

Table icons

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

Text alternatives for the icons used in tables must also be saved.

Step-by-step guide

To add a text alternative to an icon in a table, proceed as follows:

1. Select the icon to add a text alternative.

   

2. Click on the icon.

   The Image button dialog box appears.

3. Select the "Image" item in the Navigation pane.

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

   

   The "Text alternative" dialog box is displayed.

   

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. The main landmarks include banners, navigation, main and content info.

When using the Accessible Layout, key landmarks are preconfigured.

You can also assign landmarks manually.

Step-by-step guide

1. Start the "Design" module.

2. Open the layout you want to use.

3. In the tree view, select the element being assigned a landmark ().

4. Select this landmark in the "Role" selection field in the element settings ().

   

More information

Design - WAI-Aria roles

Listbox

Create lists with the "list field" element.

We recommend using the "Standard" selection.

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

If you select the value "Unordered List (e.g. list of view elements)" for the HTML element, then you must select the ARIA attribute "aria-labelledby" in the "Accessibility" tab and save the ID of its text field. That ensures the title is read out loud correctly.

For detailed information on how to use "aria-labelledby", see the section ARIA attribute "labelledby".

More information

Drop-down list / Listbox

Decorative images (layout graphics)

9.1.1.1c Empty alt attributes for layout graphics

Decorative images or decorative pictures do not have an informative function and should not contain text alternatives. Decorative images can include spacers, color areas, patterns or purely decorative graphics, for example. An empty alt attribute should be used to mark decorative images.

Any decorative images used by Intrexx are marked with an empty alt attribute. If you want to use other decorative images, be careful not to use text alternatives.

Adapt page title for the portal home page

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

It is helpful to give the portal home page a title that is meaningful and suitable for screen readers, such as "Home - Intrexx".

Step-by-step guide

To adapt the page title for the portal home page, do the following:

1. Start the "Edit menu structure..." dialog box (Main menu item "Portal" > Edit menu structure...").

2. In the portal menu, first create a new empty folder.

3. Assign a descriptive title to the folder, e.g. "Homepage”.

   

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

4. Grant the user "Anonymous" rights to this page.

   

   Since the folder does not contain any applications, the page works like a "Home" button in portal mode. The appearance of the page can be further adapted, for example, through a portal page.

More information

Editing the menu structure of the portal

Info and Relationships (structure pages and content)

Create headings with "Static text" element

You can put headings on a page by placing the static text element on the page.

Step-by-step guide

1. Switch to the "View" tab.

2. Enter one of the values from "Text_H1" to "Text_H6" in the "Style class" input field.

   These correspond to the html tags <h1> to <h6>.

   Or

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

   

   The "Select Style Class" dialog box is displayed.

   

4. Select the style class you want to use.

5. Click on "OK".