Information and Relationships (Structuring Pages and Content)

(A)

1.3.1 Information and Relationships

1.3.1 Information and Relationships

Information, structure, and relationships conveyed through the representation can be determined by software or are available in text form.

Description

The layout and structure of a portal or application page are very helpful in understanding its functionality and how to use it. Using headings to structure portal and application pages helps users get a sense of how the page is organized.

It's also helpful to group content or fields.

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 include markup that makes this structure accessible to screen readers. This ensures that the page is accessible to people with visual impairments.

By adding headings and structuring the page, people with visual impairments can use the headings of the individual sections to get a good overview of the content and understand the relationships between the different parts of the content.

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

If the underlying code for a page's headings is correct, screen reader users can also benefit from the headings. Screen reader users can navigate a page using the headings, listen to a list of all headings, and jump to a specific heading to begin reading from that point. Screen readers can use headings 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 considered one of the best practices (How to Make Your Web Pages Accessible - Best Practices).

General Implementation

  • Arrange the headings from <h1> to <h6>. Use headings hierarchically, with the <h1> representing the main idea of the page and the subsections organized using headings at the <h2> level. These subsections can, in turn, be organized using <h3>-level headings, and so on.

  • Do not choose heading levels based on their appearance. Select the appropriate heading level in the hierarchy.

  • Do not use bold type in place of a heading. One of the most common accessibility mistakes is using bold text instead of proper heading formatting. Although the text looks like a heading, the underlying HTML code is not properly marked up, so users of screen readers cannot benefit from it.

Implementation in Detail - Headings

9.1.3.1a HTML Structural Elements for Headings

Headings Automatically 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.

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 on the pencil icon. (Do not click on the down arrow icon)

    The "Select Style Class" dialog box appears.

  4. Select the style class you want to use.

  5. Click "OK."

Give field groupings (fieldset) headings

You can group elements and provide the grouping with a heading.

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 on the pencil icon. (Do not click on the down arrow icon)

    The "Select Style Class" dialog box appears.

  7. Select the style class you want to use.

  8. Click "OK."

Implementation in Detail - Lists

9.1.3.1b HTML Structural Elements for Lists

Lists are another element that helps with structuring pages. To ensure that screen readers can handle lists effectively, it is essential to use the correct HTML structural elements (ul, ol, and so on).

Below are some tips on the elements you can use to create lists in Intrexx.

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. That ensures the title is read out loud correctly.

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

More Information

Drop-down list / List box

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

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

Freely Formatted Table

Implementation in Detail - Tables

Another way to structure a page is to use tables. Here, too, proper markup using HTML structural elements is crucial to ensure that assistive technologies can handle tables effectively.

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.

ARIA "aria-label" attribute 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.

 

Implementation in Detail - Additional Information

9.1.3.1d Structured Content

To ensure that text is accessible, it must be marked up with appropriate structural elements (HTML tags). This includes, for example, marking paragraphs as <p> tags. Do not use blank paragraphs to create spacing, such as by pressing the Return key multiple times. Screen readers also read out empty paragraphs.

Intrexx automatically applies the correct formatting. This applies both in Intrexx Portal Manager—for example, when you use the "Static Text Field" element—and in the portal itself, for example, when you use the "Content Editor" or "Text Field" elements (with TinyMCE enabled).

HTML structural elements for citations

9.1.3.1c HTML Structural Elements for Citations

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.

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 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 a form element and a label

An important aspect of accessibility is ensuring the correct relationship between input fields 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 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 the relationship can be determined by assistive technologies.

Example: Input field

When creating an input field, select 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.

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.

  4. Click the "Assign Label" menu item.

    The context menu is no longer displayed.

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

Intrexx does not assign labels to elements that are not "input elements." For these elements, it may be useful to use an "aria-labelledby" attribute. (See the section Establishing a Relationship Between a Form Element and a Label Using "aria-labelledby")

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

In Intrexx, you have the option of manually establishing the relationship of a (form) element and 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.

Please note that you can only determine the name in Expert Mode.

Step 1: Determine the label's name

Step-by-Step

To determine the name of an element, proceed as follows:

  1. Select the page where the element is located.

  2. Right-click.

  3. Select the "Show Elements" option.

  4. Select the element whose name you want to determine.

  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 establish the reference to another element, proceed as follows:

  1. Open the element where you want to save the reference to another element.

  2. Go to the "Accessibility" tab.

  3. Click the " " icon.

    A new empty record for ARIA attributes is displayed.

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