diff --git a/docs/a11y/Making html elements a11y.md b/docs/a11y/Making html elements a11y.md index 31a42f735bc783740afb11e57654f5ece0393275..6372935f4626b7ae79b23aa2e8fb006e19f8c262 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