Minimum Target Size

In accordance with the WCAG 2.2 Target Size Criterion 2.5.8, application developers have to ensure that targets meet a minimum size or have sufficient spacing around them. This helps avoid cases where users try to activate an interactive element but instead accidentally activate another element.

• The size of the target for pointer inputs is at least 24 by 24 CSS pixels.
• Position any undersized targets (those less than 24 by 24 CSS pixels) carefully. Ensure that if you center a 24 CSS pixel diameter circle on the bounding box of each target, the circles don't intersect with another target or with the circle of another undersized target.

Controls Displayed as Links

The following list of controls can display links in different scenarios:

• sap.m.Link
• sap.m.ObjectStatus
• sap.m.ObjectNumber
• sap.m.ObjectIdentifier
• sap.m.ObjectMarker
• sap.m.ObjectAttribute

Inline Display

The link is displayed as part of a sentence or its size is limited by the line-height of the surrounding text.

This is the default scenario and no further actions are necessary. For example:

<FormattedText
	htmlText="Lorem %%0 dolor sit amet, sed diam nonumy eirmod tempor invidunt ut labore et %%1 magna aliquyam erat, sed diam voluptua."
>
	<controls>
		<Link href="https://www.sap.com/" text="home page" />
		<Link href="https://www.sap.com/" text="home page" />
	</controls>
</FormattedText>
			

Display as Overlay

The link is displayed as an overlay on top of other interactive parts of the page and needs an additional invisible active touch area.

For example, in the following snippet we've increased the active touch area of the links in the context of a sap.m.List by using the ReactiveAreaMode property:

<List mode="SingleSelect" includeItemInSelection="true">
	<CustomListItem>
		<l:VerticalLayout class="sapUiSmallMargin">
			<Text text="Notebook Basic 15" />
				<ObjectIdentifier
				reactiveAreaMode="Overlay"
				title="HH-1000"
				titleActive="true"
				titlePress="onObjectIdentifierPress"
			/>
		</l:VerticalLayout>
	</CustomListItem>
	<CustomListItem>
		<l:VerticalLayout class="sapUiSmallMargin">
			<Text text="Notebook Basic 16" />
			<ObjectIdentifier
				reactiveAreaMode="Overlay"
				title="HH-1001"
				titleActive="true"
				titlePress="onObjectIdentifierPress"
			/>
		</l:VerticalLayout>
	</CustomListItem>
	<CustomListItem>
		<l:VerticalLayout class="sapUiSmallMargin">
			<Text text="Notebook Basic 17" />
			<ObjectIdentifier
				reactiveAreaMode="Overlay"
				title="HH-1002"
				titleActive="true"
				titlePress="onObjectIdentifierPress"
			>
		</l:VerticalLayout>
	</CustomListItem>
</List>
			

Display with Spacing

Links with dimensions less than 24 X 24 CSS pixels should be positioned carefilly. Make sure that every interactive element has enough space around it to separate it from other interactive elements.

For example, in the following snippet we've increased the horizontal spacing between the links in the context of a sap.m.OverflowToolbar by providing additional left and right margins and with the help of the sapUiTinyMarginBeginEnd class:

<OverflowToolbar>
	<ObjectIdentifier
		class="sapUiTinyMarginBeginEnd"
		titleActive="true"
		title="HT-2001"
		titlePress="onObjectIdentifierPress"
	/>
	<Link
		class="sapUiTinyMarginBeginEnd"
		text="10 Portable DVD player"
		press="onLinkPress"
	/>
	<ObjectStatus
		class="sapUiTinyMarginBeginEnd"
		active="true"
		state="Success"
		text="Product Shipped"
		icon="sap-icon://sys-enter-2"
		press="onObjectStatusPress"
	/>
	<ObjectNumber
		class="sapUiTinyMarginBeginEnd"
		active="true"
		number="150"
		state="Success"
		unit="EUR"
		press="onObjectNumberPress"
	/>
</OverflowToolbar>
			

<Graph id="graph">
				

this.byId("graph").attachGraphReady(function() {
	this.zoom({
		zoomLevel: 1.25
	});
});