Skip to content

Latest commit

 

History

History
107 lines (67 loc) · 3.75 KB

Labeling_and_Tooltips_329a029.md

File metadata and controls

107 lines (67 loc) · 3.75 KB
loio
329a029f39e249a1bf89e3ffc006c8e1

view on: demo kit nightly build | demo kit latest release

Labeling and Tooltips

The following guidelines help you properly label your controls in order to have good accessibility.

General Considerations

Top 5 things to do for better screen reader support for labels

  • Label all elements and element containers correctly and completely.

  • Provide text alternatives for visual labels

    Use tooltips only in rare cases. They should not be used as a replacement for a label. For more information, see Using Tooltips in the Fiori Guidelines.

  • Use the alt attribute for images

  • Describe controls and give additional information as part of the UI

    Use ariaDescribedBy where needed.

  • Identify regions correctly according to their purpose.

    Use containers with a correct meaning and Landmark roles.

  • Provide accessible alternatives and describe how to use them (for example in the documentation of the application).

Rules and Guidelines for Labeling and Tooltips

  • Non-decorative sap.m.Image/sap.ui.core.Icon should provide a meaningful alternative explanation in the alt property.

    Example:

    <Image id="image_not_decorative" src="IMAGE_PATH" alt="This is an image showing an elephant" decorative=false>

  • Interactive sap.m.Image/sap.ui.core.Icon (that has a press handler) should not be decorative.

    Example:

    <Image src="IMAGE_PATH" alt="This is an image with a press handler" decorative=false press=onImagePress>

  • Icon-only sap.m.Button should have a tooltip.

    Example:

    <Button icon="sap-icon://action" press="onPress" tooltip="Action Name" ariaLabelledBy="actionButtonLabel"/>

  • Button that has a text, should not have a tooltip.

    Example:

    <Button text="Default" press="onPress" />

  • Labels should not have a tooltip, as it could lead to ambiguity. For more information, see Firoi Guidelines for Using Tooltips.

  • Input elements should have labels. Every input needs a label for its purpose. Even if the app doesn't include one, you can set one in sap.ui.core.InvisibleText. The placeholder text should not be used as a label.

  • Tables should have titles. Tables with hidden titles or in containers with titles (for example,single tables in tab strip panels) should be labeled with sap.ui.core.InvisibleText in combination with ariaLabelledBy.

  • ariaLabelledBy and ariaDescribedBy associations should point to existing DOM elements.

    Example:

     <Page title="Page">
	<content>   
		<Button text="Home" ariaLabelledBy="invisibleId"/>   
		<core:InvisibleText id="invisibleId" text="I am a hidden label"/>  
	</content> 
</Page>

  • Labels should be connected with the labelled elements via labelfor.

    Example:

    <Label text="Name" labelFor="I1"> 
<Input id="I1">

Note:

If you want to enlarge the size of the standard tooltips, you need to change the system font size. Tooltips are rendered by the browser using native window API and thus their size cannot be influenced by the OpenUI5 framework.