diff --git a/app/assets/javascripts/angular/directives/components/accessible-element-directive.js b/app/assets/javascripts/angular/directives/components/accessible-element-directive.js
new file mode 100644
index 0000000000..b396c46784
--- /dev/null
+++ b/app/assets/javascripts/angular/directives/components/accessible-element-directive.js
@@ -0,0 +1,12 @@
+angular.module('openproject.uiComponents')
+
+.directive('accessibleElement', [function() {
+  return {
+    restrict: 'E',
+    scope: { 
+      visibleText: '=',
+      readableText: '=',
+    },
+    templateUrl: "/templates/components/accessible_element.html"
+  };
+}]);
diff --git a/public/templates/components/accessible_element.html b/public/templates/components/accessible_element.html
new file mode 100644
index 0000000000..9e1ad922f0
--- /dev/null
+++ b/public/templates/components/accessible_element.html
@@ -0,0 +1,4 @@
+<span>
+  <span aria-hidden="true" role="presentation" tabindex="-1" ng-bind="visibleText"></span>
+  <span class="hidden-for-sighted" ng-bind="readableText"></span>
+</span>
diff --git a/public/templates/components/empty_element.html b/public/templates/components/empty_element.html
index 2ba9a0099d..783c762f88 100644
--- a/public/templates/components/empty_element.html
+++ b/public/templates/components/empty_element.html
@@ -1,4 +1,2 @@
-<span>
-  <span aria-hidden="true" role="presentation" tabindex="-1">-</span>
-  <span class="hidden-for-sighted"><%= I18n.t('timelines.empty') %></span>
-</span>
+<accessible-element visible-text="'-'" readable-text="I18n.t('timelines.empty')">
+</accessible-element>