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:
<span id="one">ACCESSIBILITY CHECK</span>
<span id="two">Accessibility check</span>
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.
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:
<div aria-hidden="true">Not visible on a screenreader</div>
<div class="sr-only">Not visible on a screen</div>
This uses bootstrap sr-only css class