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

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

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

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

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 text that describes the table's contents.

 

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

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.

Assigning a field label to an element after the fact

When creating an element, you can choose not to create an associated field title.

To assign a field label retroactively, follow these steps:

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

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