Info and Relationships (structure pages and content)

(A)

1.3.1 Information and relationships

1.3.1 Info and Relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

Description

The design and structure of a portal or application page helps people to understand its functionality and operation. Organizing portal and application pages by headings helps users get a feel for how the page is organized.

Grouping content or fields is also helpful.

Just as with images and other non-textual elements, the page structure is not visually perceptible to blind people. Therefore, it is necessary for a page to have markers that make this structure accessible to screen readers. This ensures that the site is accessible to people with visual impairments.

By adding headings and structuring the page, people with visual impairments can get a good overview of the content and understand the relationships between the content based on the section headings.

It is crucial that headings are actually tagged with the correct HTML tags, as screen readers analyze source code to determine the structure of a page and then make it accessible.

If the underlying code for the headings of a page is correct, users of screen readers can also benefit from the headings. Screen reader users can navigate a page based on headings, listen to a list of all headings, and jump to any heading they want, to begin reading at that point. Screen readers can use headers to skip repetitive blocks of content such as headers, menus, and sidebars.

Relevance and applicability

This guideline is relevant when implementing accessibility for your portal. It is one of the best practicesHow to make your pages accessible - Best practices).

General implementation

  • Arrange the headings from <h1> to <h6. Use headings hierarchically, with <h1> representing the most important idea on the page and subsections organized with <h2> level headings. These subsections can in turn be structured with headings of level <h3>, etc.

  • Do not select heading layers according to their appearance. Select the appropriate heading rank in the hierarchy.

  • Do not use a bold font instead of a heading. One of the most common accessibility mistakes is using bold text instead of proper heading formatting. Although, visually the text looks like a heading, the underlying HTML code is not properly tagged, so screen reader users cannot benefit from it.

Detailed implementation - Headings

9.1.3.1a HTML structural elements for headings

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

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

Detailed implementation - Lists

9.1.3.1b HTML structural elements for lists

Lists are another element that helps to structure pages. For screen readers to handle lists properly, proper markup with HTML structural elements (ul, ol, and so on) is crucial.

Below, you will find some notes on elements used to create lists in Intrexx.

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

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

Detailed implementation - Tables

Tables are another way to structure a page. Again, proper markup with HTML structural elements is critical for assistive technologies to handle tables properly.

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.

ARIA attribute "aria-label" for view tables

For view tables, it is helpful to use the ARIA attribute "aria-label". You can enter a text that describes the table content.

 

Detailed implementation - Other

9.1.3.1d Structured content

To ensure the accessibility of texts, they must be marked with suitable structural elements (HTML tags). This includes, for example, marking paragraphs as paragraph <p>. Do not use empty paragraphs to create spacing, such as by using the Return key several times. Blank paragraphs are also output by screen readers.

In Intrexx, the correct formatting is automatically applied. This applies both in the Intrexx Portal Manager, for example if you use the "Static text field" element, but also in the portal itself, for example if you use the "Content editor" or "Text field" elements (with TinyMCE activated).

HTML structural elements for citations

9.1.3.1c HTML structural elements for quotations

Example - Static text field

You can use all HTML structural elements in the "Static text field" element.

To do this, select the "HTML" option on the "Options" tab.

Select (Title).

You can now enter text with the desired HTML structural elements in the "Title" input field.

The text is displayed accordingly on the portal or application page.

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.

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.

Assign a field title (label) to an element retroactively

You can choose not to create an associated field title when creating an element.

To assign a field title (label) retroactively, proceed as follows:

  1. Create a static text field.

  2. Select the static text field and the element to which you want to assign it as a field title.

  3. Right click on it.

  4. Click on the "Assign label" menu item.

    The context menu is no longer displayed.

    You have assigned a field title (label) to an element.

Elements that are not "input elements" are not given a label by Intrexx. For these elements, it may be useful to use an "aria-labelledby attribute". See section Create relationship between form element and label via "aria-labelledby")

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.

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"