Hello!
I am facing some accessibility issues in my website, both in desktop and mobile views (in the responsive theme).
Background and foreground colors do not have a sufficient contrast ratio
– this comes from the TD Social Counter plugin, specifically in the Twitter label
Buttons do not have an accessible name
– this comes from the Live Search icon
Form elements do not have associated labels
– this comes from TD Newsletter plugin and from login form (that is not even enabled in my theme, but it is loaded)
Links do not have a discernible name
– this comes from all over the place, mostly after links in images or buttons
Is there a fix for that? Or better, do you guys know when, or if, this issues will be fixed?
They are not new issues, and searching in the forum, we can see that as early as 2018 they are known by the support and dev teams…
Hello !
I am sorry but I don’t quite understand the issue. Can you offer us some screenshots of the issue ? Have you seen this on our demos too ?
Thank you !
Hello!
Sure I can provide the screenshots.
Here goes the ones I found in the Default Pro Demo (https://demo.tagdiv.com/newspaper_pro/) of yours:
The overall analysis of the demo: https://paste.pics/BEFPT
The background contrast issue: https://paste.pics/BEFQI
The button issue: https://paste.pics/BEFQ2
The form issue: https://paste.pics/BEFQ8
The links issue: https://paste.pics/BEFQG
I don’t know what was not clear in my post, but testing the Accessibility is a well known form of evaluation of a website (included in Lighthouse auditions).
It’s not a problem of my site, but of the theme, as you can see in the Demo and screenshots I posted.
So, I ask again: do this issues have a fix? Is there any plan to implement a fix for this issues in a near future update, or can I do these fixes mannually?
Hello !
Yes, we know about the messages that lighthouse provide when you test an website with our theme, and our developers have this in work. I think that in the coming updates it should be implemented. As a tip to fix the problem, for the links it need to set the aria-label=”” attribute and for label need to be use the for=”” attribute. For example on search, you need to go in wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_search.php and on line 1740 add the aria-label attribute like this -> https://www.screencast.com/t/iyvML1u00 also for elements with no accessibility (from login/register) you need to go in wp-content/plugins/td-composer/legacy/Newspaper/parts/register.php and add the for=”” attribute on line 50 like this https://www.screencast.com/t/w15eWCFCv
This is the quick fix that our developers want to implement it for the coming updates.
Hope this will help you in the meanwhile!
Let us know the result !
Thank you!
Hello, Vlad! Thank you for answering!
About the forms labels:
The register.php went ok.
But you forgot to address the TD Newsletter plugin issue; the “input” (<div class=”tdn-input-wrap”><input type=”email” name=”EMAIL” placeholder=”seu endereço de e-mail”></div>) form is not labelled as well. Can you point me to the location of this file?
About the search button issue:
It seems that your files are different of mine. I could not find the line 1740 on wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_search.php..
Here is a screenshot of my tdb_header_search.php file: https://paste.pics/BEU1V
About the links names issue:
Half-assed code of yours, but I’ll try to fix that in my site.
About the background contrast issue:
Although you chose to ignore this issue I pointed, I already found a fix (the color was set to none, but if you choose #FFFFFF (white) it resolves the issue.
Hello !
Can you let us know what Theme Version are you running ? We might have different versions and that is why this files are misplaced.
For the background issue, I have checked now and we had a background color set and this issue never occurred.
For the newsletter you will have to edit the style that you are using. For example if you are using style 1 you will need to edit this file: wp-content/plugins/td-newsletter/styles/tds_newsletter/tds_newsletter1.php
In here you need to add this label: https://i.imgur.com/MBbGyrw.png
This are the quick fixes that I have received from our developers. Let us know if this was helpful and what Theme version you are running in order to test more of this.
Thank you !
Hi, Vlad!
I have installed Newspaper v10.3.9.1.
For the background, I sincerely don’t know when this issue started to appear..; but is there a way to change the background color of Twitter button? Because, in the default styles, there is only way to turn it black (or white, if I remember correctly).
Later I’ll test this location that you sent me, for the Newsletter. I’ll let you know if the fix works.
Thanks for now!
Hello !
Only for the twitter button we could try a css code. Can you send us as link to where we can find this twitter logo so we can inspect and see what can we do to fix this issue too ?
Thank you !
Hi, Vlad!
1) I am waiting for some following about the tdb_header_search.php file, for me to continue working on fixing the accessibility of my site.
2) The Twitter background you asked me is the default style in the TD Social Counter… but the fix (to change the color to default to white #ffffff is not working anymore). We have to change the background color of the Twitter row, but I didn’t work on that, as I am waiting for the location of the search button for me to work on all that..
3) The Newsletter issue I tried to fix, but got no luck on it..
Hi,
The tdb_header_search.php if is on a different line you can delete tagDiv Cloud Library and tagDiv Composer and reinstall them from Newspaper > plugins and it should be on the same line as for me, if not, search for the code line and add the aria-label attribute like this -> https://www.screencast.com/t/iyvML1u00
The line code for twitter background color is this one -> https://i.imgur.com/3ncfflE.png from wp-content/plugins/td-social-counter/shortcode/td_block_social_counter.php
Normal it should work for Newsletter, if you made the implementation in the same way as for the rest of Accessibility issues.
There will be soon a theme update that hope will fix those accessibility issues.
Thank you!
Thank you, Calin!
The issue with the contrast in the background of Twitter is fixed!
Also, I was able to find the code of the search button and fix it, in both mobile and desktop views (though they are indeed in another lines of the code).
The Newsletter form is a mistery for me, because I implemented it as I was told to; I’ll try to redo it and inform you about the success of it.
Thank you very much for now!
