Hello
I am trying to pass validation through the WAVE Web Accessibility Evaluation Tool of a web site where the screen reader works and I get 9 errors. The site is http://pla-automation-hellas.com/en/ and you can see the validation results here: http://wave.webaim.org/report#/http://pla-automation-hellas.com/en/
Since I am not a coder and the files of the Screen Rader are .js files I cannot understand and see which changes to make. The 9 errors are tilted Empty Button : A button is empty or has no value text.
Is there anyone out there to tell me what to do and which changes to make on which files?
Thanks

Hello,
the WAVE reports missing text for buttons used to control the screen reader but it's not necessary in this case. Those are buttons used as icons and they have access keys.

If you want to add some text to those buttons you should deal with the js file, then hide the text using CSS otherwise it would break the layout of the icons.

Best regards
John

Hello Mr. John and thank you for your prompt reply.
I understand that these errors don't eliminate functionality but in order for the site to get validated through http://wave.webaim.org/ I need to add the text you are referring to.
You replied : "If you want to add some text to those buttons you should deal with the js file, then hide the text using CSS otherwise it would break the layout of the icons."
What I need to know is how to "deal" with the js file.
Which is the file and what change I need to make there? Can you give me an example of what I need to change ie for the button id fr_screenreader_play? and I think I can do the rest.
Also which is the css file I need to edit and how to hide the text so that I will not break the layout of the buttons? Does display:none; will do it?

Thank you in advance
BR
George

Hi George,

you need to edit the js file named controlle.js at the path root/plugins/system/screenreader/screenreader/libraries/controller/controller.js

It's a minified javascript source code so you find the unminified version added to the zip in attachment to download and use.

After that you find code for buttons, for example for the 'Play' button you have:

Code:

var playButton = $('<button/>').attr({'id':'fr_screenreader_play', 'title':'Play', 'accesskey':screenReaderOptions.accesskey_play}) .addClass('pinnable');

and you can add a couple of rules to add a text with font zero:

Code:

var playButton = $('<button/>').attr({'id':'fr_screenreader_play', 'title':'Play', 'accesskey':screenReaderOptions.accesskey_play}) .addClass('pinnable') .html('Play') .css('font-size', 0);

This should work to add a not visible text to button available for the Wave validation. BR John

Thanks John
I finally did it by myself....
How can I attach the modified files including the Greek translation?

Thanks

Thank you very much George...
you should be able to attach the zip file with Greek translation to a forum reply.

Thanks