diff --git a/packages/main/src/DayPickerTemplate.tsx b/packages/main/src/DayPickerTemplate.tsx
index b20681b6ff41..21f515238d5c 100644
--- a/packages/main/src/DayPickerTemplate.tsx
+++ b/packages/main/src/DayPickerTemplate.tsx
@@ -21,10 +21,10 @@ export default function DayPickerTemplate(this: DayPicker) {
 					{this._dayNames.map(day =>
 						<div
 							role="columnheader"
-							aria-label={day.name}
+							aria-label={day.ultraShortName ? day.name : undefined}
 							class={day.classes}
 						>
-							{day.ultraShortName}
+							{day.ultraShortName ? day.ultraShortName : <span aria-hidden="true" class="ui5-hidden-text">{day.name}</span>}
 						</div>
 					)}
 				</div>
diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css
index 2b8b50dde9d3..eb4e08f7b66b 100644
--- a/packages/main/src/themes/DayPicker.css
+++ b/packages/main/src/themes/DayPicker.css
@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: block;
 }