Overview of detailed implementation A–Z

Headings automated by Intrexx

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

Create relationship between form element and label via "aria-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.

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"

   

Reference to form element and label

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

(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 can be determined programmatically

Elements with labels

If you use elements in Intrexx that can have a label, then you always have the option of creating this label together with 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 "Create 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 for CAPTCHAs

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

Build data tables correctly

9.1.3.1e Correct structure of data tables

9.1.3.1f Assignment of table cells

If you use the "View table" element in Intrexx, the corresponding table will automatically be marked with the appropriate HTML tags.

Make sure you give the view table a title and activate the "Show title" checkbox.

Duration of the portal session

You can set the duration of the portal session in Portal properties. You can access these via "Main menu 'Portal' > 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 role "graphics-datachart" is stored in the published application page by default.

More information

Chart

Element – Button

9.1.1.1a Alternative texts for operating elements

Choose between three types of button when creating a button:

• Button

• Text

• Image

The "Image" option is particularly important in the context of accessibility.

	For example, if you use an image with the text "New", a screen reader will not be able to 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 type, proceed as follows:

1. Select the "Image" button type.

   

2. Switch to the "Image" entry in the navigation area.

   

   Please note that the text entered in the "Title" field is not used as an alternative text. 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. In the "HTML element" selection field, select the value "Fieldset (e.g. group of input elements)".

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

Via the main menu "Edit" / Set focus or via the context menu, input fields and buttons with the type "Button" or "Text" can be given the focus when the page is loaded. One or more elements of the page can be set with "Set focus". When the page is loaded, the focus is set to the first visible element.

Set focus – Pages

In the page properties, you can specify that the page does not set a focus. If "Set focus" is not set for any element on a page, the first focusable element on the page is automatically determined and the focus is set there. The following exceptions apply:

• The focus is not set on fields in free-form tables

• The focus is not set within portlets

• On pages with a tab index, the focus is set on the element with tab index 1

Free-layout table as list

Please note that the use of the "Freely designed table" element adds a certain degree of complexity to a page and therefore does not fully comply with the principle of designing an application as simply as possible (see Design your applications as simply as possible).

You have the option of displaying the "Freely designed 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 "Display data sets" selection field.

   

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. If the text is in English, for example, lang="en" must be inserted. 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.

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 portal. It is usually linked to the portal home page. It is helpful to include this information in the link text. For example, a link text could read: "Intrexx - To homepage".

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 structure view, select the "Link" element ("Surrounding Container > Container Header > Grid Header > Homelink / Actioncontrols column")

   

   The "Link title" field is displayed in the element settings.

4. Adjust the link text.

Icons in tables

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" entry in the navigation area.

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 structure view, select the element to which you want to assign a landmark ().

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

   

More information

Design - WAI-Aria roles

Listbox

You can create lists with the "List field" element.

We recommend using the "Standard" selection.

Selection "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 associated text field. That ensures the title is read out loud correctly.

Detailed information on the use of "aria-labelledby" can be found in section ARIA attribute "labelledby".

More information

Drop-down list / List box

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 additional decorative images, make sure that you do not use text alternatives.

Customize page title for the portal homepage

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

It is helpful to give the portal start page a descriptive title that is suitable for screen readers, such as "Start page - 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. "Home page".

   

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

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

   

   As the folder does not contain any applications, the page functions 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 place 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".