Accessiblity

[efinder2]

Is your feature request related to a problem? Please describe.
I found no possiblity to an accessible alternative to the Icon. To give an example have a look at the Icons of alerts. The last notification is read below. Problem is the content of the icon is lightbulb_outline. Cause there is Content aria-label is not used.

lightbulb_outline Toggle alert visibility and handle the Close event. close

Describe the solution you'd like
I'd like a property of the RadzenIcon for the accessible name. This would have the benefit the library may change the reperesentation, if a better solution for accessiblity is available in the html specification with support by screenreader and braille displays. An additional property may define if it is a semantic element or an decorative element.

This solutions should be used in all Icons used by Radzen them selve

Describe alternatives you've considered
Alternativly modifications to use title like font awesome.

Additional context
See WCAG

[akorchev]

You can set the title attribute of RadzenIcon even now.

[efinder2]

Title was only an example how font awesome does it. They take the title attribute via js and change the svg accordingly. Problem is all tricks I know are overridden by the text of the i. At the moment this has to be the icon name. Only hiding the icon with aria-hidden. To enable the screenreader to read it, another text with display: none must be added.

So i need to be hacky for screen reader supprt. Will there be an out of the box solution?

Examples for other non working tricks:

• title
• aria-labelledby
• alt
• aria-label="test" role="image"
• abbr

[akorchev]

Will there be an out of the box solution?

Not sure if there is any out of the box solution. Here are a few suggestions from the material icons repository: google/material-design-icons#732

One is to use hex codes instead of ligatures and the other is to use aria-hidden.

[DaveBagler]

@efinder2, do you need a label directly on the icon?

Take an icon-only button, for example. The icon element can be hidden from screen readers using aria-hidden="true" or role="presentation" and then the aria-label and title attributes can be set on the wrapping button element.

[efinder2]

aria-label on the button is an option. Thank you.