It seems that the class=”screen-reader-text” is showing. This should be set to “display: none” in your theme’s style.css
The phrase screen-reader-text does not appear anywhere in my theme’s style.css file. If I were to add it to the file, where and exactly what code would I add. (Remember, I’m rather code illiterate.)
What is default with WP? To show or none. And, since it does not appear in the style.css would the issue be elsewhere, to force show.
Thanks…
bc
I do see this sort of thing in the style.css file:
/*************************************
WP-Classes
*************************************/
#wp-calendar{
empty-cells:show;
margin:10px auto 0;
width:155px;
There are several of these listed one after the other, which I presume is creating various classes for the theme to use.
Would I create a new class called screen-reader-text
It is odd that it shows.
One thing that you can do is deactivate all your plugins and see if it disappears. If it does, then turn them on one by one to see if one of them creates it again.
If when deactivating the plugins, the text is still there, inform the developers of your theme about this.
After you have done this, and in the meantime…
At the bottom of your CSS (style.css), put…
.screen-reader-text {
display: none !important;
}
I use “!important” so that it will over-ride any other styles in a plugin or the theme which is causing this.
Actually, my mistake… I forgot that this will hide the text from screen readers.
Use this instead…
.screen-reader-text {
width: 0px !important;
height: 0px !important;
text-indent: -9999px;
}
Cool, OK fixed.
Should I ultimately place this code in the custom CSS style sheet. Every time the theme gets updated I have to go back and edit a lot of little tweaks like this. I would like to avoid that chore.
But, I’m also concerned about load times. As I understand, the CSS custom style sheet gets loaded last, and the browser then over writes with whatever the CSS has asked.
Sort of … OK, lets go right, then no lets go left. Why take the time to command one thing then take more time to countermand that and do something else.
I suppose all that back and forth could be eliminated by using a fully custom site, but that is way more than I have the time to learn.
One last point: I did find a screen-reader-text statement in both the Categories and Archives widgets file as loaded by WP itself. It would seen to me that double title off should be the WP default, and not have to be set elsewhere… just a thought.
Thanks for your help and understanding … and merry christmass.
You can create a child theme (https://codex.wordpress.org/Child_Themes) or install a Custom CSS plugin (https://en-ca.wordpress.org/plugins/search.php?q=custom+css) and put the code in it.
Not to worry about load times or the overwriting. Your major theme’s css is what is loaded first, then any child theme’s css or custom css plugin. It happens so fast that there is virtually no lag time.
OK, did the correction for screen readers, but the double title came back.
bc
Grrr…
Forgot to put “label” in front…
label.screen-reader-text {
width: 0px !important;
height: 0px !important;
text-indent: -9999px !important;
}
Did the correction for label. BUT, still seeing double title for the widgets.
The first version worked fine, but I guess would not be seen by a screen reader app. But telling it to have zero size does not seem to work. I hope to understand the logic here at some point.
bc
Then try this…
.screen-reader-text {
width: 0px !important;
height: 0px !important;
opacity: 0 !important;
}
…if it doesn’t work, then go back to the one that did.
Also, after doing some more research, the .screen-reader-text is a part of the WordPress core, but it seems that this theme is not displaying correctly.
According to this link, this is the proper way to hide it visually…
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
OK, this last revision now works.
Thanks for your help in this long standing issue.
Have a Merry Christmas
bc
You too. You can mark this “resolved”.
