diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index ef944f636dff..98b63b03410a 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -84,9 +84,9 @@
   </tr>
 }
 
-<label [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
+<span [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
   {{startDateAccessibleName}}
-</label>
-<label [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
+</span>
+<span [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
   {{endDateAccessibleName}}
-</label>
+</span>
diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index d6cc038e68ed..02f826cbb227 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/src/material/datepicker/calendar-header.html
@@ -3,7 +3,7 @@
     <!-- [Firefox Issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1880533]
       Relocated label next to related button and made visually hidden via cdk-visually-hidden
       to enable label to appear in a11y tree for SR when using Firefox -->
-    <label [id]="_periodButtonLabelId" class="cdk-visually-hidden" aria-live="polite">{{periodButtonDescription}}</label>
+    <span [id]="_periodButtonLabelId" class="cdk-visually-hidden" aria-live="polite">{{periodButtonDescription}}</span>
     <button mat-button type="button" class="mat-calendar-period-button"
             (click)="currentPeriodClicked()" [attr.aria-label]="periodButtonLabel"
             [attr.aria-describedby]="_periodButtonLabelId">