Hide text from assistive technology

manpreet Best Answer 2 years ago

I'm trying to understand how this may be possible to achieve in order to make it more clear to the end user with disabilities.

What I'm trying to do is to hide some partial text that is provided by default and replace it with another piece of text for users with disabilities.

For example:

ACCESSIBILITY CHECK
Accessibility check

As you see, the first part(#one) isn't accessible. I want to hide second(#two) from default users and the first one(#one) from users with disabilities.

The first part - hiding from default users - I know how to achieve, but the second part not. I read about aria-hidden="true", but really not sure about it in terms of cross-platforming and the meaning it self.

manpreet 2 years ago

It should be obvious that reading text with all capital letters isn't best experience for a user with disabilities. I want to target specific this sensitive aria and make it much more comfortable for disabled people who use assistive tech to read it

There are more people suffering from dyslexia (1 in 10 people) than blind people. Using capital letters will affect people with dyslexia more than blind people. And there's no algorithm to detect dyslexic people.

There's no aria-dyslexic attribute. Sorry.

If your question only concerns screenreader users:

aria-hidden="true">Not visible on a screenreader
Not visible on a screen

This uses bootstrap sr-only css class