diff --git a/src/addons/badges/pages/issued-badge/issued-badge.html b/src/addons/badges/pages/issued-badge/issued-badge.html
index 5f233087f2a..abb339c92b7 100644
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@@ -33,7 +33,7 @@ <h2>{{ 'addon.badges.recipientdetails' | translate}}</h2>
             </ion-item-divider>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'core.name' | translate}}</h2>
+                    <p class="item-heading">{{ 'core.name' | translate}}</p>
                     <p>{{ user.fullname }}</p>
                 </ion-label>
             </ion-item>
@@ -48,13 +48,13 @@ <h2>{{ 'addon.badges.issuerdetails' | translate}}</h2>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="badge.issuername">
                     <ion-label>
-                        <h2>{{ 'addon.badges.issuername' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
                         <p>{{ badge.issuername }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.issuercontact">
                     <ion-label>
-                        <h2>{{ 'addon.badges.contact' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.contact' | translate}}</p>
                         <p><a href="mailto:{{badge.issuercontact}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ badge.issuercontact }}
                             </a></p>
@@ -70,37 +70,37 @@ <h2>{{ 'addon.badges.badgedetails' | translate}}</h2>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="badge.name">
                     <ion-label>
-                        <h2>{{ 'core.name' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.name' | translate}}</p>
                         <p>{{ badge.name }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.version">
                     <ion-label>
-                        <h2>{{ 'addon.badges.version' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.version' | translate}}</p>
                         <p>{{ badge.version }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.language">
                     <ion-label>
-                        <h2>{{ 'addon.badges.language' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.language' | translate}}</p>
                         <p>{{ badge.language }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.description">
                     <ion-label>
-                        <h2>{{ 'core.description' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.description' | translate}}</p>
                         <p>{{ badge.description }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.imageauthorname">
                     <ion-label>
-                        <h2>{{ 'addon.badges.imageauthorname' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.imageauthorname' | translate}}</p>
                         <p>{{ badge.imageauthorname }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.imageauthoremail">
                     <ion-label>
-                        <h2>{{ 'addon.badges.imageauthoremail' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.imageauthoremail' | translate}}</p>
                         <p><a href="mailto:{{badge.imageauthoremail}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ badge.imageauthoremail }}
                             </a></p>
@@ -108,19 +108,19 @@ <h2>{{ 'addon.badges.imageauthoremail' | translate}}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.imageauthorurl">
                     <ion-label>
-                        <h2>{{ 'addon.badges.imageauthorurl' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.imageauthorurl' | translate}}</p>
                         <p><a [href]="badge.imageauthorurl" core-link auto-login="no"> {{ badge.imageauthorurl }} </a></p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.imagecaption">
                     <ion-label>
-                        <h2>{{ 'addon.badges.imagecaption' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.imagecaption' | translate}}</p>
                         <p>{{ badge.imagecaption }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="course">
                     <ion-label>
-                        <h2>{{ 'core.course' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.course' | translate}}</p>
                         <p>
                             <core-format-text [text]="course.fullname" contextLevel="course" [contextInstanceId]="courseId">
                             </core-format-text>
@@ -138,13 +138,13 @@ <h2>{{ 'addon.badges.issuancedetails' | translate}}</h2>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="badge.dateissued">
                     <ion-label>
-                        <h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p>
                         <p>{{badge.dateissued * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.dateexpire">
                     <ion-label>
-                        <h2>{{ 'addon.badges.expirydate' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.expirydate' | translate}}</p>
                         <p>
                             {{ badge.dateexpire * 1000 | coreFormatDate }}
                             <span class="text-danger" *ngIf="currentTime >= badge.dateexpire">
@@ -165,13 +165,13 @@ <h2>{{ 'addon.badges.bendorsement' | translate}}</h2>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuername">
                     <ion-label>
-                        <h2>{{ 'addon.badges.issuername' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.issuername' | translate}}</p>
                         <p>{{ badge.endorsement.issuername }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issueremail">
                     <ion-label>
-                        <h2>{{ 'addon.badges.issueremail' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.issueremail' | translate}}</p>
                         <p>
                             <a href="mailto:{{badge.endorsement.issueremail}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ badge.endorsement.issueremail }}
@@ -181,25 +181,25 @@ <h2>{{ 'addon.badges.issueremail' | translate}}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.issuerurl">
                     <ion-label>
-                        <h2>{{ 'addon.badges.issuerurl' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.issuerurl' | translate}}</p>
                         <p><a [href]="badge.endorsement.issuerurl" core-link auto-login="no"> {{ badge.endorsement.issuerurl }} </a></p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.dateissued">
                     <ion-label>
-                        <h2>{{ 'addon.badges.dateawarded' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.dateawarded' | translate}}</p>
                         <p>{{ badge.endorsement.dateissued * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimid">
                     <ion-label>
-                        <h2>{{ 'addon.badges.claimid' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.claimid' | translate}}</p>
                         <p><a [href]="badge.endorsement.claimid" core-link auto-login="no"> {{ badge.endorsement.claimid }} </a></p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.endorsement.claimcomment">
                     <ion-label>
-                        <h2>{{ 'addon.badges.claimcomment' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.claimcomment' | translate}}</p>
                         <p>{{ badge.endorsement.claimcomment }}</p>
                     </ion-label>
                 </ion-item>
@@ -214,12 +214,12 @@ <h2>{{ 'addon.badges.relatedbages' | translate}}</h2>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngFor="let relatedBadge of badge.relatedbadges">
                     <ion-label>
-                        <h2>{{ relatedBadge.name }}</h2>
+                        <p class="item-heading">{{ relatedBadge.name }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.relatedbadges.length == 0">
                     <ion-label>
-                        <h2>{{ 'addon.badges.norelated' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.norelated' | translate}}</p>
                     </ion-label>
                 </ion-item>
             </ion-item-group>
@@ -234,12 +234,12 @@ <h2>{{ 'addon.badges.alignment' | translate}}</h2>
                 <ion-item class="ion-text-wrap" *ngFor="let alignment of badge.alignment" [href]="alignment.targeturl" core-link
                     auto-login="no">
                     <ion-label>
-                        <h2>{{ alignment.targetname }}</h2>
+                        <p class="item-heading">{{ alignment.targetname }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="badge.alignment.length == 0">
                     <ion-label>
-                        <h2>{{ 'addon.badges.noalignment' | translate}}</h2>
+                        <p class="item-heading">{{ 'addon.badges.noalignment' | translate}}</p>
                     </ion-label>
                 </ion-item>
             </ion-item-group>
diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index 06d7039325c..44d416a2a46 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -27,19 +27,22 @@ <h1>{{ title | translate }}</h1>
                 <ion-item class="ion-text-wrap">
                     <core-user-avatar [user]="entry.user" slot="start" [courseId]="entry.courseid"></core-user-avatar>
                     <ion-label>
-                        <p class="item-heading">
-                            <core-format-text [text]="entry.subject" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId">
-                            </core-format-text>
-                            <ion-note class="ion-float-end ion-padding-start ion-text-end">
+                        <div class="flex-row ion-justify-content-between ion-align-items-center">
+                            <h2>
+                                <core-format-text [text]="entry.subject" [contextLevel]="contextLevel"
+                                    [contextInstanceId]="contextInstanceId">
+                                </core-format-text>
+                            </h2>
+                            <ion-note class="ion-text-end">
                                 {{ 'addon.blog.' + entry.publishTranslated! | translate}}
                             </ion-note>
-                        </p>
-                        <p>
-                            <ion-note class="ion-float-end ion-text-end">
+                        </div>
+                        <div class="flex-row ion-justify-content-between ion-align-items-center">
+                            {{entry.user && entry.user.fullname}}
+                            <ion-note class="ion-text-end">
                                 {{entry.created | coreDateDayOrTime}}
                             </ion-note>
-                            {{entry.user && entry.user!.fullname}}
-                        </p>
+                        </div>
                     </ion-label>
                 </ion-item>
                 <ion-card-content>
diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index aea32bb2cf6..0df183e400e 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@@ -98,7 +98,7 @@
 
     .addon-calendar-period {
         flex-grow: 3;
-        h3 {
+        h2 {
             margin-top: 10px;
             font-size: 1.2rem;
         }
diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 1abcf2c1678..8607da1549d 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@@ -38,7 +38,7 @@ <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
                         </ion-button>
                     </ion-col>
                     <ion-col class="ion-text-center addon-calendar-period">
-                        <h3>{{ periodName }}</h3>
+                        <h2>{{ periodName }}</h2>
                     </ion-col>
                     <ion-col class="ion-text-end">
                         <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
diff --git a/src/addons/calendar/pages/day/day.scss b/src/addons/calendar/pages/day/day.scss
index 145eccfb8aa..111ba695370 100644
--- a/src/addons/calendar/pages/day/day.scss
+++ b/src/addons/calendar/pages/day/day.scss
@@ -6,7 +6,7 @@
 
     .addon-calendar-period {
         flex-grow: 3;
-        h3 {
+        h2 {
             margin-top: 10px;
             font-size: 1.2rem;
         }
diff --git a/src/addons/calendar/pages/event/event.html b/src/addons/calendar/pages/event/event.html
index e41c029cc2c..40adfcf4c9b 100644
--- a/src/addons/calendar/pages/event/event.html
+++ b/src/addons/calendar/pages/event/event.html
@@ -60,7 +60,7 @@ <h1>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.calendar.when' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.calendar.when' | translate }}</p>
                     <core-format-text [text]="event.formattedtime" [contextLevel]="event.contextLevel"
                         [contextInstanceId]="event.contextInstanceId"></core-format-text>
                 </ion-label>
@@ -70,13 +70,13 @@ <h2>{{ 'addon.calendar.when' | translate }}</h2>
             </ion-item>
             <ion-item>
                 <ion-label>
-                    <h2>{{ 'addon.calendar.eventtype' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.calendar.eventtype' | translate }}</p>
                     <p>{{ 'addon.calendar.type' + event.formattedType | translate }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="courseName" [href]="courseUrl" core-link capture="true">
                 <ion-label>
-                    <h2>{{ 'core.course' | translate}}</h2>
+                    <p class="item-heading">{{ 'core.course' | translate}}</p>
                     <p>
                         <core-format-text [text]="courseName" contextLevel="course" [contextInstanceId]="courseId">
                         </core-format-text>
@@ -85,13 +85,13 @@ <h2>{{ 'core.course' | translate}}</h2>
             </ion-item>
             <ion-item class="ion-text-wrap core-groupname" *ngIf="groupName">
                 <ion-label>
-                    <h2>{{ 'core.group' | translate}}</h2>
+                    <p class="item-heading">{{ 'core.group' | translate}}</p>
                     <p>{{ groupName }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="categoryPath">
                 <ion-label>
-                    <h2>{{ 'core.category' | translate}}</h2>
+                    <p class="item-heading">{{ 'core.category' | translate}}</p>
                     <p>
                         <core-format-text [text]="categoryPath" contextLevel="coursecat" [contextInstanceId]="event.categoryid">
                         </core-format-text>
@@ -100,7 +100,7 @@ <h2>{{ 'core.category' | translate}}</h2>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="event.description">
                 <ion-label>
-                    <h2>{{ 'core.description' | translate}}</h2>
+                    <p class="item-heading">{{ 'core.description' | translate}}</p>
                     <p>
                         <core-format-text [text]="event.description" [contextLevel]="event.contextLevel"
                             [contextInstanceId]="event.contextInstanceId"></core-format-text>
@@ -109,7 +109,7 @@ <h2>{{ 'core.description' | translate}}</h2>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="event.location">
                 <ion-label>
-                    <h2>{{ 'core.location' | translate}}</h2>
+                    <p class="item-heading">{{ 'core.location' | translate}}</p>
                     <p>
                         <a [href]="event.encodedLocation" core-link auto-login="no">
                             <core-format-text [text]="event.location" [contextLevel]="event.contextLevel"
diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html
index f8a03e245fa..21b96147f10 100644
--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@@ -19,7 +19,7 @@ <h1 *ngIf="competency">
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
                 <ion-label>
-                    <h2>{{ user.fullname }}</h2>
+                    <p class="item-heading">{{ user.fullname }}</p>
                 </ion-label>
             </ion-item>
         </ion-card>
@@ -115,7 +115,7 @@ <h2>{{ user.fullname }}</h2>
         </ion-card>
 
         <div *ngIf="competency">
-            <h3 class="ion-margin-horizontal">{{ 'addon.competency.evidence' | translate }}</h3>
+            <h2 class="ion-margin-horizontal">{{ 'addon.competency.evidence' | translate }}</h2>
             <p class="ion-margin-horizontal" *ngIf="competency.evidence.length == 0">
                 {{ 'addon.competency.noevidence' | translate }}
             </p>
diff --git a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
index daea9587959..3d36e23219e 100644
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@@ -53,7 +53,7 @@ <h2 class="ion-margin-horizontal" *ngIf="courseCompetencies && courseCompetencie
             <ion-item class="ion-text-wrap">
                 <core-user-avatar [user]="user" slot="start"></core-user-avatar>
                 <ion-label>
-                    <h2>{{ user.fullname }}</h2>
+                    <p class="item-heading">{{ user.fullname }}</p>
                 </ion-label>
             </ion-item>
         </ion-card>
diff --git a/src/addons/competency/pages/plan/plan.html b/src/addons/competency/pages/plan/plan.html
index 0559725274a..ec42cb599c9 100644
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@@ -17,7 +17,7 @@ <h1 *ngIf="plan">{{plan.plan.name}}</h1>
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <core-user-avatar [user]="user" slot="start"></core-user-avatar>
-                    <h2>{{ user.fullname }}</h2>
+                    <p class="item-heading">{{ user.fullname }}</p>
                 </ion-label>
             </ion-item>
         </ion-card>
diff --git a/src/addons/coursecompletion/pages/report/report.html b/src/addons/coursecompletion/pages/report/report.html
index e9c51650003..22420d5f91c 100644
--- a/src/addons/coursecompletion/pages/report/report.html
+++ b/src/addons/coursecompletion/pages/report/report.html
@@ -16,20 +16,20 @@ <h1>{{ 'addon.coursecompletion.coursecompletion' | translate }}</h1>
         <ion-item class="ion-text-wrap" *ngIf="user">
             <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
             <ion-label>
-                <h2>{{user!.fullname}}</h2>
+                <p class="item-heading">{{user.fullname}}</p>
             </ion-label>
         </ion-item>
 
         <ion-card *ngIf="completion && tracked">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.coursecompletion.status' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.coursecompletion.status' | translate }}</p>
                     <p>{{ statusText! | translate }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.coursecompletion.required' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.coursecompletion.required' | translate }}</p>
                     <p *ngIf="completion.aggregation === 1">{{ 'addon.coursecompletion.criteriarequiredall' | translate }}</p>
                     <p *ngIf="completion.aggregation === 2">{{ 'addon.coursecompletion.criteriarequiredany' | translate }}</p>
                 </ion-label>
diff --git a/src/addons/messages/components/conversation-info/conversation-info.html b/src/addons/messages/components/conversation-info/conversation-info.html
index c72e7b34413..38f7c081dd5 100644
--- a/src/addons/messages/components/conversation-info/conversation-info.html
+++ b/src/addons/messages/components/conversation-info/conversation-info.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.messages.groupinfo' | translate }}</h2>
+            <h1>{{ 'addon.messages.groupinfo' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@@ -19,18 +19,18 @@ <h2>{{ 'addon.messages.groupinfo' | translate }}</h2>
         <ion-item class="ion-text-center" *ngIf="conversation">
             <ion-label>
                 <div class="large-avatar">
-                    <img class="avatar" [src]="conversation!.imageurl" core-external-content [alt]="conversation!.name"
+                    <img class="avatar" [src]="conversation.imageurl" core-external-content [alt]="conversation.name"
                         onError="this.src='assets/img/group-avatar.svg'">
                 </div>
                 <h2>
-                    <core-format-text [text]="conversation!.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
+                    <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
                 </h2>
                 <p>
-                    <core-format-text *ngIf="conversation!.subname" [text]="conversation!.subname" contextLevel="system"
+                    <core-format-text *ngIf="conversation.subname" [text]="conversation.subname" contextLevel="system"
                         [contextInstanceId]="0">
                     </core-format-text>
                 </p>
-                <p>{{ 'addon.messages.numparticipants' | translate:{$a: conversation!.membercount} }}</p>
+                <p>{{ 'addon.messages.numparticipants' | translate:{$a: conversation.membercount} }}</p>
             </ion-label>
         </ion-item>
 
diff --git a/src/addons/messages/pages/discussions-35/discussions.html b/src/addons/messages/pages/discussions-35/discussions.html
index 63fa5426d87..9d80742f2fc 100644
--- a/src/addons/messages/pages/discussions-35/discussions.html
+++ b/src/addons/messages/pages/discussions-35/discussions.html
@@ -29,7 +29,7 @@ <h1>{{ 'addon.messages.messages' | translate }}</h1>
                     [attr.aria-label]="'addon.messages.contacts' | translate" detail="true" button>
                     <ion-icon name="fas-address-book" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
-                        <h2>{{ 'addon.messages.contacts' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.messages.contacts' | translate }}</p>
                     </ion-label>
                 </ion-item>
 
diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
index f24b5d9b36d..79f6fb07090 100644
--- a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ plugin.name }}</h2>
+            <h1>{{ plugin.name }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/assign/components/index/addon-mod-assign-index.html b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
index 170d86ab370..117b0c76df0 100644
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@@ -25,7 +25,7 @@
 
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'core.course.hiddenfromstudents' | translate }}</h2>
+                    <p class="item-heading">{{ 'core.course.hiddenfromstudents' | translate }}</p>
                     <p *ngIf="module.visible">{{ 'core.no' | translate }}</p>
                     <p *ngIf="!module.visible">{{ 'core.yes' | translate }}</p>
                 </ion-label>
@@ -33,13 +33,13 @@ <h2>{{ 'core.course.hiddenfromstudents' | translate }}</h2>
 
             <ion-item class="ion-text-wrap" *ngIf="timeRemaining">
                 <ion-label>
-                    <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_assign.timeremaining' | translate }}</p>
                     <p>{{ timeRemaining }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="lateSubmissions">
                 <ion-label>
-                    <h2>{{ 'addon.mod_assign.latesubmissions' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_assign.latesubmissions' | translate }}</p>
                     <p>{{ lateSubmissions }}</p>
                 </ion-label>
             </ion-item>
@@ -47,8 +47,8 @@ <h2>{{ 'addon.mod_assign.latesubmissions' | translate }}</h2>
             <!-- Summary of all submissions. -->
             <ion-item class="ion-text-wrap" *ngIf="summary && summary.participantcount" (click)="goToSubmissionList()" detail="true" button>
                 <ion-label>
-                    <h2 *ngIf="assign.teamsubmission">{{ 'addon.mod_assign.numberofteams' | translate }}</h2>
-                    <h2 *ngIf="!assign.teamsubmission">{{ 'addon.mod_assign.numberofparticipants' | translate }}</h2>
+                    <p class="item-heading" *ngIf="assign.teamsubmission">{{ 'addon.mod_assign.numberofteams' | translate }}</p>
+                    <p class="item-heading" *ngIf="!assign.teamsubmission">{{ 'addon.mod_assign.numberofparticipants' | translate }}</p>
                 </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.participantcount }}</span>
@@ -66,7 +66,7 @@ <h2 *ngIf="!assign.teamsubmission">{{ 'addon.mod_assign.numberofparticipants' |
                 [class.hide-detail]="!summary.submissiondraftscount" [detail]="true" [button]="summary.submissiondraftscount"
                 (click)="goToSubmissionList(submissionStatusDraft, !!summary.submissiondraftscount)">
                 <ion-label>
-                    <h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</p>
                 </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.submissiondraftscount }}</span>
@@ -82,7 +82,7 @@ <h2>{{ 'addon.mod_assign.numberofdraftsubmissions' | translate }}</h2>
                 [class.hide-detail]="!summary.submissionssubmittedcount" [detail]="true" [button]="summary.submissionssubmittedcount"
                 (click)="goToSubmissionList(submissionStatusSubmitted, !!summary.submissionssubmittedcount)">
                 <ion-label>
-                    <h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</p>
                 </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.submissionssubmittedcount }}</span>
@@ -98,7 +98,7 @@ <h2>{{ 'addon.mod_assign.numberofsubmittedassignments' | translate }}</h2>
                 [class.hide-detail]="!needsGradingAvailable" [detail]="true" [button]="needsGradingAvailable"
                 (click)="goToSubmissionList(needGrading, needsGradingAvailable)">
                 <ion-label>
-                    <h2>{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_assign.numberofsubmissionsneedgrading' | translate }}</p>
                 </ion-label>
                 <ion-badge slot="end" color="primary">
                     <span aria-hidden="true">{{ summary.submissionsneedgradingcount }}</span>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index 2d8ec7e0796..122f5c79b74 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -15,7 +15,7 @@
             [attr.aria-label]="user!.fullname">
             <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
             <ion-label>
-                <h2>{{ user!.fullname }}</h2>
+                <p class="item-heading">{{ user!.fullname }}</p>
                 <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
             </ion-label>
         </ion-item>
@@ -23,7 +23,7 @@ <h2>{{ user!.fullname }}</h2>
         <!-- Status of the submission if user is blinded. -->
         <ion-item class="ion-text-wrap" *ngIf="blindMarking && !user">
             <ion-label>
-                <h2>{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</h2>
+                <p class="item-heading">{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</p>
                 <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
             </ion-label>
         </ion-item>
@@ -31,7 +31,7 @@ <h2>{{ 'addon.mod_assign.hiddenuser' | translate }} {{blindId}}</h2>
         <!-- Status of the submission in the rest of cases. -->
         <ion-item class="ion-text-wrap" *ngIf="(blindMarking && user) || (!blindMarking && !user)">
             <ion-label>
-                <h2>{{ 'addon.mod_assign.submissionstatus' | translate }}</h2>
+                <p class="item-heading">{{ 'addon.mod_assign.submissionstatus' | translate }}</p>
                 <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
             </ion-label>
         </ion-item>
@@ -44,7 +44,7 @@ <h2>{{ 'addon.mod_assign.submissionstatus' | translate }}</h2>
                     <!-- Render some data about the submission. -->
                     <ion-item class="ion-text-wrap" *ngIf="currentAttempt && !isGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.attemptnumber' | translate }}</p>
                             <p *ngIf="assign!.maxattempts == unlimitedAttempts">
                                 {{ 'addon.mod_assign.outof' | translate :
                                 {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
@@ -59,7 +59,7 @@ <h2>{{ 'addon.mod_assign.attemptnumber' | translate }}</h2>
                     <!-- Submission is locked. -->
                     <ion-item class="ion-text-wrap" *ngIf="lastAttempt?.locked">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.submissionslocked' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.submissionslocked' | translate }}</p>
                         </ion-label>
                     </ion-item>
 
@@ -77,7 +77,7 @@ <h2>{{ 'addon.mod_assign.submissionslocked' | translate }}</h2>
 
                     <ion-item class="ion-text-wrap" *ngIf="showDates && assign!.duedate && !isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.duedate' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.duedate' | translate }}</p>
                             <p *ngIf="assign!.duedate">{{ assign!.duedate * 1000 | coreFormatDate }}</p>
                             <p *ngIf="!assign!.duedate">{{ 'addon.mod_assign.duedateno' | translate }}</p>
                         </ion-label>
@@ -85,14 +85,14 @@ <h2>{{ 'addon.mod_assign.duedate' | translate }}</h2>
 
                     <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && assign!.cutoffdate && isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.cutoffdate' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.cutoffdate' | translate }}</p>
                             <p>{{ assign!.cutoffdate * 1000 | coreFormatDate }}</p>
                         </ion-label>
                     </ion-item>
 
                     <ion-item class="ion-text-wrap" *ngIf="assign!.duedate && lastAttempt?.extensionduedate && !isSubmittedForGrading">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.extensionduedate' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.extensionduedate' | translate }}</p>
                             <p>{{ lastAttempt!.extensionduedate * 1000 | coreFormatDate }}</p>
                         </ion-label>
                     </ion-item>
@@ -100,7 +100,7 @@ <h2>{{ 'addon.mod_assign.extensionduedate' | translate }}</h2>
                     <!-- Time remaining. -->
                     <ion-item class="ion-text-wrap" *ngIf="timeRemaining || timeLimitEndTime > 0" [ngClass]="[timeRemainingClass]">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.timeremaining' | translate }}</p>
                             <p *ngIf="!timeLimitEndTime" [innerHTML]="timeRemaining"></p>
                             <core-timer *ngIf="timeLimitEndTime > 0" [endTime]="timeLimitEndTime" mode="basic" timeUpText="00:00:00"
                                 [timeLeftClassThreshold]="-1" [underTimeClassThresholds]="[300, 900]" (finished)="timeUp()">
@@ -111,7 +111,7 @@ <h2>{{ 'addon.mod_assign.timeremaining' | translate }}</h2>
                     <!-- Time limit. -->
                     <ion-item class="ion-text-wrap" *ngIf="assign && assign.timelimit">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.timelimit' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.timelimit' | translate }}</p>
                             <p>{{ assign.timelimit | coreDuration }}</p>
                         </ion-label>
                     </ion-item>
@@ -120,7 +120,7 @@ <h2>{{ 'addon.mod_assign.timelimit' | translate }}</h2>
                     <ion-item class="ion-text-wrap" *ngIf="lastAttempt && isSubmittedForGrading && lastAttempt!.caneditowner !== undefined"
                         [ngClass]="{submissioneditable: lastAttempt!.caneditowner, submissionnoteditable: !lastAttempt!.caneditowner}">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.editingstatus' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.editingstatus' | translate }}</p>
                             <p *ngIf="lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissioneditable' | translate }}</p>
                             <p *ngIf="!lastAttempt!.caneditowner">{{ 'addon.mod_assign.submissionnoteditable' | translate }}</p>
                         </ion-label>
@@ -130,7 +130,7 @@ <h2>{{ 'addon.mod_assign.editingstatus' | translate }}</h2>
                     <ion-item class="ion-text-wrap"
                         *ngIf="userSubmission && userSubmission!.status != statusNew && userSubmission!.timemodified">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.timemodified' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.timemodified' | translate }}</p>
                             <p>{{ userSubmission!.timemodified * 1000 | coreFormatDate }}</p>
                         </ion-label>
                     </ion-item>
@@ -151,7 +151,7 @@ <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                                 [attr.aria-label]="user.fullname">
                                 <core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
                                 <ion-label>
-                                    <h2>{{ user.fullname }}</h2>
+                                    <p class="item-heading">{{ user.fullname }}</p>
                                 </ion-label>
                             </ion-item>
                         </ng-container>
@@ -257,7 +257,7 @@ <h2>{{ user.fullname }}</h2>
                     <ion-item class="ion-text-wrap core-grading-summary"
                         *ngIf="feedback?.gradefordisplay && (!isGrading || grade.method != 'simple')">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.currentgrade' | translate }}</p>
                             <p>
                                 <core-format-text [text]="feedback!.gradefordisplay" [filter]="false"></core-format-text>
                             </p>
@@ -273,7 +273,7 @@ <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
                         Use a text input because otherwise we cannot readthe value if it has an invalid character. -->
                         <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && !grade.scale">
                             <ion-label position="stacked">
-                                <h2>{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</h2>
+                                <p class="item-heading">{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</p>
                             </ion-label>
                             <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
                                 [lang]="grade.lang">
@@ -284,7 +284,7 @@ <h2>{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</h2>
                         <!-- Grade using a scale. -->
                         <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple' && grade.scale">
                             <ion-label>
-                                <h2>{{ 'addon.mod_assign.grade' | translate }}</h2>
+                                <p class="item-heading">{{ 'addon.mod_assign.grade' | translate }}</p>
                             </ion-label>
                             <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled"
                                 [interfaceOptions]="{header: 'addon.mod_assign.grade' | translate}">
@@ -297,7 +297,7 @@ <h2>{{ 'addon.mod_assign.grade' | translate }}</h2>
                         <!-- Outcomes. -->
                         <ion-item class="ion-text-wrap" *ngFor="let outcome of gradeInfo!.outcomes">
                             <ion-label>
-                                <h2>{{ outcome.name }}</h2>
+                                <p class="item-heading">{{ outcome.name }}</p>
                             </ion-label>
                             <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId"
                                 interface="action-sheet" [disabled]="gradeInfo!.disabled" [interfaceOptions]="{header: outcome.name }">
@@ -311,7 +311,7 @@ <h2>{{ outcome.name }}</h2>
                         <!-- Gradebook grade for simple grading. -->
                         <ion-item class="ion-text-wrap" *ngIf="grade.method == 'simple'">
                             <ion-label>
-                                <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
+                                <p class="item-heading">{{ 'addon.mod_assign.currentgrade' | translate }}</p>
                                 <p *ngIf="grade.gradebookGrade && !grade.scale">
                                     {{ grade.gradebookGrade }}
                                 </p>
@@ -332,7 +332,7 @@ <h2>{{ 'addon.mod_assign.currentgrade' | translate }}</h2>
                     <!-- Workflow status. -->
                     <ion-item class="ion-text-wrap" *ngIf="workflowStatusTranslationId">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.markingworkflowstate' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.markingworkflowstate' | translate }}</p>
                             <p>{{ workflowStatusTranslationId | translate }}</p>
                         </ion-label>
                     </ion-item>
@@ -340,7 +340,7 @@ <h2>{{ 'addon.mod_assign.markingworkflowstate' | translate }}</h2>
                     <!--- Apply grade to all team members. -->
                     <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</p>
                             <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
                         </ion-label>
                         <ion-toggle [(ngModel)]="grade.applyToAll"></ion-toggle>
@@ -350,7 +350,7 @@ <h2>{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</h2>
                     <ng-container *ngIf="isGrading && assign!.attemptreopenmethod != attemptReopenMethodNone">
                         <ion-item class="ion-text-wrap">
                             <ion-label>
-                                <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
+                                <p class="item-heading">{{ 'addon.mod_assign.attemptsettings' | translate }}</p>
                                 <p *ngIf="assign!.maxattempts == unlimitedAttempts">
                                     {{ 'addon.mod_assign.outof' | translate :
                                     {'$a': {'current': currentAttempt, 'total': maxAttemptsText} } }}
@@ -376,8 +376,8 @@ <h2>{{ 'addon.mod_assign.attemptsettings' | translate }}</h2>
                         [attr.aria-label]="grader!.fullname" detail="true">
                         <core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
-                            <h2>{{ grader!.fullname }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.gradedby' | translate }}</p>
+                            <p class="item-heading">{{ grader!.fullname }}</p>
                             <p *ngIf="feedback!.gradeddate">{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
                         </ion-label>
                     </ion-item>
@@ -385,7 +385,7 @@ <h2>{{ grader!.fullname }}</h2>
                     <!-- Grader is hidden, display only the grade date. -->
                     <ion-item class="ion-text-wrap" *ngIf="!grader && feedback?.gradeddate">
                         <ion-label>
-                            <h2>{{ 'addon.mod_assign.gradedon' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_assign.gradedon' | translate }}</p>
                             <p>{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
                         </ion-label>
                     </ion-item>
diff --git a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
index 549976d19cf..43f6b2009d1 100644
--- a/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
+++ b/src/addons/mod/assign/submission/onlinetext/component/addon-mod-assign-submission-onlinetext.html
@@ -20,7 +20,7 @@ <h2>{{ plugin.name }}</h2>
     </ion-item-divider>
     <ion-item class="ion-text-wrap" *ngIf="wordLimitEnabled && words >= 0">
         <ion-label>
-            <h2>{{ 'addon.mod_assign.wordlimit' | translate }}</h2>
+            <p class="item-heading">{{ 'addon.mod_assign.wordlimit' | translate }}</p>
             <p>{{ 'core.numwords' | translate: {'$a': words + ' / ' + wordLimit} }}</p>
         </ion-label>
     </ion-item>
diff --git a/src/addons/mod/bigbluebuttonbn/components/index/index.html b/src/addons/mod/bigbluebuttonbn/components/index/index.html
index 2fceda71527..782717ab024 100644
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@@ -19,13 +19,13 @@
     <ng-container *ngIf="meetingInfo && showRoom">
         <ion-item class="ion-text-wrap" *ngIf="meetingInfo.openingtime">
             <ion-label>
-                <h3>{{ 'addon.mod_bigbluebuttonbn.mod_form_field_openingtime' | translate }}</h3>
+                <p class="item-heading">{{ 'addon.mod_bigbluebuttonbn.mod_form_field_openingtime' | translate }}</p>
             </ion-label>
             <p slot="end">{{ meetingInfo.openingtime * 1000 | coreFormatDate }}</p>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="meetingInfo.closingtime">
             <ion-label>
-                <h3>{{ 'addon.mod_bigbluebuttonbn.mod_form_field_closingtime' | translate }}</h3>
+                <p class="item-heading">{{ 'addon.mod_bigbluebuttonbn.mod_form_field_closingtime' | translate }}</p>
             </ion-label>
             <p slot="end">{{ meetingInfo.closingtime * 1000 | coreFormatDate }}</p>
         </ion-item>
@@ -45,31 +45,31 @@ <h3>{{ 'addon.mod_bigbluebuttonbn.mod_form_field_closingtime' | translate }}</h3
 
             <ion-item class="ion-text-wrap" *ngIf="meetingInfo.startedat">
                 <ion-label>
-                    <h3>{{ 'addon.mod_bigbluebuttonbn.view_message_session_started_at' | translate }}</h3>
+                    <p class="item-heading">{{ 'addon.mod_bigbluebuttonbn.view_message_session_started_at' | translate }}</p>
                 </ion-label>
                 <p slot="end">{{ meetingInfo.startedat * 1000 | coreFormatDate: "strftimetime" }}</p>
             </ion-item>
 
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h3 *ngIf="meetingInfo.moderatorplural">
+                    <p class="item-heading" *ngIf="meetingInfo.moderatorplural">
                         {{ 'addon.mod_bigbluebuttonbn.view_message_moderators' | translate }}
-                    </h3>
-                    <h3 *ngIf="!meetingInfo.moderatorplural">
+                    </p>
+                    <p class="item-heading" *ngIf="!meetingInfo.moderatorplural">
                         {{ 'addon.mod_bigbluebuttonbn.view_message_moderator' | translate }}
-                    </h3>
+                    </p>
                 </ion-label>
                 <p slot="end">{{ meetingInfo.moderatorcount }}</p>
             </ion-item>
 
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h3 *ngIf="meetingInfo.participantplural">
+                    <p class="item-heading" *ngIf="meetingInfo.participantplural">
                         {{ 'addon.mod_bigbluebuttonbn.view_message_viewers' | translate }}
-                    </h3>
-                    <h3 *ngIf="!meetingInfo.participantplural">
+                    </p>
+                    <p class="item-heading" *ngIf="!meetingInfo.participantplural">
                         {{ 'addon.mod_bigbluebuttonbn.view_message_viewer' | translate }}
-                    </h3>
+                    </p>
                 </ion-label>
                 <p slot="end">{{ meetingInfo.participantcount }}</p>
             </ion-item>
@@ -108,7 +108,7 @@ <h2>{{ 'addon.mod_bigbluebuttonbn.view_section_title_recordings' | translate }}<
             <div [hidden]="!recording.expanded" class="addon-mod_bbb-recording-details">
                 <ion-item *ngFor="let data of recording.details" class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ data.label }}</h2>
+                        <p class="item-heading">{{ data.label }}</p>
                         <p *ngIf="data.allowHTML">
                             <core-format-text [text]="data.value" [component]="component" [componentId]="module.id" contextLevel="module"
                                 [contextInstanceId]="module.id" [courseId]="module.course"></core-format-text>
diff --git a/src/addons/mod/book/components/toc/toc.html b/src/addons/mod/book/components/toc/toc.html
index 663370ab8e6..a8a12c97842 100644
--- a/src/addons/mod/book/components/toc/toc.html
+++ b/src/addons/mod/book/components/toc/toc.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_book.toc' | translate }}</h2>
+            <h1>{{ 'addon.mod_book.toc' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/chat/components/users-modal/users-modal.html b/src/addons/mod/chat/components/users-modal/users-modal.html
index b0b09c1407c..0f06b26d292 100644
--- a/src/addons/mod/chat/components/users-modal/users-modal.html
+++ b/src/addons/mod/chat/components/users-modal/users-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_chat.currentusers' | translate }}</h2>
+            <h1>{{ 'addon.mod_chat.currentusers' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/data/components/search/search.html b/src/addons/mod/data/components/search/search.html
index e7dee1e2e5c..1c7d2d852eb 100644
--- a/src/addons/mod/data/components/search/search.html
+++ b/src/addons/mod/data/components/search/search.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_data.search' | translate }}</h2>
+            <h1>{{ 'addon.mod_data.search' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
index d416650cab2..b8e281567eb 100644
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@@ -64,7 +64,7 @@
         <ion-item class="ion-text-wrap" (click)="openAttempts()" [class.hide-detail]="!(access.canviewreports && completedCount > 0)"
             [detail]="true" [button]="access.canviewreports && completedCount > 0">
             <ion-label>
-                <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
+                <p class="item-heading">{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</p>
             </ion-label>
             <ion-badge slot="end">
                 <span aria-hidden="true">{{completedCount}}</span>
@@ -76,12 +76,12 @@ <h2>{{ 'addon.mod_feedback.completed_feedbacks' | translate }}</h2>
         <ion-item class="ion-text-wrap" *ngIf="!access.isanonymous && access.canviewreports" (click)="openNonRespondents()" detail="true"
             button>
             <ion-label>
-                <h2>{{ 'addon.mod_feedback.show_nonrespondents' | translate }}</h2>
+                <p class="item-heading">{{ 'addon.mod_feedback.show_nonrespondents' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'addon.mod_feedback.questions' | translate }}</h2>
+                <p class="item-heading">{{ 'addon.mod_feedback.questions' | translate }}</p>
             </ion-label>
             <ion-badge slot="end">
                 <span aria-hidden="true">{{itemsCount}}</span>
@@ -115,19 +115,19 @@ <h2>{{ 'addon.mod_feedback.questions' | translate }}</h2>
         <ion-list *ngIf="access && (access.canedititems || access.canviewreports || !access.isempty)">
             <ion-item class="ion-text-wrap" *ngIf="access.canedititems && overview.timeopen">
                 <ion-label>
-                    <h2>{{ 'addon.mod_feedback.feedbackopen' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_feedback.feedbackopen' | translate }}</p>
                     <p>{{overview.openTimeReadable}}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access.canedititems && overview.timeclose">
                 <ion-label>
-                    <h2>{{ 'addon.mod_feedback.feedbackclose' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_feedback.feedbackclose' | translate }}</p>
                     <p>{{overview.closeTimeReadable}}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access.canedititems && feedback && feedback.page_after_submit">
                 <ion-label>
-                    <h2>{{ 'addon.mod_feedback.page_after_submit' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_feedback.page_after_submit' | translate }}</p>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="feedback.page_after_submit"
                         contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
@@ -136,7 +136,7 @@ <h2>{{ 'addon.mod_feedback.page_after_submit' | translate }}</h2>
             <ng-container *ngIf="!access.isempty">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_feedback.mode' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_feedback.mode' | translate }}</p>
                         <p *ngIf="access.isanonymous">{{ 'addon.mod_feedback.anonymous' | translate }}</p>
                         <p *ngIf="!access.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                     </ion-label>
diff --git a/src/addons/mod/feedback/pages/attempt/attempt.html b/src/addons/mod/feedback/pages/attempt/attempt.html
index 41005c39334..0a110f49bc7 100644
--- a/src/addons/mod/feedback/pages/attempt/attempt.html
+++ b/src/addons/mod/feedback/pages/attempt/attempt.html
@@ -33,12 +33,12 @@ <h2>{{ 'addon.mod_feedback.anonymous_user' |translate }}</h2>
                     <core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
                     <ion-item class="ion-text-wrap" *ngIf="item.typ != 'pagebreak'" [color]="item.dependitem > 0 ? 'light' : ''">
                         <ion-label>
-                            <h2 *ngIf="item.name" [core-mark-required]="item.required">
+                            <p class="item-heading" *ngIf="item.name" [core-mark-required]="item.required">
                                 <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
                                 <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module"
                                     [contextInstanceId]="cmId" [courseId]="courseId">
                                 </core-format-text>
-                            </h2>
+                            </p>
                             <p *ngIf="item.submittedValue">
                                 <core-format-text [component]="component" [componentId]="cmId" [text]="item.submittedValue"
                                     contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index e16c65d3967..9f07a02553e 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -17,7 +17,7 @@ <h1>
             <ion-list class="ion-no-margin has-spacer">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_feedback.mode' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_feedback.mode' | translate }}</p>
                         <p *ngIf="access!.isanonymous">{{ 'addon.mod_feedback.anonymous' | translate }}</p>
                         <p *ngIf="!access!.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                     </ion-label>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index ab1f83cfe8f..9727242bafe 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -126,7 +126,7 @@ <h2 class="ion-text-wrap">
                 <ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
                 </ion-icon>
                 <ion-label>
-                    <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_forum.advanced' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <div *ngIf="advanced" [id]="'addon-forum-reply-edit-form-advanced-' + uniqueId">
diff --git a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
index 45ff2157789..54d488ebaea 100644
--- a/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
+++ b/src/addons/mod/forum/components/sort-order-selector/sort-order-selector.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h2>
+            <h1 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@@ -17,7 +17,7 @@ <h2 id="addon-mod-forum-sort-order-label">{{ 'core.sort' | translate }}</h2>
                 [attr.aria-current]="selected == sortOrder.value ? 'page' : 'false'" [attr.aria-label]="sortOrder.label | translate"
                 (click)="selectSortOrder(sortOrder)" button aria-haspopup="dialog">
                 <ion-label>
-                    <h2>{{ sortOrder.label | translate }}</h2>
+                    <p class="item-heading">{{ sortOrder.label | translate }}</p>
                 </ion-label>
             </ion-item>
         </ng-container>
diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index 41245df1ad1..b4bff993233 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -57,7 +57,7 @@
         <ion-item class="ion-text-center" *ngIf="downloading">
             <ion-label>
                 <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-                <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
+                <p class="item-heading" *ngIf="progressMessage">{{ progressMessage | translate }}</p>
                 <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage"></core-progress-bar>
             </ion-label>
         </ion-item>
diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
index d40c535162e..efe7dd8c062 100644
--- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
+++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
@@ -23,13 +23,13 @@ <h1>
                 [attr.aria-label]="user.fullname">
                 <core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
                 <ion-label>
-                    <h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</h2>
+                    <p class="item-heading">{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</p>
                 </ion-label>
             </ion-item>
             <!-- Attempt number (if user not known). -->
             <ion-item class="ion-text-wrap" *ngIf="!user">
                 <ion-label>
-                    <h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}</h2>
+                    <p class="item-heading">{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}</p>
                 </ion-label>
             </ion-item>
 
@@ -38,13 +38,13 @@ <h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}</h2>
                 <ion-list>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h2>{{ 'addon.mod_h5pactivity.startdate' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_h5pactivity.startdate' | translate }}</p>
                             <p>{{ attempt.timecreated | coreFormatDate:'strftimedatetime' }}</p>
                         </ion-label>
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h2>{{ 'addon.mod_h5pactivity.completion' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_h5pactivity.completion' | translate }}</p>
                             <p *ngIf="attempt.completion">
                                 <img src="assets/img/completion/completion-auto-y.svg" role="presentation" alt="">
                                 {{ 'addon.mod_h5pactivity.attempt_completion_yes' | translate }}
@@ -57,13 +57,13 @@ <h2>{{ 'addon.mod_h5pactivity.completion' | translate }}</h2>
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h2>{{ 'addon.mod_h5pactivity.duration' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_h5pactivity.duration' | translate }}</p>
                             <p>{{ attempt.durationReadable }}</p>
                         </ion-label>
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h2>{{ 'addon.mod_h5pactivity.outcome' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_h5pactivity.outcome' | translate }}</p>
                             <p *ngIf="attempt.success !== null && attempt.success">
                                 <ion-icon name="fas-check-circle" aria-hidden="true"></ion-icon>
                                 {{ 'addon.mod_h5pactivity.attempt_success_pass' | translate }}
@@ -79,7 +79,7 @@ <h2>{{ 'addon.mod_h5pactivity.outcome' | translate }}</h2>
                     </ion-item>
                     <ion-item *ngIf="attempt.maxscore" class="ion-text-wrap">
                         <ion-label>
-                            <h2>{{ 'addon.mod_h5pactivity.totalscore' | translate }}</h2>
+                            <p class="item-heading">{{ 'addon.mod_h5pactivity.totalscore' | translate }}</p>
                             <p>{{ 'addon.mod_h5pactivity.score_out_of' | translate:{$a: attempt} }}</p>
                         </ion-label>
                     </ion-item>
diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
index 30b181aca84..c9030e75deb 100644
--- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
+++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
@@ -37,7 +37,7 @@ <h2>{{ 'addon.mod_h5pactivity.myattempts' | translate }}</h2>
             <ng-container *ngIf="attemptsData.scored">
                 <ion-item-divider>
                     <ion-label>
-                        <h2>{{ attemptsData.scored.title }}</h2>
+                        <h3 class="item-heading">{{ attemptsData.scored.title }}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ng-container *ngTemplateOutlet="attemptsTemplate; context: {attempts: attemptsData.scored.attempts}">
@@ -48,7 +48,7 @@ <h2>{{ attemptsData.scored.title }}</h2>
             <ng-container *ngIf="attemptsData.attempts && attemptsData.attempts.length">
                 <ion-item-divider>
                     <ion-label>
-                        <h2>{{ 'addon.mod_h5pactivity.all_attempts' | translate }}</h2>
+                        <h3 class="item-heading">{{ 'addon.mod_h5pactivity.all_attempts' | translate }}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ng-container *ngTemplateOutlet="attemptsTemplate; context: {attempts: attemptsData.attempts}"></ng-container>
diff --git a/src/addons/mod/imscp/components/toc/toc.html b/src/addons/mod/imscp/components/toc/toc.html
index e9aee76c64f..6a0565fc0cf 100644
--- a/src/addons/mod/imscp/components/toc/toc.html
+++ b/src/addons/mod/imscp/components/toc/toc.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_imscp.toc' | translate }}</h2>
+            <h1>{{ 'addon.mod_imscp.toc' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index 2ed4ab3a183..104ab736417 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -77,7 +77,7 @@
                         <ion-grid class="ion-text-wrap ion-hide-md-down">
                             <ion-row *ngIf="overview.lessonscored">
                                 <ion-col class="ion-text-center">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</p>
                                     <p *ngIf="overview.numofattempts > 0">
                                         {{ 'core.percentagenumber' | translate:{$a: overview.avescore} }}
                                     </p>
@@ -85,7 +85,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</h3>
                                 </ion-col>
 
                                 <ion-col class="ion-text-center">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</p>
                                     <p *ngIf="overview.highscore != null">
                                         {{ 'core.percentagenumber' | translate:{$a: overview.highscore} }}
                                     </p>
@@ -93,7 +93,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</h3>
                                 </ion-col>
 
                                 <ion-col class="ion-text-center">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</p>
                                     <p *ngIf="overview.lowscore != null">
                                         {{ 'core.percentagenumber' | translate:{$a: overview.lowscore} }}
                                     </p>
@@ -102,7 +102,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</h3>
                             </ion-row>
                             <ion-row>
                                 <ion-col class="ion-text-center">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</p>
                                     <p *ngIf="overview.avetime != null && overview.numofattempts">{{ avetimeReadable }}</p>
                                     <p *ngIf="overview.avetime == null || !overview.numofattempts">
                                         {{ 'addon.mod_lesson.notcompleted' | translate }}
@@ -110,13 +110,13 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</h3>
                                 </ion-col>
 
                                 <ion-col class="ion-text-center">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</p>
                                     <p *ngIf="overview.hightime != null">{{ hightimeReadable }}</p>
                                     <p *ngIf="overview.hightime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
                                 </ion-col>
 
                                 <ion-col class="ion-text-center">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</p>
                                     <p *ngIf="overview.lowtime != null">{{ lowtimeReadable }}</p>
                                     <p *ngIf="overview.lowtime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
                                 </ion-col>
@@ -127,7 +127,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</h3>
                         <ion-grid class="ion-text-wrap ion-hide-md-up">
                             <ion-row>
                                 <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</p>
                                     <p *ngIf="overview.numofattempts > 0">
                                         {{ 'core.percentagenumber' | translate:{$a: overview.avescore} }}
                                     </p>
@@ -135,7 +135,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.averagescore' | translate }}</h3>
                                 </ion-col>
 
                                 <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</p>
                                     <p *ngIf="overview.avetime != null && overview.numofattempts">{{ avetimeReadable }}</p>
                                     <p *ngIf="overview.avetime == null || !overview.numofattempts">
                                         {{ 'addon.mod_lesson.notcompleted' | translate }}
@@ -144,7 +144,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.averagetime' | translate }}</h3>
                             </ion-row>
                             <ion-row>
                                 <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</p>
                                     <p *ngIf="overview.highscore != null">
                                         {{ 'core.percentagenumber' | translate:{$a: overview.highscore} }}
                                     </p>
@@ -152,14 +152,14 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.highscore' | translate }}</h3>
                                 </ion-col>
 
                                 <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.hightime' | translate }}</p>
                                     <p *ngIf="overview.hightime != null">{{ hightimeReadable }}</p>
                                     <p *ngIf="overview.hightime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
                                 </ion-col>
                             </ion-row>
                             <ion-row>
                                 <ion-col class="ion-text-center" *ngIf="overview.lessonscored">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</p>
                                     <p *ngIf="overview.lowscore != null">
                                         {{ 'core.percentagenumber' | translate:{$a: overview.lowscore} }}
                                     </p>
@@ -167,7 +167,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.lowscore' | translate }}</h3>
                                 </ion-col>
 
                                 <ion-col [ngClass]="{'ion-text-center': overview.lessonscored}">
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.lowtime' | translate }}</p>
                                     <p *ngIf="overview.lowtime != null">{{ lowtimeReadable }}</p>
                                     <p *ngIf="overview.lowtime == null">{{ 'addon.mod_lesson.notcompleted' | translate }}</p>
                                 </ion-col>
diff --git a/src/addons/mod/lesson/components/menu-modal/menu-modal.html b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
index 80e242f0b05..a0a1c2cb769 100644
--- a/src/addons/mod/lesson/components/menu-modal/menu-modal.html
+++ b/src/addons/mod/lesson/components/menu-modal/menu-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ pageInstance?.lesson?.name }}</h2>
+            <h1>{{ pageInstance?.lesson?.name }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/lesson/components/password-modal/password-modal.html b/src/addons/mod/lesson/components/password-modal/password-modal.html
index 1f033719b35..5bcc9b3751a 100644
--- a/src/addons/mod/lesson/components/password-modal/password-modal.html
+++ b/src/addons/mod/lesson/components/password-modal/password-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.login.password' | translate }}</h2>
+            <h1>{{ 'core.login.password' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index 9613763db44..6d8e6e8dcb1 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -94,7 +94,7 @@ <h2>
                             </ion-item>
                             <ion-item class="ion-text-wrap" *ngIf="!question.textarea && question.useranswer">
                                 <ion-label>
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.youranswer' | translate }}</p>
                                     <p>
                                         <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                             [text]="question.useranswer" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index 46392fceca8..f55593aaea7 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -43,12 +43,12 @@ <h2>{{student.fullname}}</h2>
                         <ion-grid class="ion-no-padding">
                             <ion-row>
                                 <ion-col>
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.grade' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.grade' | translate }}</p>
                                     <p>{{ 'core.percentagenumber' | translate:{$a: retake.userstats.grade} }}</p>
                                 </ion-col>
 
                                 <ion-col>
-                                    <h3 class="item-heading">{{ 'addon.mod_lesson.rawgrade' | translate }}</h3>
+                                    <p class="item-heading">{{ 'addon.mod_lesson.rawgrade' | translate }}</p>
                                     <p>{{ retake.userstats.gradeinfo.earned }} / {{ retake.userstats.gradeinfo.total }}</p>
                                 </ion-col>
                             </ion-row>
@@ -57,13 +57,13 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.rawgrade' | translate }}</h3>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h3 class="item-heading">{{ 'addon.mod_lesson.timetaken' | translate }}</h3>
+                        <p class="item-heading">{{ 'addon.mod_lesson.timetaken' | translate }}</p>
                         <p>{{ timeTakenReadable }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h3 class="item-heading">{{ 'addon.mod_lesson.completed' | translate }}</h3>
+                        <p class="item-heading">{{ 'addon.mod_lesson.completed' | translate }}</p>
                         <p>{{ retake.userstats.completed * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
@@ -84,7 +84,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.completed' | translate }}</h3>
                     </ion-card-header>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3>
+                            <p class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</p>
                             <p>
                                 <core-format-text [component]="component" [componentId]="lesson?.coursemodule" collapsible-item
                                     [text]="page.contents" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
@@ -95,7 +95,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.question' | translate }}</h3>
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h3 class="item-heading">{{ 'addon.mod_lesson.answer' | translate }}</h3>
+                            <p class="item-heading">{{ 'addon.mod_lesson.answer' | translate }}</p>
                         </ion-label>
                     </ion-item>
                     <ion-item class="ion-text-wrap" *ngIf="!page.answerdata || !page.answerdata.answers || !page.answerdata.answers.length">
@@ -226,7 +226,7 @@ <h3 class="item-heading">{{ 'addon.mod_lesson.answer' | translate }}</h3>
 
                         <ion-item class="ion-text-wrap" *ngIf="page.answerdata.response">
                             <ion-label>
-                                <h3 class="item-heading">{{ 'addon.mod_lesson.response' | translate }}</h3>
+                                <p class="item-heading">{{ 'addon.mod_lesson.response' | translate }}</p>
                                 <p>
                                     <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                         [text]="page.answerdata.response" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
diff --git a/src/addons/mod/quiz/accessrules/offlineattempts/component/addon-mod-quiz-access-offline-attempts.html b/src/addons/mod/quiz/accessrules/offlineattempts/component/addon-mod-quiz-access-offline-attempts.html
index e99c2d3b23f..f26fb8e73f1 100644
--- a/src/addons/mod/quiz/accessrules/offlineattempts/component/addon-mod-quiz-access-offline-attempts.html
+++ b/src/addons/mod/quiz/accessrules/offlineattempts/component/addon-mod-quiz-access-offline-attempts.html
@@ -1,6 +1,6 @@
 <ion-item class="ion-text-wrap">
     <ion-label>
-        <h3 class="item-heading">{{ 'core.settings.synchronization' | translate }}</h3>
+        <p class="item-heading">{{ 'core.settings.synchronization' | translate }}</p>
         <p>{{ 'addon.mod_quiz.confirmcontinueoffline' | translate:{$a: syncTimeReadable} }}</p>
     </ion-label>
 </ion-item>
diff --git a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
index 9b713053ea4..ed53f0e8e76 100644
--- a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
+++ b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
@@ -1,6 +1,6 @@
 <ion-item class="ion-text-wrap">
     <ion-label>
-        <h3 class="item-heading">{{ 'addon.mod_quiz.quizpassword' | translate }}</h3>
+        <p class="item-heading">{{ 'addon.mod_quiz.quizpassword' | translate }}</p>
         <p>{{ 'addon.mod_quiz.requirepasswordmessage' | translate}}</p>
     </ion-label>
 </ion-item>
diff --git a/src/addons/mod/quiz/accessrules/timelimit/component/addon-mod-quiz-access-time-limit.html b/src/addons/mod/quiz/accessrules/timelimit/component/addon-mod-quiz-access-time-limit.html
index b48075dbfb3..6cd54c1e86c 100644
--- a/src/addons/mod/quiz/accessrules/timelimit/component/addon-mod-quiz-access-time-limit.html
+++ b/src/addons/mod/quiz/accessrules/timelimit/component/addon-mod-quiz-access-time-limit.html
@@ -1,6 +1,6 @@
 <ion-item class="ion-text-wrap">
     <ion-label>
-        <h3 class="item-heading">{{ 'addon.mod_quiz.confirmstartheader' | translate }}</h3>
+        <p class="item-heading">{{ 'addon.mod_quiz.confirmstartheader' | translate }}</p>
         <p>{{ 'addon.mod_quiz.confirmstart' | translate:{$a: readableTimeLimit} }}</p>
     </ion-label>
 </ion-item>
diff --git a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
index 239b919fa2e..0f4b70459c0 100644
--- a/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
+++ b/src/addons/mod/quiz/components/navigation-modal/navigation-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h2>
+            <h1>{{ 'addon.mod_quiz.quiznavigation' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
index c642e6cc914..effcffa7644 100644
--- a/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
+++ b/src/addons/mod/quiz/components/preflight-modal/preflight-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ title | translate }}</h2>
+            <h1>{{ title | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/quiz/pages/attempt/attempt.html b/src/addons/mod/quiz/pages/attempt/attempt.html
index e7dfbdeadee..9227f2e1f6a 100644
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@@ -20,32 +20,32 @@ <h1>
         <ion-list *ngIf="attempt">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_quiz.attemptnumber' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_quiz.attemptnumber' | translate }}</p>
                     <p *ngIf="attempt.preview">{{ 'addon.mod_quiz.preview' | translate }}</p>
                     <p *ngIf="!attempt.preview">{{ attempt.attempt }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_quiz.attemptstate' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_quiz.attemptstate' | translate }}</p>
                     <p *ngFor="let sentence of attempt.readableState">{{ sentence }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="quiz!.showMarkColumn && attempt.readableMark !== ''">
                 <ion-label>
-                    <h2>{{ 'addon.mod_quiz.marks' | translate }} / {{ quiz!.sumGradesFormatted }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_quiz.marks' | translate }} / {{ quiz!.sumGradesFormatted }}</p>
                     <p>{{ attempt.readableMark }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="quiz!.showGradeColumn && attempt.readableGrade !== ''">
                 <ion-label>
-                    <h2>{{ 'addon.mod_quiz.grade' | translate }} / {{ quiz!.gradeFormatted }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_quiz.grade' | translate }} / {{ quiz!.gradeFormatted }}</p>
                     <p>{{ attempt.readableGrade }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="quiz!.showFeedbackColumn && feedback">
                 <ion-label>
-                    <h2>{{ 'addon.mod_quiz.feedback' | translate }}</h2>
+                    <p class="item-heading">{{ 'addon.mod_quiz.feedback' | translate }}</p>
                     <p>
                         <core-format-text [component]="component" [componentId]="componentId" [text]="feedback" contextLevel="module"
                             [contextInstanceId]="cmId" [courseId]="courseId">
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index dd42c0bc522..2e4b6f12031 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -132,7 +132,7 @@ <h2 *ngIf="!question.number" class="inline">{{ 'core.question.information' | tra
             <!-- List of messages explaining why the quiz cannot be submitted. -->
             <ion-item class="ion-text-wrap" *ngIf="preventSubmitMessages.length">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'addon.mod_quiz.cannotsubmitquizdueto' | translate }}</h3>
+                    <p class="item-heading">{{ 'addon.mod_quiz.cannotsubmitquizdueto' | translate }}</p>
                     <p *ngFor="let message of preventSubmitMessages">{{message}}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/addons/mod/quiz/pages/review/review.html b/src/addons/mod/quiz/pages/review/review.html
index fc90cf8553a..12e0feb232f 100644
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@@ -26,43 +26,43 @@ <h1>{{ 'addon.mod_quiz.review' | translate }}</h1>
             <ion-list>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.startedon' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.startedon' | translate }}</p>
                         <p>{{ attempt.timestart! * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.attemptstate' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.attemptstate' | translate }}</p>
                         <p>{{ readableState }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="showCompleted">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.completedon' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.completedon' | translate }}</p>
                         <p>{{ attempt.timefinish! * 1000 | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="timeTaken">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.timetaken' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.timetaken' | translate }}</p>
                         <p>{{ timeTaken }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="overTime">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.overdue' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.overdue' | translate }}</p>
                         <p>{{ overTime }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="readableMark">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.marks' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.marks' | translate }}</p>
                         <p>{{ readableMark }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="readableGrade">
                     <ion-label>
-                        <h2>{{ 'addon.mod_quiz.grade' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_quiz.grade' | translate }}</p>
                         <p>{{ readableGrade }}</p>
                     </ion-label>
                 </ion-item>
diff --git a/src/addons/mod/resource/components/index/addon-mod-resource-index.html b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
index 020ba6eea6a..3a7823f5453 100644
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@@ -32,7 +32,7 @@
         <ion-list>
             <ion-item class="ion-text-wrap" *ngIf="type">
                 <ion-label>
-                    <h3>{{ 'core.type' | translate }}</h3>
+                    <p class="item-heading">{{ 'core.type' | translate }}</p>
                     <p>{{ type }}</p>
                 </ion-label>
             </ion-item>
@@ -40,28 +40,28 @@ <h3>{{ 'core.type' | translate }}</h3>
             <ng-container *ngIf="!isExternalFile">
                 <ion-item class="ion-text-wrap" *ngIf="readableSize">
                     <ion-label>
-                        <h3>{{ 'core.size' | translate }}</h3>
+                        <p class="item-heading">{{ 'core.size' | translate }}</p>
                         <p>{{ readableSize }}</p>
                     </ion-label>
                 </ion-item>
 
                 <ion-item class="ion-text-wrap" *ngIf="timecreated > 0">
                     <ion-label>
-                        <h3>{{ 'core.datecreated' | translate }}</h3>
+                        <p class="item-heading">{{ 'core.datecreated' | translate }}</p>
                         <p>{{ timecreated | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
 
                 <ion-item class="ion-text-wrap" *ngIf="timemodified > 0">
                     <ion-label>
-                        <h3>{{ 'core.lastmodified' | translate }}</h3>
+                        <p class="item-heading">{{ 'core.lastmodified' | translate }}</p>
                         <p>{{ timemodified | coreFormatDate }}</p>
                     </ion-label>
                 </ion-item>
 
                 <ion-item class="ion-text-wrap" *ngIf="downloadTimeReadable">
                     <ion-label>
-                        <h3>{{ 'core.lastdownloaded' | translate }}</h3>
+                        <p class="item-heading">{{ 'core.lastdownloaded' | translate }}</p>
                         <p>{{ downloadTimeReadable }}</p>
                         <ion-grid *ngIf="currentStatus === outdatedStatus" class="addon-mod_resource-outdated">
                             <ion-row class="ion-align-items-center">
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index d2b0c257f74..de077cdb957 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -214,7 +214,7 @@ <h3 class="item-heading">{{'core.grades.grades' | translate}}</h3>
                 <ion-item class="ion-text-center" *ngIf="downloading">
                     <ion-label>
                         <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
-                        <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
+                        <p class="item-heading" *ngIf="progressMessage">{{ progressMessage | translate }}</p>
                         <core-progress-bar *ngIf="showPercentage" [progress]="percentage" [a11yText]="progressMessage">
                         </core-progress-bar>
                     </ion-label>
diff --git a/src/addons/mod/scorm/components/toc/toc.html b/src/addons/mod/scorm/components/toc/toc.html
index 01163c6fcda..224f8270cac 100644
--- a/src/addons/mod/scorm/components/toc/toc.html
+++ b/src/addons/mod/scorm/components/toc/toc.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_scorm.toc' | translate }}</h2>
+            <h1>{{ 'addon.mod_scorm.toc' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/url/components/index/addon-mod-url-index.html b/src/addons/mod/url/components/index/addon-mod-url-index.html
index 0e7fa1baa05..85519119458 100644
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@@ -31,7 +31,7 @@
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'addon.mod_url.pointingtourl' | translate }}</h2>
+                <p class="item-heading">{{ 'addon.mod_url.pointingtourl' | translate }}</p>
                 <p>{{ url }}</p>
             </ion-label>
         </ion-item>
diff --git a/src/addons/mod/wiki/components/map/map.html b/src/addons/mod/wiki/components/map/map.html
index c8c1a44cb77..f0cb4d57705 100644
--- a/src/addons/mod/wiki/components/map/map.html
+++ b/src/addons/mod/wiki/components/map/map.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_wiki.map' | translate }}</h2>
+            <h1>{{ 'addon.mod_wiki.map' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
index aa7de86e636..866a50f80fe 100644
--- a/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
+++ b/src/addons/mod/wiki/components/subwiki-picker/addon-mod-wiki-subwiki-picker.html
@@ -2,7 +2,7 @@
     <ng-container *ngFor="let group of subwikis">
         <ion-item-divider *ngIf="group.label">
             <ion-label>
-                <h2>{{ group.label }}</h2>
+                <p class="item-heading">{{ group.label }}</p>
             </ion-label>
         </ion-item-divider>
         <ion-item class="ion-text-wrap" *ngFor="let subwiki of group.subwikis" (click)="openSubwiki(subwiki)" button
diff --git a/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html b/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
index d3d3ed85d34..49b3c5fdd8f 100644
--- a/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
+++ b/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
@@ -1,4 +1,4 @@
-<ng-container *ngFor="let field of assessment.form?.fields; let n = index">
+<section *ngFor="let field of assessment.form?.fields; let n = index">
     <ion-card *ngIf="n < assessment.form?.dimenssionscount">
         <ion-item class="ion-text-wrap">
             <ion-label>
@@ -22,7 +22,8 @@ <h2>{{ field.dimtitle }}</h2>
         </ion-item>
         <ion-item *ngIf="!edit && field.grades" class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' | translate : {'$a': field.dimtitle } }}</h2>
+                <p class="item-heading">{{ 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' | translate : {'$a':
+                    field.dimtitle } }}</p>
                 <ng-container *ngFor="let grade of field.grades">
                     <p *ngIf="grade.value === selectedValues[n].grade">{{grade.label}}</p>
                 </ng-container>
@@ -37,9 +38,9 @@ <h2>{{ 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' | translat
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
-                <h2>
+                <p class="item-heading">
                     {{ 'addon.mod_workshop_assessment_accumulative.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
-                </h2>
+                </p>
                 <p>
                     <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
                         [courseId]="courseId">
@@ -48,4 +49,4 @@ <h2>
             </ion-label>
         </ion-item>
     </ion-card>
-</ng-container>
+</section>
diff --git a/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html b/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
index 4badf862d2c..974b0deb634 100644
--- a/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
+++ b/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
@@ -1,4 +1,4 @@
-<ng-container *ngFor="let field of assessment.form?.fields; let n = index">
+<section *ngFor="let field of assessment.form?.fields; let n = index">
     <ion-card *ngIf="n < assessment.form?.dimenssionscount">
         <ion-item class="ion-text-wrap">
             <ion-label>
@@ -20,7 +20,8 @@ <h2>{{ field.dimtitle }}</h2>
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'addon.mod_workshop_assessment_comments.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}</h2>
+                <p class="item-heading">{{ 'addon.mod_workshop_assessment_comments.dimensioncommentfor' | translate : {'$a': field.dimtitle
+                    } }}</p>
                 <p>
                     <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
                         [courseId]="courseId">
@@ -29,4 +30,4 @@ <h2>{{ 'addon.mod_workshop_assessment_comments.dimensioncommentfor' | translate
             </ion-label>
         </ion-item>
     </ion-card>
-</ng-container>
+</section>
diff --git a/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html b/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
index b742587b42a..33a93fc1442 100644
--- a/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
+++ b/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
@@ -1,4 +1,4 @@
-<ng-container *ngFor="let field of assessment.form?.fields; let n = index">
+<section *ngFor="let field of assessment.form?.fields; let n = index">
     <ion-card *ngIf="n < assessment.form?.dimenssionscount">
         <ion-item class="ion-text-wrap">
             <ion-label>
@@ -42,7 +42,8 @@ <h2>{{ field.dimtitle }}</h2>
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}</h2>
+                <p class="item-heading">{{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle
+                    } }}</p>
                 <p>
                     <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
                         [courseId]="courseId">
@@ -51,4 +52,4 @@ <h2>{{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate
             </ion-label>
         </ion-item>
     </ion-card>
-</ng-container>
+</section>
diff --git a/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html b/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
index 1920e85c8be..58fa080bad8 100644
--- a/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
+++ b/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
@@ -1,4 +1,4 @@
-<ng-container *ngFor="let field of assessment.form?.fields; let n = index">
+<section *ngFor="let field of assessment.form?.fields; let n = index">
     <ion-card *ngIf="n < assessment.form?.dimenssionscount">
         <ion-item class="ion-text-wrap">
             <ion-label>
@@ -24,4 +24,4 @@ <h2 [core-mark-required]="edit">{{ field.dimtitle }}</h2>
             </ion-radio-group>
         </ion-list>
     </ion-card>
-</ng-container>
+</section>
diff --git a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
index 1f3111ee3c7..160f9e4f041 100644
--- a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
+++ b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
@@ -1,4 +1,4 @@
-<h3 class="ion-padding">{{ 'addon.mod_workshop.assessmentform' | translate }}</h3>
+<h2 class="ion-padding">{{ 'addon.mod_workshop.assessmentform' | translate }}</h2>
 
 <form name="mma-mod_workshop-assessment-form" #assessmentForm>
     <core-loading [hideUntil]="assessmentStrategyLoaded">
@@ -18,7 +18,7 @@ <h3 class="ion-padding">{{ 'addon.mod_workshop.assessmentform' | translate }}</h
             (edit || data.assessment?.feedbackauthor || data.assessment?.feedbackattachmentfiles?.length) ">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.overallfeedback' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.overallfeedback' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <ion-item position="stacked" *ngIf="edit">
diff --git a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
index 434e6f5a2a0..7487a611876 100644
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@@ -31,7 +31,7 @@ <h2 class="ion-text-wrap">{{ phases[workshop!.phase].title }}</h2>
                 <ion-icon slot="start" name="fas-check-circle" color="success" *ngIf="task.completed == '1'" aria-hidden="true">
                 </ion-icon>
                 <ion-label>
-                    <h2>{{task.title}}</h2>
+                    <p class="item-heading">{{task.title}}</p>
                     <p *ngIf="task.details" [innerHTML]="task.details"></p>
                 </ion-label>
                 <ion-icon slot="end" *ngIf="task.link && task.code != 'submit'" name="fas-external-link-alt" aria-hidden="true">
@@ -44,7 +44,7 @@ <h2>{{task.title}}</h2>
     <ion-card *ngIf="description && workshop && workshop!.phase == PHASE_SETUP">
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'core.description' | translate }}</h2>
+                <h3 class="item-heading">{{ 'core.description' | translate }}</h3>
                 <core-format-text [text]="description" [component]="component" [componentId]="componentId" contextLevel="module"
                     [contextInstanceId]="module.id" [courseId]="courseId">
                 </core-format-text>
@@ -58,7 +58,7 @@ <h2>{{ 'core.description' | translate }}</h2>
             <ion-card *ngIf="workshop!.conclusion">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
+                        <h3 class="item-heading">{{ 'addon.mod_workshop.conclusion' | translate }}</h3>
                         <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop!.conclusion"
                             contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                         </core-format-text>
@@ -69,18 +69,18 @@ <h2>{{ 'addon.mod_workshop.conclusion' | translate }}</h2>
             <ion-card *ngIf="userGrades">
                 <ion-item-divider class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.yourgrades' | translate }}</h2>
+                        <h3 class="item-heading">{{ 'addon.mod_workshop.yourgrades' | translate }}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="userGrades.submissionlongstrgrade">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.submissiongrade' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_workshop.submissiongrade' | translate }}</p>
                         <p>{{ userGrades.submissionlongstrgrade }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="userGrades.assessmentlongstrgrade">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.gradinggrade' | translate }}</h2>
+                        <p class="item-heading">{{ 'addon.mod_workshop.gradinggrade' | translate }}</p>
                         <p>{{ userGrades.assessmentlongstrgrade }}</p>
                     </ion-label>
                 </ion-item>
@@ -91,7 +91,7 @@ <h2>{{ 'addon.mod_workshop.gradinggrade' | translate }}</h2>
         <ion-card *ngIf="workshop!.phase == PHASE_SUBMISSION && workshop!.instructauthors">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h3>
                     <core-format-text collapsible-item [component]="component" [componentId]="module.id" [text]="workshop!.instructauthors"
                         contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text>
@@ -102,12 +102,12 @@ <h2>{{ 'addon.mod_workshop.areainstructauthors' | translate }}</h2>
         <ion-card *ngIf="canSubmit">
             <ion-item-divider class="ion-text-wrap">
                 <ion-label>
-                    <h2 *ngIf="workshop!.phase != PHASE_CLOSED || !submission">
+                    <h3 class="item-heading" *ngIf="workshop!.phase != PHASE_CLOSED || !submission">
                         {{ 'addon.mod_workshop.yoursubmission' | translate }}
-                    </h2>
-                    <h2 *ngIf="workshop!.phase == PHASE_CLOSED && submission">
+                    </h3>
+                    <h3 class="item-heading" *ngIf="workshop!.phase == PHASE_CLOSED && submission">
                         {{ 'addon.mod_workshop.yoursubmissionwithassessments' | translate }}
-                    </h2>
+                    </h3>
                 </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngIf="!submission">
@@ -125,7 +125,7 @@ <h2 *ngIf="workshop!.phase == PHASE_CLOSED && submission">
             <ion-card *ngIf="publishedSubmissions && publishedSubmissions.length">
                 <ion-item-divider class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2>
+                        <h3 class="item-heading">{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ng-container *ngFor="let submission of publishedSubmissions">
@@ -141,7 +141,7 @@ <h2>{{ 'addon.mod_workshop.publishedsubmissions' | translate }}</h2>
             <ion-card *ngIf="workshop!.phase == PHASE_ASSESSMENT && workshop!.instructreviewers">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2>
+                        <h3 class="item-heading">{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h3>
                         <core-format-text collapsible-item [component]="component" [componentId]="module.id"
                             [text]="workshop!.instructreviewers" contextLevel="module" [contextInstanceId]="module.id"
                             [courseId]="courseId">
@@ -153,7 +153,7 @@ <h2>{{ 'addon.mod_workshop.areainstructreviewers' | translate }}</h2>
             <ion-card *ngIf="canAssess">
                 <ion-item-divider class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2>
+                        <h3 class="item-heading">{{ 'addon.mod_workshop.assignedassessments' | translate }}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="!assessments || !assessments.length">
@@ -175,8 +175,10 @@ <h2>{{ 'addon.mod_workshop.assignedassessments' | translate }}</h2>
             ((grades && grades.length) || (groupInfo && (groupInfo.separateGroups || groupInfo.visibleGroups)))">
             <ion-item-divider class="ion-text-wrap">
                 <ion-label>
-                    <h2 *ngIf="workshop!.phase == PHASE_SUBMISSION">{{ 'addon.mod_workshop.submissionsreport' | translate }}</h2>
-                    <h2 *ngIf="workshop!.phase > PHASE_SUBMISSION">{{ 'addon.mod_workshop.gradesreport' | translate }}</h2>
+                    <h3 class="item-heading" *ngIf="workshop!.phase == PHASE_SUBMISSION">{{ 'addon.mod_workshop.submissionsreport' |
+                        translate }}</h3>
+                    <h3 class="item-heading" *ngIf="workshop!.phase > PHASE_SUBMISSION">{{ 'addon.mod_workshop.gradesreport' | translate }}
+                    </h3>
                 </ion-label>
             </ion-item-divider>
             <core-group-selector [groupInfo]="groupInfo" [(selected)]="group" (selectedChange)="setGroup(group)"></core-group-selector>
diff --git a/src/addons/mod/workshop/components/phase/phase.html b/src/addons/mod/workshop/components/phase/phase.html
index 407551e370b..c9720ceb79d 100644
--- a/src/addons/mod/workshop/components/phase/phase.html
+++ b/src/addons/mod/workshop/components/phase/phase.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.mod_workshop.userplan' | translate }}</h2>
+            <h1>{{ 'addon.mod_workshop.userplan' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@@ -40,7 +40,7 @@ <h2>{{ phase.title }}</h2>
                 <ion-icon slot="start" name="fas-check-circle" color="success" *ngIf="task.completed == '1'"
                     [attr.aria-label]="'addon.mod_workshop.taskdone' | translate"></ion-icon>
                 <ion-label>
-                    <h2 class="ion-text-wrap">{{task.title}}</h2>
+                    <p class="item-heading ion-text-wrap">{{task.title}}</p>
                     <p *ngIf="task.details" [innerHTML]="task.details"></p>
                 </ion-label>
                 <ion-icon slot="end" *ngIf="task.link && task.code != 'submit'" name="fas-external-link-alt" aria-hidden="true">
diff --git a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
index f69d312a967..68efe5b4ee6 100644
--- a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
@@ -45,9 +45,9 @@ <h2>
                 [userId]="evaluateByProfile.id"></core-user-avatar>
 
             <ion-label>
-                <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">
+                <p class="item-heading" *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                     {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
-                </h2>
+                </p>
                 <core-format-text [text]="submission.feedbackauthor" contextLevel="module" [contextInstanceId]="module.id"
                     [courseId]="courseId">
                 </core-format-text>
diff --git a/src/addons/mod/workshop/pages/assessment/assessment.html b/src/addons/mod/workshop/pages/assessment/assessment.html
index b5de87146c8..cde179e45b1 100644
--- a/src/addons/mod/workshop/pages/assessment/assessment.html
+++ b/src/addons/mod/workshop/pages/assessment/assessment.html
@@ -57,7 +57,7 @@ <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
         <form [formGroup]="evaluateForm" *ngIf="evaluating" #evaluateFormEl>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.assessmentsettings' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.assessmentsettings' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access?.canallocate">
@@ -73,7 +73,7 @@ <h2>{{ 'addon.mod_workshop.assessmentsettings' | translate }}</h2>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.gradinggradecalculated' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.gradinggradecalculated' | translate }}</h3>
                     <p>{{ gradingGrade }}</p>
                 </ion-label>
             </ion-item>
@@ -99,9 +99,9 @@ <h2>{{ 'addon.mod_workshop.gradinggradecalculated' | translate }}</h2>
                 <core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" slot="start" [courseId]="courseId"
                     [userId]="evaluateByProfile.id"></core-user-avatar>
                 <ion-label>
-                    <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">
+                    <h3 class="item-heading" *ngIf="evaluateByProfile && evaluateByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}
-                    </h2>
+                    </h3>
                     <core-format-text [text]="evaluate.text" contextLevel="module" [contextInstanceId]="workshop?.coursemodule"
                         [courseId]="courseId">
                     </core-format-text>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index 294fdb3aff7..45ef55568aa 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -77,7 +77,7 @@ <h2>{{ 'addon.mod_workshop.yourassessment' | translate }}</h2>
         <ion-list *ngIf="submissionInfo && submissionInfo.reviewedby && submissionInfo.reviewedby.length && !assessment">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.receivedgrades' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.receivedgrades' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <ng-container *ngFor="let reviewer of submissionInfo.reviewedby">
@@ -90,7 +90,7 @@ <h2>{{ 'addon.mod_workshop.receivedgrades' | translate }}</h2>
         <ion-list *ngIf="submissionInfo && submissionInfo.reviewerof && submissionInfo.reviewerof.length && !assessment">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.givengrades' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.givengrades' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <addon-mod-workshop-assessment *ngFor="let reviewer of submissionInfo.reviewerof" [assessment]="reviewer" [courseId]="courseId"
@@ -101,7 +101,7 @@ <h2>{{ 'addon.mod_workshop.givengrades' | translate }}</h2>
         <form [formGroup]="feedbackForm" *ngIf="canAddFeedback && submission" #feedbackFormEl>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.feedbackauthor' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.feedbackauthor' | translate }}</h3>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access.canpublishsubmissions">
@@ -112,7 +112,7 @@ <h2>{{ 'addon.mod_workshop.feedbackauthor' | translate }}</h2>
 
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>{{ 'addon.mod_workshop.gradecalculated' | translate }}</h2>
+                    <h3 class="item-heading">{{ 'addon.mod_workshop.gradecalculated' | translate }}</h3>
                     <p>{{ submission.grade }}</p>
                 </ion-label>
             </ion-item>
@@ -142,9 +142,9 @@ <h2>{{ 'addon.mod_workshop.gradecalculated' | translate }}</h2>
                 <core-user-avatar *ngIf="evaluateGradingByProfile" [user]="evaluateGradingByProfile" slot="start" [courseId]="courseId"
                     [userId]="evaluateGradingByProfile.id"></core-user-avatar>
                 <ion-label>
-                    <h2 *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">
+                    <h3 class="item-heading" *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">
                         {{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}
-                    </h2>
+                    </h3>
                     <core-format-text [text]="assessment!.feedbackreviewer" contextLevel="module" [contextInstanceId]="module.id"
                         [courseId]="courseId">
                     </core-format-text>
diff --git a/src/addons/notes/components/add/add-modal.html b/src/addons/notes/components/add/add-modal.html
index e3cb5c8580a..55a6feeedc1 100644
--- a/src/addons/notes/components/add/add-modal.html
+++ b/src/addons/notes/components/add/add-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'addon.notes.addnewnote' | translate }}</h2>
+            <h1>{{ 'addon.notes.addnewnote' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index 6c58feff3bb..af931bd96c5 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -34,7 +34,7 @@ <h1>{{ 'addon.notes.notes' | translate }}</h1>
         <ion-item class="ion-text-wrap" *ngIf="user">
             <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
             <ion-label>
-                <h2>{{user!.fullname}}</h2>
+                <p class="item-heading">{{user!.fullname}}</p>
             </ion-label>
         </ion-item>
 
diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.html b/src/addons/storagemanager/pages/course-storage/course-storage.html
index 8ec983aabd7..c8a243275ca 100644
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@@ -108,11 +108,11 @@ <h1>{{ 'addon.storagemanager.coursedownloads' | translate }}</h1>
                                     [modname]="module.modname" [componentId]="module.instance">
                                 </core-mod-icon>
                                 <ion-label class="ion-text-wrap">
-                                    <h3 class="{{module.handlerData!.class}} addon-storagemanager-module-size">
+                                    <p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">
                                         <core-format-text [text]="module.handlerData.title" [courseId]="module.course" contextLevel="module"
                                             [contextInstanceId]="module.id" [adaptImg]="false">
                                         </core-format-text>
-                                    </h3>
+                                    </p>
                                     <ion-badge [color]="module.downloadStatus == statusDownloaded ? 'success' : 'light'"
                                         *ngIf="!module.calculatingSize && module.totalSize > 0">
                                         <ion-icon name="fam-cloud-done" *ngIf="module.downloadStatus == statusDownloaded"
diff --git a/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html b/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
index eaa9ec043cb..64812f373c0 100644
--- a/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
+++ b/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
@@ -1,7 +1,7 @@
 <!-- Render (no edit). -->
 <ion-item *ngIf="!edit && field && field.name">
     <ion-label>
-        <h2>{{ field.name }}</h2>
+        <p class="item-heading">{{ field.name }}</p>
         <p *ngIf="value != '0'">
             {{ 'core.yes' | translate }}
         </p>
@@ -19,4 +19,4 @@ <h2>{{ field.name }}</h2>
     </ion-label>
     <ion-checkbox item-end [formControlName]="modelName">
     </ion-checkbox>
-</ion-item>
\ No newline at end of file
+</ion-item>
diff --git a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
index bf48afb57a5..19b3d16de91 100644
--- a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
+++ b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
@@ -1,7 +1,7 @@
 <!-- Render (no edit). -->
 <ion-item *ngIf="!edit && field && field.name">
     <ion-label>
-        <h2>{{ field.name }}</h2>
+        <p class="item-heading">{{ field.name }}</p>
         <p>{{ valueNumber * 1000 | coreFormatDate }}</p>
     </ion-label>
 </ion-item>
diff --git a/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html b/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
index 3816c2090b0..a657ef6c1e3 100644
--- a/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
+++ b/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
@@ -1,7 +1,7 @@
 <!-- Render (no edit). -->
 <ion-item *ngIf="!edit && field && field.name">
     <ion-label>
-        <h2>{{ field.name }}</h2>
+        <p class="item-heading">{{ field.name }}</p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
             </core-format-text>
diff --git a/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html b/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
index 4ee87abe64c..2426c2dd378 100644
--- a/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
+++ b/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
@@ -1,7 +1,7 @@
 <!-- Render (no edit). -->
 <ion-item *ngIf="!edit && field && field.name">
     <ion-label>
-        <h2>{{ field.name }}</h2>
+        <p class="item-heading">{{ field.name }}</p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
             </core-format-text>
diff --git a/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html b/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
index bd1a4189133..ff938e96e0f 100644
--- a/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
+++ b/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
@@ -1,7 +1,7 @@
 <!-- Render (no edit). -->
 <ion-item *ngIf="!edit && field && field.name">
     <ion-label>
-        <h2>{{ field.name }}</h2>
+        <p class="item-heading">{{ field.name }}</p>
         <p>
             <core-format-text [text]="value" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
             </core-format-text>
diff --git a/src/core/components/tabs-outlet/core-tabs-outlet.html b/src/core/components/tabs-outlet/core-tabs-outlet.html
index b820e9c7235..8933706b0bf 100644
--- a/src/core/components/tabs-outlet/core-tabs-outlet.html
+++ b/src/core/components/tabs-outlet/core-tabs-outlet.html
@@ -16,7 +16,7 @@
                             [tabindex]="selected == tab.id ? 0 : -1">
                             <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
                             <ion-label>
-                                {{ tab.title | translate}}
+                                <h2>{{ tab.title | translate}}</h2>
                                 <ion-badge *ngIf="tab.badge">
                                     <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
                                     <span *ngIf="tab.badgeA11yText" class="sr-only">
diff --git a/src/core/components/tabs/core-tabs.html b/src/core/components/tabs/core-tabs.html
index 26f990e080a..9ea65bdedb1 100644
--- a/src/core/components/tabs/core-tabs.html
+++ b/src/core/components/tabs/core-tabs.html
@@ -14,7 +14,7 @@
                         [attr.aria-selected]="selected == tab.id" [tabindex]="selected == tab.id ? 0 : -1">
                         <ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
                         <ion-label>
-                            {{ tab.title | translate}}
+                            <h2>{{ tab.title | translate}}</h2>
                             <ion-badge *ngIf="tab.badge">
                                 <span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
                                 <span *ngIf="tab.badgeA11yText" class="sr-only">
diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
index 69d09150f04..26eebb6a935 100644
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@@ -59,14 +59,16 @@
                 ion-tab-button {
                     max-width: 100%;
                     ion-label {
-                        font-size: 14px;
-                        font-weight: 400;
                         text-overflow: ellipsis;
                         white-space: nowrap;
                         overflow: hidden;
                         word-wrap: break-word;
                         max-width: 100%;
                         line-height: 1.2em;
+                        h2 {
+                            font-size: 14px;
+                            font-weight: 400;
+                        }
                     }
                 }
 
diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss
index 72e49c32fc8..721e6f354e3 100644
--- a/src/core/features/block/components/block/block.scss
+++ b/src/core/features/block/components/block/block.scss
@@ -4,7 +4,7 @@
     flex-direction: column;
     background: var(--background);
 
-    ion-item-divider {
+    ::ng-deep ion-item-divider {
         min-height: var(--item-divider-min-height);
     }
 
diff --git a/src/core/features/block/components/block/block.ts b/src/core/features/block/components/block/block.ts
index ae37afab250..b505f69373a 100644
--- a/src/core/features/block/components/block/block.ts
+++ b/src/core/features/block/components/block/block.ts
@@ -35,6 +35,7 @@ export class CoreBlockComponent implements OnChanges, OnDestroy {
     @Input() contextLevel!: string; // The context where the block will be used.
     @Input() instanceId!: number; // The instance ID associated with the context level.
     @Input() extraData!: Record<string, unknown>; // Any extra data to be passed to the block.
+    @Input() labelledBy?: string;
 
     componentClass?: Type<ICoreBlockComponent>; // The class of the component to render.
     data: Record<string, unknown> = {}; // Data to pass to the component.
diff --git a/src/core/features/block/components/block/core-block.html b/src/core/features/block/components/block/core-block.html
index 663799e01f4..100fe873ad3 100644
--- a/src/core/features/block/components/block/core-block.html
+++ b/src/core/features/block/components/block/core-block.html
@@ -1,4 +1,5 @@
 <!-- Only render the block if it's supported. -->
-<ion-card *ngIf="loaded && componentClass && block && block.visible" class="{{class}}">
+<ion-card *ngIf="loaded && componentClass && block && block.visible" class="{{class}}" role="region"
+    [attr.aria-labelledby]="labelledBy ? labelledBy : null">
     <core-dynamic-component [component]="componentClass" [data]="data"></core-dynamic-component>
 </ion-card>
diff --git a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
index f166b4111a5..efb48a855ad 100644
--- a/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
+++ b/src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.contentlinks.chooseaccount' | translate }}</h2>
+            <h1>{{ 'core.contentlinks.chooseaccount' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@@ -15,7 +15,7 @@ <h2>{{ 'core.contentlinks.chooseaccount' | translate }}</h2>
         <ion-list>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</h3>
+                    <h2 class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</h2>
                     <p>{{ url }}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/core/features/course/components/course-format/course-format.html b/src/core/features/course/components/course-format/course-format.html
index 7db7e5d2d28..16e6aca9e11 100644
--- a/src/core/features/course/components/course-format/course-format.html
+++ b/src/core/features/course/components/course-format/course-format.html
@@ -65,10 +65,11 @@
 <!-- Template to render a section. -->
 <ng-template #sectionTemplate let-section="section">
     <section *ngIf="!section.hiddenbynumsections && section.id != allSectionsId && section.id != stealthModulesSectionId"
-        class="core-course-module-list-wrapper" [id]="section.id">
+        class="core-course-module-list-wrapper" [id]="section.id"
+        [attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
         <ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
             <ion-label>
-                <h2 *ngIf="section.name" class="big">
+                <h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
                     <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id">
                     </core-format-text>
                 </h2>
diff --git a/src/core/features/course/components/course-index/course-index.html b/src/core/features/course/components/course-index/course-index.html
index 38ffbf7f3e6..b833477fd9a 100644
--- a/src/core/features/course/components/course-index/course-index.html
+++ b/src/core/features/course/components/course-index/course-index.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2 id="core-course-section-selector-label">{{ 'core.course.courseindex' | translate }}</h2>
+            <h1 id="core-course-section-selector-label">{{ 'core.course.courseindex' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
index 45b60f5e3c6..58a856f2496 100644
--- a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
+++ b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.courses.selfenrolment' | translate }}</h2>
+            <h1>{{ 'core.courses.selfenrolment' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/core/features/courses/pages/categories/categories.html b/src/core/features/courses/pages/categories/categories.html
index da1c214e4f0..c4c600bc10a 100644
--- a/src/core/features/courses/pages/categories/categories.html
+++ b/src/core/features/courses/pages/categories/categories.html
@@ -51,10 +51,10 @@ <h2 class="big">{{ 'core.courses.categories' | translate }}</h2>
                         detail="true">
                         <ion-icon name="fas-folder" slot="start" [attr.aria-label]="'core.category' | translate"></ion-icon>
                         <ion-label>
-                            <h2>
+                            <p class="item-heading">
                                 <core-format-text [text]="category.name" contextLevel="coursecat" [contextInstanceId]="category.id">
                                 </core-format-text>
-                            </h2>
+                            </p>
                         </ion-label>
                         <ion-badge slot="end" *ngIf="!showOnlyEnrolled && category.coursecount > 0" color="light">
                             <span aria-hidden="true">{{ category.coursecount }}</span>
diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
index 1f307e4b7f0..83cc1fd54d4 100644
--- a/src/core/features/courses/pages/my/my.html
+++ b/src/core/features/courses/pages/my/my.html
@@ -22,7 +22,7 @@ <h1>
     <core-loading [hideUntil]="loaded">
         <ion-item class="ion-text-wrap divider">
             <ion-label>
-                <h2 class="big">{{ 'core.courses.mycourses' | translate }}</h2>
+                <h2 class="big" id="core-courses-my-title">{{ 'core.courses.mycourses' | translate }}</h2>
             </ion-label>
             <div slot="end" class="flex-row">
                 <!-- Download all courses. -->
@@ -46,7 +46,8 @@ <h2 class="big">{{ 'core.courses.mycourses' | translate }}</h2>
             </div>
         </ion-item>
         <ion-list>
-            <core-block *ngIf="loadedBlock?.visible" [block]="loadedBlock" contextLevel="user" [instanceId]="userId"></core-block>
+            <core-block *ngIf="loadedBlock?.visible" [block]="loadedBlock" contextLevel="user" [instanceId]="userId"
+                labelledBy="core-courses-my-title"></core-block>
         </ion-list>
 
         <core-block-side-blocks-button slot="fixed" *ngIf="hasSideBlocks" contextLevel="user" [instanceId]="userId"
diff --git a/src/core/features/login/components/site-help/site-help.html b/src/core/features/login/components/site-help/site-help.html
index 25304a89a14..21ce3f3348a 100644
--- a/src/core/features/login/components/site-help/site-help.html
+++ b/src/core/features/login/components/site-help/site-help.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.login.help' | translate }}</h2>
+            <h1>{{ 'core.login.help' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeHelp()" [attr.aria-label]="'core.close' | translate">
@@ -14,7 +14,7 @@ <h2>{{ 'core.login.help' | translate }}</h2>
     <ion-list>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2><strong>{{ 'core.login.faqwhatisurlquestion' | translate }}</strong></h2>
+                <h2>{{ 'core.login.faqwhatisurlquestion' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
@@ -24,7 +24,7 @@ <h2><strong>{{ 'core.login.faqwhatisurlquestion' | translate }}</strong></h2>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2><strong>{{ 'core.login.faqcannotfindmysitequestion' | translate }}</strong></h2>
+                <h2>{{ 'core.login.faqcannotfindmysitequestion' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
@@ -34,7 +34,7 @@ <h2><strong>{{ 'core.login.faqcannotfindmysitequestion' | translate }}</strong><
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2><strong>{{ 'core.login.faqsetupsitequestion' | translate }}</strong></h2>
+                <h2>{{ 'core.login.faqsetupsitequestion' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
@@ -47,7 +47,7 @@ <h2><strong>{{ 'core.login.faqsetupsitequestion' | translate }}</strong></h2>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2><strong>{{ 'core.login.faqtestappquestion' | translate }}</strong></h2>
+                <h2>{{ 'core.login.faqtestappquestion' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
@@ -57,7 +57,7 @@ <h2><strong>{{ 'core.login.faqtestappquestion' | translate }}</strong></h2>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="canScanQR">
             <ion-label>
-                <h2><strong>{{ 'core.login.faqwhereisqrcode' | translate }}</strong></h2>
+                <h2>{{ 'core.login.faqwhereisqrcode' | translate }}</h2>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap core-login-faqwhereisqrcodeanswer" *ngIf="canScanQR">
diff --git a/src/core/features/login/components/site-help/site-help.scss b/src/core/features/login/components/site-help/site-help.scss
index 0c6f387209f..c3eb78ce7ca 100644
--- a/src/core/features/login/components/site-help/site-help.scss
+++ b/src/core/features/login/components/site-help/site-help.scss
@@ -6,4 +6,8 @@
     max-height: 220px;
     margin-top: 5px;
     margin-bottom: 5px;
-}
\ No newline at end of file
+}
+
+h2 {
+    font-weight: bold;
+}
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.html b/src/core/features/login/components/site-onboarding/site-onboarding.html
index 403c742005c..fd7d64ff6dd 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.html
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.html
@@ -19,9 +19,9 @@
             <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation" alt="">
         </div>
 
-        <h3 class="core-login-onboarding-step">
+        <h1 class="core-login-onboarding-step">
             {{'core.login.onboardingwelcome' | translate}}
-        </h3>
+        </h1>
 
         <div *ngIf="step == 0" class="core-login-onboarding-step">
             <ion-button expand="block" (click)="skip($event)" class="ion-margin-bottom" fill="outline">
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.scss b/src/core/features/login/components/site-onboarding/site-onboarding.scss
index 94fc77e9a2a..084eee0f2f7 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.scss
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.scss
@@ -26,4 +26,8 @@
             margin-top: 20px;
         }
     }
+
+    h1 {
+        font-size: 22px;
+    }
 }
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 3ad08620875..1691a2d3669 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -27,9 +27,9 @@ <h1>{{ 'core.login.login' | translate }}</h1>
                 <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
             </div>
 
-            <h3 *ngIf="siteName" class="ion-padding core-sitename">
+            <h2 *ngIf="siteName" class="ion-padding core-sitename">
                 <core-format-text [text]="siteName" [filter]="false"></core-format-text>
-            </h3>
+            </h2>
             <p class="core-siteurl">{{siteUrl}}</p>
         </div>
 
@@ -78,7 +78,7 @@ <h3 *ngIf="siteName" class="ion-padding core-sitename">
         <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
+                    <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
                 </ion-label>
             </ion-item>
             <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
@@ -91,7 +91,7 @@ <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
         <ion-list *ngIf="canSignup || authInstructions" class="ion-padding-top core-login-sign-up">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'core.login.firsttime' | translate }}</h3>
+                    <h2 class="item-heading">{{ 'core.login.firsttime' | translate }}</h2>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="authInstructions">
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index 0fa136230d3..239dbcbc4b7 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -38,7 +38,7 @@ <h1>{{ 'core.login.newaccount' | translate }}</h1>
 
                     <ion-item-divider class="ion-text-wrap">
                         <ion-label>
-                            <h3>{{ 'core.agelocationverification' | translate }}</h3>
+                            <h2>{{ 'core.agelocationverification' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
 
@@ -67,7 +67,7 @@ <h3>{{ 'core.agelocationverification' | translate }}</h3>
 
                     <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
+                            <p class="item-heading">{{ 'core.whyisthisrequired' | translate }}</p>
                             <p>{{ 'core.explanationdigitalminor' | translate }}</p>
                         </ion-label>
                     </ion-item>
@@ -91,7 +91,7 @@ <h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
                     <!-- Username and password. -->
                     <ion-item-divider class="ion-text-wrap">
                         <ion-label>
-                            <h3>{{ 'core.login.createuserandpass' | translate }}</h3>
+                            <h2>{{ 'core.login.createuserandpass' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap">
@@ -121,7 +121,7 @@ <h3>{{ 'core.login.createuserandpass' | translate }}</h3>
                     <!-- More details. -->
                     <ion-item-divider class="ion-text-wrap">
                         <ion-label>
-                            <h3>{{ 'core.login.supplyinfo' | translate }}</h3>
+                            <h2>{{ 'core.login.supplyinfo' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap">
@@ -182,7 +182,7 @@ <h3>{{ 'core.login.supplyinfo' | translate }}</h3>
                     <ng-container *ngIf="settings.recaptchapublickey">
                         <ion-item-divider class="ion-text-wrap">
                             <ion-label>
-                                <h3><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h3>
+                                <h2><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h2>
                             </ion-label>
                         </ion-item-divider>
                         <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
@@ -192,7 +192,7 @@ <h3><span [core-mark-required]="true">{{ 'core.login.security_question' | transl
                     <ng-container *ngIf="settings.sitepolicy">
                         <ion-item-divider class="ion-text-wrap">
                             <ion-label>
-                                <h3>{{ 'core.login.policyagreement' | translate }}</h3>
+                                <h2>{{ 'core.login.policyagreement' | translate }}</h2>
                             </ion-label>
                         </ion-item-divider>
                         <ion-item class="ion-text-wrap">
@@ -225,14 +225,14 @@ <h3>{{ 'core.login.policyagreement' | translate }}</h3>
         <ion-list *ngIf="allRequiredSupported && isMinor">
             <ion-item-divider class="ion-text-wrap">
                 <ion-label>
-                    <h3 *ngIf="siteName" class="item-heading ion-padding">
+                    <h2 *ngIf="siteName" class="item-heading ion-padding">
                         <core-format-text [text]="siteName" [filter]="false"></core-format-text>
-                    </h3>
+                    </h2>
                 </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'core.considereddigitalminor' | translate }}</h3>
+                    <p class="item-heading">{{ 'core.considereddigitalminor' | translate }}</p>
                     <p>{{ 'core.digitalminor_desc' | translate }}</p>
                     <p *ngIf="supportName">{{ supportName }}</p>
                     <p *ngIf="supportEmail">{{ supportEmail }}</p>
diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html
index e1e06d5bbb3..12cb62c056b 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -25,7 +25,7 @@ <h1>{{ 'core.login.passwordforgotten' | translate }}</h1>
             <form [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
                 <ion-item-divider class="ion-text-wrap">
                     <ion-label>
-                        <h2>{{ 'core.login.searchby' | translate }}</h2>
+                        <p class="item-heading">{{ 'core.login.searchby' | translate }}</p>
                     </ion-label>
                 </ion-item-divider>
                 <ion-radio-group formControlName="field">
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index f0f1c8153a8..10bb11a5cbc 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -104,7 +104,7 @@ <h1>{{ 'core.login.reconnect' | translate }}</h1>
             <ion-list *ngIf="identityProviders?.length" class="ion-padding-top core-login-identity-providers">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
+                        <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
                     </ion-label>
                 </ion-item>
                 <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders"
diff --git a/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png b/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png
index a1bccaec0b5..fb608441af1 100644
Binary files a/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png and b/src/core/features/login/tests/behat/snapshots/test-basic-usage-of-login-in-app-add-a-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png differ
diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
index 1533ef68d20..9fde2379a01 100644
--- a/src/core/features/mainmenu/components/user-menu/user-menu.html
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -1,9 +1,9 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>
+            <h1>
                 {{'core.user.useraccount' | translate}}
-            </h2>
+            </h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="close($event)" [attr.aria-label]="'core.close' | translate">
@@ -32,7 +32,7 @@ <h2>
                 detail="true" [attr.aria-label]="'core.user.profile' | translate">
                 <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
                 <ion-label>
-                    <h2>{{ siteInfo.fullname }}</h2>
+                    <p class="item-heading">{{ siteInfo.fullname }}</p>
                 </ion-label>
             </ion-item>
 
diff --git a/src/core/features/rating/components/ratings/ratings-modal.html b/src/core/features/rating/components/ratings/ratings-modal.html
index 484398ae5a8..2cb53b2881c 100644
--- a/src/core/features/rating/components/ratings/ratings-modal.html
+++ b/src/core/features/rating/components/ratings/ratings-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.rating.ratings' | translate }}</h2>
+            <h1>{{ 'core.rating.ratings' | translate }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
@@ -16,7 +16,7 @@ <h2>{{ 'core.rating.ratings' | translate }}</h2>
             <ion-item class="ion-text-wrap" *ngFor="let rating of ratings">
                 <core-user-avatar [user]="rating" [courseId]="courseId" slot="start"></core-user-avatar>
                 <ion-label>
-                    <h2>{{ rating.userfullname }}</h2>
+                    <p class="item-heading">{{ rating.userfullname }}</p>
                     <p>{{ rating.rating }}</p>
                 </ion-label>
                 <ion-note slot="end" *ngIf="rating.timemodified">
diff --git a/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html b/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
index 023ea6791ce..a3b7baf4ed4 100644
--- a/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
+++ b/src/core/features/reminders/components/set-reminder-custom/set-reminder-custom.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.reminders.customreminder' | translate }}</h2>
+            <h1>{{ 'core.reminders.customreminder' | translate }}</h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
diff --git a/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html b/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
index c7d1c24e815..45a4bd24143 100644
--- a/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
+++ b/src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ 'core.reminders.setareminder' | translate }}</h2>
+            <h1>{{ 'core.reminders.setareminder' | translate }}</h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
diff --git a/src/core/features/reportbuilder/components/report-column/report-column.html b/src/core/features/reportbuilder/components/report-column/report-column.html
index c5ee3a6ff79..b5799edb301 100644
--- a/src/core/features/reportbuilder/components/report-column/report-column.html
+++ b/src/core/features/reportbuilder/components/report-column/report-column.html
@@ -2,8 +2,11 @@
     [attr.aria-controls]="'core-report-builder-column-' + rowIndex"
     [attr.aria-label]="(isExpanded ? 'core.hidecolumns' : 'core.showcolumns') | translate" (click)="toggleRow()">
     <ion-label>
-        <h3 *ngIf="columnIndex !== 0 || (columnIndex === 0 && showFirstTitle)"> {{ header }} </h3>
-        <core-format-text [text]="column" contextLevel="site" [contextInstanceId]="contextId"></core-format-text>
+        <p class="item-heading" *ngIf="columnIndex !== 0 || (columnIndex === 0 && showFirstTitle)"> {{ header }} </p>
+        <h2 *ngIf="columnIndex === 0">
+            <core-format-text [text]="column" contextLevel="site" [contextInstanceId]="contextId"></core-format-text>
+        </h2>
+        <core-format-text *ngIf="columnIndex !== 0" [text]="column" contextLevel="site" [contextInstanceId]="contextId"></core-format-text>
     </ion-label>
     <ion-icon [class.expandable-status-icon-expanded]="!isExpanded" slot="end" aria-hidden="true" name="fas-chevron-up"
         class="expandable-status-icon" *ngIf="isExpandable" flip-rtl>
diff --git a/src/core/features/reportbuilder/pages/list/list.html b/src/core/features/reportbuilder/pages/list/list.html
index 85295b1b6ce..35539a9a4c1 100644
--- a/src/core/features/reportbuilder/pages/list/list.html
+++ b/src/core/features/reportbuilder/pages/list/list.html
@@ -17,7 +17,7 @@ <h1>{{ 'core.reportbuilder.reports' | translate }}</h1>
             <ion-item [attr.aria-current]="reports.getItemAriaCurrent(report)" [detail]="true" class="ion-text-wrap" [button]="true"
                 *ngFor="let report of reports.items" (click)="reports.select(report)">
                 <ion-label>
-                    <h3>{{ report.name }}</h3>
+                    <p class="item-heading">{{ report.name }}</p>
                     <p>{{ report.sourcename }}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/core/features/settings/pages/about/about.html b/src/core/features/settings/pages/about/about.html
index b70b019fd65..e2fbfda82b2 100644
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@@ -38,7 +38,7 @@ <h1>
 <ion-footer class="ion-no-border">
     <ion-item button class="ion-text-wrap ion-text-center core-about-deviceinfo" detail="false" (click)="openPage('deviceinfo')">
         <ion-label>
-            <h2>{{ appName }} {{ versionName }}</h2>
+            <p class="item-heading">{{ appName }} {{ versionName }}</p>
         </ion-label>
     </ion-item>
 </ion-footer>
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index bf055c1ca20..d1a0deffd58 100644
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@@ -19,35 +19,35 @@ <h1>{{ 'core.settings.developeroptions' | translate }}</h1>
     <ion-list class="list-item-limited-width">
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>Text direction</h2>
+                <p class="item-heading">Text direction</p>
                 <p>{{ direction }}</p>
             </ion-label>
             <ion-toggle [(ngModel)]="rtl" (ionChange)="RTLChanged()"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>Force safe area margins</h2>
+                <p class="item-heading">Force safe area margins</p>
             </ion-label>
             <ion-toggle [(ngModel)]="forceSafeAreaMargins" (ionChange)="safeAreaChanged()"></ion-toggle>
         </ion-item>
         <ng-container *ngIf="siteId">
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>Enable remote styles <ion-badge>{{remoteStylesCount}}</ion-badge>
-                    </h2>
+                    <p class="item-heading">Enable remote styles <ion-badge>{{remoteStylesCount}}</ion-badge>
+                    </p>
                 </ion-label>
                 <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()"></ion-toggle>
             </ion-item>
             <ion-item class="ion-text-wrap">
                 <ion-label>
-                    <h2>Enable site plugin styles <ion-badge>{{pluginStylesCount}}</ion-badge>
-                    </h2>
+                    <p class="item-heading">Enable site plugin styles <ion-badge>{{pluginStylesCount}}</ion-badge>
+                    </p>
                 </ion-label>
                 <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()"></ion-toggle>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="userToursEnabled">
                 <ion-label>
-                    <h2>Reset user tours</h2>
+                    <p class="item-heading">Reset user tours</p>
                 </ion-label>
                 <ion-button (click)="resetUserTours()" aria-label="Reset user tours" fill="clear" slot="end">
                     <ion-icon slot="icon-only" aria-hidden="true" name="fas-broom"></ion-icon>
@@ -61,7 +61,7 @@ <h2>Disabled features</h2>
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let feature of disabledFeatures">
                 <ion-label>
-                    <h2>{{ feature }}</h2>
+                    <p class="item-heading">{{ feature }}</p>
                 </ion-label>
             </ion-item>
 
@@ -72,7 +72,7 @@ <h2>Site plugins</h2>
             </ion-item-divider>
             <ion-item class="ion-text-wrap" *ngFor="let plugin of sitePlugins">
                 <ion-label>
-                    <h2>{{ plugin.addon }} ({{plugin.component}})</h2>
+                    <p class="item-heading">{{ plugin.addon }} ({{plugin.component}})</p>
                     <p>{{plugin.version}}</p>
                 </ion-label>
             </ion-item>
diff --git a/src/core/features/settings/pages/dev/dev.ts b/src/core/features/settings/pages/dev/dev.ts
index 63be91d598f..c7de23c2477 100644
--- a/src/core/features/settings/pages/dev/dev.ts
+++ b/src/core/features/settings/pages/dev/dev.ts
@@ -13,8 +13,10 @@
 // limitations under the License.
 
 import { Component, OnInit } from '@angular/core';
+import { CoreLoginHelperProvider } from '@features/login/services/login-helper';
 import { CoreSitePlugins } from '@features/siteplugins/services/siteplugins';
 import { CoreUserTours } from '@features/usertours/services/user-tours';
+import { CoreConfig } from '@services/config';
 import { CorePlatform } from '@services/platform';
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
@@ -149,6 +151,9 @@ export class CoreSettingsDevPage implements OnInit {
      */
     async resetUserTours(): Promise<void> {
         await CoreUserTours.resetTours();
+
+        await CoreConfig.delete(CoreLoginHelperProvider.ONBOARDING_DONE);
+
         CoreDomUtils.showToast('User tours have been reseted');
     }
 
diff --git a/src/core/features/settings/pages/deviceinfo/deviceinfo.html b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
index cd049841de0..22ee220d5f9 100644
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@@ -21,26 +21,27 @@ <h1>
         <ion-item *ngIf="showDevOptions" detail="true" (click)="gotoDevOptions()">
             <ion-icon name="fas-terminal" slot="start" aria-hidden="true"></ion-icon>
             <ion-label class="ion-text-wrap">
-                {{ 'core.settings.developeroptions' | translate }}
+                <p class="item-heading">{{ 'core.settings.developeroptions' | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.appversion' | translate}}</h2>
+                <p class="item-heading">{{ 'core.settings.appversion' | translate}}</p>
                 <p>{{ deviceInfo.versionName }} ({{ deviceInfo.versionCode }})</p>
             </ion-label>
         </ion-item>
         <ion-item (longPress)="copyItemInfo($event)" (click)="enableDevOptions()">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.compilationinfo' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.compilationinfo' | translate }}</p>
                 <p *ngIf="deviceInfo.compilationTime">{{ deviceInfo.compilationTime | coreFormatDate: "LLL Z": false }}</p>
                 <p *ngIf="deviceInfo.lastCommit">{{ deviceInfo.lastCommit }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.siteUrl" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl"> *</ng-container>
-                </h2>
+                <p class="item-heading">{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.isPrefixedUrl">
+                        *</ng-container>
+                </p>
                 <p><a [href]="deviceInfo.siteUrl" core-link auto-login="yes">{{ deviceInfo.siteUrl }}</a></p>
                 <p *ngIf="deviceInfo.siteVersion">{{ deviceInfo.siteVersion }}</p>
                 <p *ngIf="deviceInfo.siteId">{{ deviceInfo.siteId }}</p>
@@ -48,7 +49,7 @@ <h2>{{ 'core.settings.siteinfo' | translate }}<ng-container *ngIf="deviceInfo.is
         </ion-item>
         <ion-item *ngIf="deviceInfo.fileSystemRoot" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.filesystemroot' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.filesystemroot' | translate }}</p>
                 <p>
                     <a *ngIf="fsClickable" [href]="deviceInfo.fileSystemRoot" core-link auto-login="no">
                         {{ deviceInfo.fileSystemRoot }}
@@ -59,97 +60,97 @@ <h2>{{ 'core.settings.filesystemroot' | translate }}</h2>
         </ion-item>
         <ion-item *ngIf="deviceInfo.userAgent" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.navigatoruseragent' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.navigatoruseragent' | translate }}</p>
                 <p>{{ deviceInfo.userAgent }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.browserLanguage" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.navigatorlanguage' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.navigatorlanguage' | translate }}</p>
                 <p>{{ deviceInfo.browserLanguage }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.currentLanguage" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.currentlanguage' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.currentlanguage' | translate }}</p>
                 <p>{{ currentLangName }} ({{ deviceInfo.currentLanguage }})</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.locationHref" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.locationhref' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.locationhref' | translate }}</p>
                 <p>{{ deviceInfo.locationHref }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.deviceType" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.displayformat' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.displayformat' | translate }}</p>
                 <p>{{ 'core.' + deviceInfo.deviceType | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.deviceOs && deviceOsTranslated" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.deviceos' | translate}}</h2>
+                <p class="item-heading">{{ 'core.settings.deviceos' | translate}}</p>
                 <p>{{ deviceOsTranslated }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.screen" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.screen' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.screen' | translate }}</p>
                 <p>{{ deviceInfo.screen }}</p>
             </ion-label>
         </ion-item>
         <ion-item (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.networkstatus' | translate}}</h2>
+                <p class="item-heading">{{ 'core.settings.networkstatus' | translate}}</p>
                 <p>{{ 'core.' + deviceInfo.networkStatus | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.wificonnection' | translate}}</h2>
+                <p class="item-heading">{{ 'core.settings.wificonnection' | translate}}</p>
                 <p>{{ 'core.' + deviceInfo.wifiConnection | translate }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.cordovaVersion" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.cordovaversion' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.cordovaversion' | translate }}</p>
                 <p>{{ deviceInfo.cordovaVersion }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.platform" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.cordovadeviceplatform' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.cordovadeviceplatform' | translate }}</p>
                 <p>{{ deviceInfo.platform }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.osVersion" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.cordovadeviceosversion' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.cordovadeviceosversion' | translate }}</p>
                 <p>{{ deviceInfo.osVersion }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.model" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.cordovadevicemodel' | translate}}</h2>
+                <p class="item-heading">{{ 'core.settings.cordovadevicemodel' | translate}}</p>
                 <p>{{ deviceInfo.model }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.uuid" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.cordovadeviceuuid' | translate}}</h2>
+                <p class="item-heading">{{ 'core.settings.cordovadeviceuuid' | translate}}</p>
                 <p>{{ deviceInfo.uuid }}</p>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="deviceInfo.pushId" (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.pushid' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.pushid' | translate }}</p>
                 <p>{{ deviceInfo.pushId }}</p>
             </ion-label>
         </ion-item>
         <ion-item (longPress)="copyItemInfo($event)">
             <ion-label class="ion-text-wrap">
-                <h2>{{ 'core.settings.localnotifavailable' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.localnotifavailable' | translate }}</p>
                 <p>{{ 'core.' + deviceInfo.localNotifAvailable | translate }}</p>
             </ion-label>
         </ion-item>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index c3de108b35d..9cc006e5710 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -13,7 +13,7 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
     <ion-list class="list-item-limited-width">
         <ion-item class="ion-text-wrap" lines="none">
             <ion-label>
-                <h2>{{ 'core.settings.language' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.language' | translate }}</p>
             </ion-label>
             <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged($event)" interface="action-sheet"
                 [interfaceOptions]="{header: 'core.settings.language' | translate}">
@@ -22,7 +22,7 @@ <h2>{{ 'core.settings.language' | translate }}</h2>
         </ion-item>
         <ion-item class="ion-text-wrap core-settings-general-font-size item-interactive" lines="none">
             <ion-label>
-                <h2>{{ 'core.settings.fontsize' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.fontsize' | translate }}</p>
             </ion-label>
             <ion-segment [(ngModel)]="selectedZoomLevel" color="primary">
                 <ion-segment-button *ngFor=" let zoomLevel of zoomLevels" [value]="zoomLevel.value"
@@ -37,7 +37,7 @@ <h2>{{ 'core.settings.fontsize' | translate }}</h2>
         </ion-item>
         <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0" lines="none">
             <ion-label>
-                <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.colorscheme' | translate }}</p>
                 <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
             </ion-label>
             <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged($event)" interface="action-sheet"
@@ -53,14 +53,14 @@ <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'core.settings.enablerichtexteditor' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.enablerichtexteditor' | translate }}</p>
                 <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
             </ion-label>
             <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
             <ion-label>
-                <h2>{{ 'core.settings.ioscookies' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.ioscookies' | translate }}</p>
                 <p>{{ 'core.settings.ioscookiesdescription' | translate }}</p>
                 <ion-button expand="block" (click)="openNativeSettings($event)">
                     {{ 'core.opensettings' | translate }}
@@ -69,14 +69,14 @@ <h2>{{ 'core.settings.ioscookies' | translate }}</h2>
         </ion-item>
         <ion-item class="ion-text-wrap">
             <ion-label>
-                <h2>{{ 'core.settings.debugdisplay' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.debugdisplay' | translate }}</p>
                 <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
             </ion-label>
             <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)"></ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="analyticsSupported">
             <ion-label>
-                <h2>{{ 'core.settings.enablefirebaseanalytics' | translate }}</h2>
+                <p class="item-heading">{{ 'core.settings.enablefirebaseanalytics' | translate }}</p>
                 <p>{{ 'core.settings.enablefirebaseanalyticsdescription' | translate }}</p>
             </ion-label>
             <ion-toggle [(ngModel)]="analyticsEnabled" (ionChange)="analyticsEnabledChanged($event)"></ion-toggle>
diff --git a/src/core/features/settings/pages/space-usage/space-usage.html b/src/core/features/settings/pages/space-usage/space-usage.html
index ec3524adb10..0f5040f7521 100644
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@@ -57,7 +57,7 @@ <h1>{{ 'core.settings.spaceusage' | translate }}</h1>
 
             <ion-item-divider>
                 <ion-label>
-                    <h2>{{ 'core.settings.total' | translate }}</h2>
+                    <p class="item-heading">{{ 'core.settings.total' | translate }}</p>
                 </ion-label>
                 <p slot="end" class="ion-margin-end">
                     {{ totalSpaceUsage | coreBytesToSize }}
diff --git a/src/core/features/sharedfiles/components/list-modal/list-modal.html b/src/core/features/sharedfiles/components/list-modal/list-modal.html
index 682496ad493..8fe9bb42a87 100644
--- a/src/core/features/sharedfiles/components/list-modal/list-modal.html
+++ b/src/core/features/sharedfiles/components/list-modal/list-modal.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ title }}</h2>
+            <h1>{{ title }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html
index b780c5565e7..62f5682f8ac 100644
--- a/src/core/features/sitehome/pages/index/index.html
+++ b/src/core/features/sitehome/pages/index/index.html
@@ -59,7 +59,7 @@
         <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()">
             <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
-                <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
+                <p class="item-heading">{{ 'core.courses.availablecourses' | translate}}</p>
             </ion-label>
         </ion-item>
     </ion-card>
@@ -75,7 +75,7 @@ <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
         <ion-item button class="ion-text-wrap" (click)="openCourseCategories()">
             <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
-                <h2>{{ 'core.courses.categories' | translate}}</h2>
+                <p class="item-heading">{{ 'core.courses.categories' | translate}}</p>
             </ion-label>
         </ion-item>
     </ion-card>
@@ -87,7 +87,7 @@ <h2>{{ 'core.courses.categories' | translate}}</h2>
             <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
             </ion-icon>
             <ion-label>
-                <h2>{{ 'core.courses.mycourses' | translate}}</h2>
+                <p class="item-heading">{{ 'core.courses.mycourses' | translate}}</p>
             </ion-label>
         </ion-item>
     </ion-card>
@@ -98,7 +98,7 @@ <h2>{{ 'core.courses.mycourses' | translate}}</h2>
         <ion-item button class="ion-text-wrap" (click)="openSearch()">
             <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
             <ion-label>
-                <h2>{{ 'core.courses.searchcourses' | translate}}</h2>
+                <p class="item-heading">{{ 'core.courses.searchcourses' | translate}}</p>
             </ion-label>
         </ion-item>
     </ion-card>
diff --git a/src/core/features/tag/components/feed/core-tag-feed.html b/src/core/features/tag/components/feed/core-tag-feed.html
index 9e8f4430953..17b3de5ca41 100644
--- a/src/core/features/tag/components/feed/core-tag-feed.html
+++ b/src/core/features/tag/components/feed/core-tag-feed.html
@@ -6,7 +6,7 @@
         <core-mod-icon *ngIf="item.iconUrl" [modicon]="item.iconUrl" slot="start" [showAlt]="false">
         </core-mod-icon>
         <ion-label>
-            <h2>{{ item.heading }}</h2>
+            <p class="item-heading">{{ item.heading }}</p>
             <p *ngFor="let text of item.details">{{ text }}</p>
         </ion-label>
     </ion-item>
diff --git a/src/core/features/tag/pages/index/index.html b/src/core/features/tag/pages/index/index.html
index 151b3f93f48..2a07a407416 100644
--- a/src/core/features/tag/pages/index/index.html
+++ b/src/core/features/tag/pages/index/index.html
@@ -21,13 +21,13 @@ <h1>{{ 'core.tag.tag' | translate }}: {{ tagName }}</h1>
                     <ion-label class="ion-text-wrap">{{ 'core.tag.warningareasnotsupported' | translate }}</ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngFor="let area of areas" [attr.aria-label]="area.nameKey | translate"
-                    (click)="openArea(area)" [attr.aria-current]="area!.id == selectedAreaId ? 'page' : 'false'" button detail="true">
+                    (click)="openArea(area)" [attr.aria-current]="area.id == selectedAreaId ? 'page' : 'false'" button detail="true">
                     <ion-label>
-                        <h2>{{ area!.nameKey | translate }}</h2>
+                        <p class="item-heading">{{ area.nameKey | translate }}</p>
                     </ion-label>
-                    <ion-badge slot="end" *ngIf="area!.badge">
-                        <span aria-hidden="true">{{ area!.badge }}</span>
-                        <span class="sr-only">{{ 'core.tag.tagareabadgedescription' | translate:{ count: area!.badge } }}</span>
+                    <ion-badge slot="end" *ngIf="area.badge">
+                        <span aria-hidden="true">{{ area.badge }}</span>
+                        <span class="sr-only">{{ 'core.tag.tagareabadgedescription' | translate:{ count: area.badge } }}</span>
                     </ion-badge>
                 </ion-item>
             </ion-list>
diff --git a/src/core/features/user/components/tag-area/core-user-tag-area.html b/src/core/features/user/components/tag-area/core-user-tag-area.html
index 3531973e08c..ccba8b62643 100644
--- a/src/core/features/user/components/tag-area/core-user-tag-area.html
+++ b/src/core/features/user/components/tag-area/core-user-tag-area.html
@@ -2,7 +2,7 @@
     <ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
         <core-user-avatar [user]="item.user" slot="start" [linkProfile]="false"></core-user-avatar>
         <ion-label>
-            <h2>{{ item.heading }}</h2>
+            <p class="item-heading">{{ item.heading }}</p>
         </ion-label>
     </ion-item>
 
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index 751d3dd524d..bf0f04d8126 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -32,12 +32,12 @@ <h2>{{ user.fullname }}</h2>
             <ion-item-group *ngIf="hasContact">
                 <ion-item-divider>
                     <ion-label>
-                        <h2>{{ 'core.user.contact' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.contact' | translate}}</p>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="user.email">
                     <ion-label>
-                        <h2>{{ 'core.user.email' | translate }}</h2>
+                        <p class="item-heading">{{ 'core.user.email' | translate }}</p>
                         <p><a class="core-anchor" href="mailto:{{user.email}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ user.email }}
                             </a></p>
@@ -45,7 +45,7 @@ <h2>{{ 'core.user.email' | translate }}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="user.phone1">
                     <ion-label>
-                        <h2>{{ 'core.user.phone1' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.phone1' | translate}}</p>
                         <p><a class="core-anchor" href="tel:{{user.phone1}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ user.phone1 }}
                             </a></p>
@@ -53,7 +53,7 @@ <h2>{{ 'core.user.phone1' | translate}}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="user.phone2">
                     <ion-label>
-                        <h2>{{ 'core.user.phone2' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.phone2' | translate}}</p>
                         <p><a class="core-anchor" href="tel:{{user.phone2}}" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ user.phone2 }}
                             </a></p>
@@ -61,7 +61,7 @@ <h2>{{ 'core.user.phone2' | translate}}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="formattedAddress">
                     <ion-label>
-                        <h2>{{ 'core.user.address' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.address' | translate}}</p>
                         <p><a class="core-anchor" [href]="encodedAddress" core-link auto-login="no" [showBrowserWarning]="false">
                                 {{ formattedAddress }}
                             </a></p>
@@ -69,13 +69,13 @@ <h2>{{ 'core.user.address' | translate}}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="user.city && !formattedAddress">
                     <ion-label>
-                        <h2>{{ 'core.user.city' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.city' | translate}}</p>
                         <p>{{ user.city }}</p>
                     </ion-label>
                 </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="user.country && !formattedAddress">
                     <ion-label>
-                        <h2>{{ 'core.user.country' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.country' | translate}}</p>
                         <p>{{ user.country }}</p>
                     </ion-label>
                 </ion-item>
@@ -83,12 +83,12 @@ <h2>{{ 'core.user.country' | translate}}</h2>
             <ion-item-group *ngIf="hasDetails">
                 <ion-item-divider>
                     <ion-label>
-                        <h2>{{ 'core.userdetails' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.userdetails' | translate}}</p>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="user.url">
                     <ion-label>
-                        <h2>{{ 'core.user.webpage' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.webpage' | translate}}</p>
                         <p><a class="core-anchor" href="{{user.url}}" core-link>
                                 {{ user.url }}
                             </a></p>
@@ -96,7 +96,7 @@ <h2>{{ 'core.user.webpage' | translate}}</h2>
                 </ion-item>
                 <ion-item class="ion-text-wrap core-user-profile-interests" *ngIf="interests">
                     <ion-label>
-                        <h2>{{ 'core.user.interests' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.interests' | translate}}</p>
                         <ion-badge *ngFor="let interest of interests" role="link" (click)="openInterest(interest)">
                             {{ interest }}
                         </ion-badge>
@@ -109,7 +109,7 @@ <h2>{{ 'core.user.interests' | translate}}</h2>
             <ion-item-group *ngIf="user.description">
                 <ion-item-divider>
                     <ion-label>
-                        <h2>{{ 'core.user.description' | translate}}</h2>
+                        <p class="item-heading">{{ 'core.user.description' | translate}}</p>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap">
diff --git a/src/core/features/viewer/components/qr-scanner/qr-scanner.html b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
index a8e2757c05a..5e16e41f219 100644
--- a/src/core/features/viewer/components/qr-scanner/qr-scanner.html
+++ b/src/core/features/viewer/components/qr-scanner/qr-scanner.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ title }}</h2>
+            <h1>{{ title }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index 6dedd7b76f0..cd921ea9cd2 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-toolbar>
         <ion-title>
-            <h2>{{ title }}</h2>
+            <h1>{{ title }}</h1>
         </ion-title>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 49893eedf71..dda1c0c6775 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -124,11 +124,17 @@ $activity-icon-colors: (
     interface: #a378ff
 ) !default;
 
+$calendar-event-category-category: #8e24aa !default;
+$calendar-event-category-course: $red !default;
+$calendar-event-category-group: $yellow !default;
+$calendar-event-category-user: $blue !default;
+$calendar-event-category-site: $green !default;
+
 // Calendar event category background colors.
 $calendar-event-category-colors: (
-    category: #8e24aa,
-    course: $red,
-    group: $yellow,
-    user: $blue,
-    site: $green
+    category: $calendar-event-category-category,
+    course: $calendar-event-category-course,
+    group: $calendar-event-category-group,
+    user: $calendar-event-category-user,
+    site: $calendar-event-category-site,
 ) !default;