0

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.

sorvz
  • 123
  • 8
  • 1
    ARIA is only supported by screen readers, and not all screen readers are blind. When you say you want to hide a piece of text from "users with disabilities" it would help to have more context. Then I am happy to offer some help. – aardrian Apr 04 '17 at 19:49
  • 1
    Related: http://stackoverflow.com/questions/43150685/aria-labelledby-not-working-with-nvda-firefox/43151062#43151062 – aardrian Apr 04 '17 at 19:51
  • Thanks, aardrian, but you just point me to something I already know - hiding text visually, but not from screen readers. What I don't know, is how to hide from screen readers, but allow visually to see this text. What context may I ask I can provide? 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 – sorvz Apr 05 '17 at 13:44
  • 1
    That link included how to hide text from screen readers (`aria-hidden`) and how to visually display it. So when you say "disabled people who use assistive tech", do you just mean blind users who use screen readers? If so, I can give you some code examples. Other assistive tech includes Windows High Contrast Mode, or a head wand, or a switch device, or a sip-and-puff controller, and so on. – aardrian Apr 05 '17 at 15:41
  • @aardrian Yes, you're right. There's an answer... I just didn't noticed. Yeah, I meant only screen readers, but not anymore(after reading what you said) :) Thank you – sorvz Apr 06 '17 at 13:40

2 Answers2

1

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

Adam
  • 17,838
  • 32
  • 54
  • Thanks a lot, Adam! Now I'm a bit more aware of this... I know about dyslexia, but only in general form. Never thought big letter may affect them... How do you know all this? :) – sorvz Apr 06 '17 at 13:43
0

I really do not understand why you would want to do this and make more work for yourself to maintain alternate content. Create one accessible version of your content that conforms to WCAG. Trying to display different content to users of certain assistive technology presumes to know exactly how they will best browse your site and the details of their disability. In essence, a solution like this is segregating your visitors into distinct groups, but the line between those groups is gray, not black and white. Again, just follow WCAG with one set of content.

Steve Repsher
  • 390
  • 3
  • 9