From 758aae934d2d4ef5511371c946d467ee26dc1a66 Mon Sep 17 00:00:00 2001
From: Jens Hansen <jens.hansen@mni.thm.de>
Date: Thu, 5 Sep 2019 14:03:06 +0200
Subject: [PATCH] Add dynamic aria label implementation example
---
docs/a11y/Making html elements a11y.md | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/docs/a11y/Making html elements a11y.md b/docs/a11y/Making html elements a11y.md
index 31a42f735..6372935f4 100644
--- a/docs/a11y/Making html elements a11y.md
+++ b/docs/a11y/Making html elements a11y.md
@@ -27,3 +27,21 @@ Attribute "aria-label" does not work with multi-language titles, voice output re
}
```
+
+### Dynamic ARIA labels
+
+Dynamic Aria labels like used in generic components are also possible!
+
+For usage only the `attr.` tag prefix must be added like in following code example:
+
+```
+<button
+ mat-button
+ attr.aria-labelledby="{{ ariaPrefix + 'cancel' }}"
+...
+...
+<div id="{{ ariaPrefix + 'cancel'}}">{{ buttonsLabelSection + '.cancel-description' | translate }}</div>
+```
+
+
+@see https://blog.prototypr.io/accessible-components-2-dynamic-aria-labels-6bf281f26d17
--
GitLab