HTMLB Library - Overview

The Layout and Invisible Controls | The Visible Controls | Accessibility

The HTMLB library is one, we present a short overview of the controls provided by this library. For detailed information, see the SAP Portals HTMLB Guidelines. We also shortly address accessibility issues with respect to using the HTMLB library.

 

The Layout and Invisible Controls

Invisible controls are needed to create the framework for an iView's content (not the tray framework that contains the iView). For example, the page control creates an HTML page framework for the iView that includes everything else; form elements, on the other hand, have to be included in a form control. Layout controls, such as the grid layout, help to arrange (visible) controls within an iView's content area.

Technical (Framework) Controls

The following controls are needed for technical reasons in order to create an iView:

  • Page, Document, Content, Form

Layout Controls

The following controls can be used to create a layout for an iView.

  • Flow Layout, Grid Layout

While the flow layout is used for arranging elements one after the other (with wrapping), the grid layout creates a grid structure that is useful for designing forms. Layout controls can be nested to allow for more complex layouts.

Note: For details see the SAP Portals HTMLB Guidelines.

 

The Visible Controls

The HTMLB library provides the following controls for use in the content area of an iView:

Form Elements

  • Input Field, Label, Button

Selection

  • Radio Button (Group), Checkbox (Group), Dropdown List Box, List Box

Lists, Tables, Trees

  • Item List, Table View, Tree View

Containers

  • Group Box, Tabstrip

Text and Links

  • Text View, Text Edit, Link, Breadcrumb

Other Elements

  • File Upload, Date Navigator, Chart, Image

See page HTMLB Controls - Visual Overview for a list of images showing the most of the HTMLB controls in alphabetical order (excluding the group "other elements"). See Chart Types - Overview for an overview of the chart types that are available im HTMLB.

Note: For details see the SAP Portals HTMLB Guidelines.

 

Accessibility

Developers who use the HTMLB library as a technical basis for creating iViews can mostly rely on the accessibility services that are already provided by HTMLB.

Note: For details see the SAP Portals HTMLB Guidelines.

Descriptions

The central HTMLB rendering engine already provides general descriptions for HTMLB controls, such as the type, the state, and on-screen text. Therefore, application developers only have to complement descriptions in case that users need more specific descriptions or instructions. The descriptions written by the application developers are added to the default descriptions that are provided by the central rendering mechanism.

Examples

  • A button description has to be extended if a button opens a new window.
  • In general, a description has to be extended if a button introduces an interaction that cannot be recognized by a blind user.

Accessibility Flag

Also note that the resulting description that is sent to the users depends on the state of the accessibility flag:

  • If the accessibility flag is set, the default description is extended by the description that the application developer provided.
  • If the flag is not set only the description that the application developer provided is sent to the user.

Keyboard Accessibility

Keyboard access is handled by the HTMLB framework. All HTMLB controls that have to be accessed by the keyboard are automatically included in the tab chain (also called accessibility hierarchy).

Application developers using the HTMLB library cannot add elements to the tab chain themselves in order to make them keyboard accessible. As they cannot set HTML attributes directly, they do not have access to the tabIndex attribute of elements that determines, whether controls are included in the tab chain or not.

Input Elements and Corresponding Labels

Input elements, such as checkboxes, dropdown list boxes, input fields, radio buttons, and text edit controls need to be connected to a label, so that screen readers recognize the association of the label with the input element. Use the HTMLB label control for this purpose. The connection between a label and its corresponding input element also simplifies the interaction with the element when using the keyboard or mouse.

 

top top

Source:  SAP iView Guidelines