Intro

Text-heavy documents, such as end-user licensing agreements (EULA), privacy policies, or terms and conditions are displayed in apps using HTML or other forms of view. To ensure that the content of these rich text documents looks consistent across SAP iOS applications and can be understood by everyone, follow the style and accessibility guidelines below.

Example of an end user license agreement between SAP and indirect end user in compact (left) and regular width (right)

Example of an end user license agreement between SAP and indirect end user in compact (left) and regular width (right)

Anatomy

Styling Elements

Use the following styling elements for end user license agreements (EULA), privacy policies, and terms and conditions.

  • A – Heading 1: Document title
  • B – Heading 2: Subtitle
  • C – Heading 3: Section headlines
  • D – Heading 4: Document introduction
  • E – Paragraph / List: Body text

Headings

The styling pattern uses multiple heading levels to convey the document structure. People often skim content by scanning the headings, and users of assistive technologies rely heavily on headings to navigate complex content.

Heading elements are used for the title, subtitle, and section headlines, but also for the document introduction and any supplementary information.

  • You can use the introduction to explain the purpose of the document and emphasize the importance of the user’s consent.
  • Supplementary information is key information you want to make easily accessible, such as the effective date of an agreement.
information
Note that there are no titles on single consent screens. For more information, see Single User Onboarding.
  1. 1
  2. 2
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

Usage

Text Attributes

To style rich text documents consistently, apply the SAP Fiori for iOS typography and color system.

Style headings and body text as follows:
<div> <div>Level</div> <div>Use</div> <div>Font Style & Size</div> <div>Font Color</div> <div>Font Weight</div> </div> <div> <div>Heading 1</div> <div>Title</div> <div>Title 1<br>72 28pt</div> <div>Primary Label</div> <div>Black</div> </div> <div> <div>Heading 2</div> <div>Subtitle</div> <div>Title 3<br>72 20pt</div> <div>Primary Label</div> <div>Bold</div> </div> <div> <div>Heading 3</div> <div>Section Headline</div> <div>Body Bold<br>72 17pt</div> <div>Primary Label</div> <div>Bold</div> </div> <div> <div>Heading 4</div> <div>Introduction</div> <div>Body Bold<br>72 17pt</div> <div>Primary Label</div> <div>Bold</div> </div> <div> <div>Heading 5</div> <div>Supplement</div> <div>Body<br>72 17pt</div> <div>Tertiary Label</div> <div>Regular</div> </div> <div> <div>Paragraph</div> <div>Body text</div> <div>Body<br>72 17pt</div> <div>Primary Label</div> <div>Regular</div> </div> <div> <div>List</div> <div>Body text</div> <div>Body<br>72 17pt</div> <div>Primary Label</div> <div>Regular</div> </div>

Style attributes for headings and paragraphs

Style attributes for headings and paragraphs

style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

List Attributes

Style numbered and bulleted lists as follows:

In nested lists, align numbers or bullets with the indented text of the level above.

Do

Don't

Don't

Accessibility

Use a unique and descriptive text link

Ensure that the text for each hyperlink is unique and clearly describes what is triggered by the link. Users of assistive technologies may not perceive the context of a link.

Add alternative text for images

If the document includes images, add a concise and informative alternative text (alt text). Alt text describes an image for users who are unable to see them, and is also beneficial to sighted users if an image fails to load.

Resources

W3Schools HTML Accessibility

Related Components/Patterns: Single-user Onboarding, Consent Forms