Accessibility - Need to have a text alternative for icons

Hi All,


I need to have a text alternative for icons in OutSystems for a mobile application is this possible in OutSystems if so how? 


Many Thanks 

Daniel Sunner

Daniel Sunner wrote:

Hi All,


I need to have a text alternative for icons in OutSystems for a mobile application is this possible in OutSystems if so how? 


Many Thanks 

Daniel Sunner

Hi,

You have to use the title attribute conjointly with the aria-label attribute in extended property of the icon.


Regards,

Pankaj



Hi Pankaj,


Just wanted to know if I do it this way will it be recognized by screen readers? For example if I put an envelope next to an email address field will people who use a screen reader be told the alternate text for that envelope icon? 


Many Thanks 

Daniel Sunner

Daniel Sunner wrote:

Hi All,


I need to have a text alternative for icons in OutSystems for a mobile application is this possible in OutSystems if so how? 


Many Thanks 

Daniel Sunner

Hi,

You have to use the title attribute conjointly with the aria-label attribute in extended property of the icon.


Regards,

Pankaj





Solution

For screen readers

You just need to put an expression just below the icon and need to put this  code

<span class='sr-only'>text for screen readers</span>

Regards,

Pankaj

Solution

Pankaj pant wrote:

For screen readers

You just need to put an expression just below the icon and need to put this  code

<span class='sr-only'>text for screen readers</span>

Regards,

Pankaj

Hi Pankaj,

Thank you for your prompt responses you have been very helpful.

This works great for web but you can't put HTML in an expression on mobile how would I get around this in mobile? 


Many Thanks 

Daniel Sunner


this Link might be helpful please have a look.


Regards,

Pankaj