0

If this question has been already asked, let me know.

I am a web developer and I want to make my website accessible to blind users. I know they use a screen reader to read the text on the screen and write. What I am struggle is that how can a screen reader read tabs and buttons? Is there a way for screen reader to read tabs and buttons? If I have a tab called "food", will it read "food tab”? Thanks for helping!

  • Without seeing your actual HTML/JS it's hard to answer your question. I'd suggest starting here: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML. There are many other resources online too. – WOUNDEDStevenJones Mar 10 '21 at 20:19
  • ARIA defines a [tab role](https://www.w3.org/TR/wai-aria-1.1/#tab) that can be used in conjunction with related ARIA roles to define a tabbed interface. If you are using some library to create your UI, if the maintainers are keeping up with accessibility requirements then this may be addressed by the library out of the box. Otherwise, you'll have to implement it yourself. Without seeing your code it is difficult to provide you with much guidance beyond that. – Alexander Nied Mar 10 '21 at 20:21
  • Also, keep in mind that your OS probably has a built-in screen reader you can test with, and the major browser dev tools all have accessibility debugging tools you can leverage as well. – Alexander Nied Mar 10 '21 at 20:22
  • One last thing-- that tab role comes with other recommendations for how to implement keyboard interactions and such. [this link for WAI tab authoring practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel) is probably a better resource than the one I first linked. – Alexander Nied Mar 10 '21 at 20:25

1 Answers1

-2

I'm not pro and I might be wrong but this idea came up my mind.

As you know there are some libraries on backend side depending on what language do you use. If your aplication's interface is not very changable, you can get a simple screenshot and read it with doing these things:

  • First you can convert that screenshot to binary by using methods like binaryReader and ReadBytes.
  • Then you can turn that variable into a string. When you do that, you can check if it has "food" and if it is a tab, you can add the word "tab" into near of your string's content.
  • And then you can turn it from text to speech by using specific libraries like System.Speech.Synthesis.

But I must say this is obviously not a best solution. And I'm so sorry if I'm talking nonsense. I'm new at here.

Hope you'll find the best.

Overdoseflow
  • 32
  • 1
  • 5
  • Is there a JS method for doing it? –  Mar 10 '21 at 20:58
  • It requires a specific library and I don't know if there is a method or something which does the same thing in JS. But I found some similar things when I googled keywords like "JS SpeechSynthesis, SpeechSynthesisUtterance". And this is also similar too: https://stackoverflow.com/a/22234035/15316061 – Overdoseflow Mar 10 '21 at 21:13
  • 1
    Never ever do that, that's completely wrong, sorry. See the comments to the question about aria `tab` role, that's the right direction. Actually, there's more than 99.99% of cases when built-in functionality should be used to convey information to a screen reader, and only 0.01% is left for those TTS solutions (like self-voicing games, for example). – Andre Polykanine Mar 10 '21 at 22:43