search

radzenhq / radzen-blazor

Radzen Blazor is a set of 90+ free native Blazor UI components packed with DataGrid, Scheduler, Charts and robust theming including Material design and FluentUI.
https://www.radzen.com
MIT License
3.48k stars 781 forks source link

Accessiblity #1572

Closed efinder2 closed 4 weeks ago

efinder2 commented 3 months ago

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 commented 3 months ago

You can set the title attribute of RadzenIcon even now.

efinder2 commented 3 months ago

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:

akorchev commented 3 months ago

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: https://github.com/google/material-design-icons/issues/732

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

DaveBagler commented 2 months ago

@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 commented 4 weeks ago

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