1

One of my client's sites are in Hebrew which is a right-to-left language.

I'm using the MH Newsdesk Lite theme found on wordpress.org . The theme is using a core wordpress generated class .screen-reader-text{} to display the search form with get_search_form().

The issue is there's text, specifically "חפס", overflowing off the page on the left. I believe this is due to the fact that it's being displayed in rtl language. I want to make it so the homepage (And possibly some of the other pages and posts, too), never scroll to the x-axis. What is the best practice for theme developers and users of these theme to use .screen-reader-text{} while maintaining accessibility and not messing up the display (like the page scrolling horizontally in my case)?

Here are some links I've found that are relevant: https://make.wordpress.org/accessibility/tag/screen-reader/ https://make.wordpress.org/themes/2015/01/26/supporting-screen-reader-text/

  • Why someone vote negative?? – Vee Jul 15 '15 at 11:33
  • 2
    Don't sweat the downvote. I upvoted to counter it :). There's nothing that annoys me more on this site then when people downvote and don't have the decency of telling you why, especially when it's for a newer user. He probably thought this belonged on stack-overflow since it's dealing with css, but .screen-reader-text is a wordpress "core" class so it belongs here in my opinion. – Bryan Willis Jul 15 '15 at 12:53
  • If this is marked as off topic, then any question on this site about css should also be. – Bryan Willis Jul 21 '15 at 5:19
0

It is due to css:

Check this(Line # 314 style.css):

.search-form .screen-reader-text {
    left: -9999px;
    overflow: hidden;
    position: absolute;
}

Remove the left margin then it works fine. It is on sidebar search form. Sorry for English.

Thanks

  • The theme's style.css? Because I didn't find it in there. Thanks! – Rabu Jul 16 '15 at 7:53
  • Yes theme style [www.michalzucker.com/wp-content/themes/mh-newsdesk-lite/style.css?ver=1.0.4]. I think you already fixed that :) Thanks – Vee Jul 16 '15 at 11:58
1

Context: accessibility guidance says forms should have labels. The theme designer obviously decided they didn't want the label there but used that CSS trick to move it without (completely) disobeying the guidance.

However, that code only hides the search form label off the left of a page in English (or other Left to Right language). Since Hebrew is Right to Left the text is appearing and making the page really wide.

The quick fix is to hide it to the right instead of the left. @Vee's answer brings the text label back next to the form, if you want it there.

You may be being downvoted as someone thinks you're asking the wrong question or you haven't researched it properly, or something else.

0

@Vee's method will work, but if you want to keep it hidden from display use this method :

.search-form .screen-reader-text {
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;     
}

It looks like you have a jetpack custom css plugin installed so just add this there, then you don't have to mess with the parent theme.

  • It's not working, for some reason. I added it to the theme's style.css and I tried putting it in with the Jetpack CSS plugin. – Rabu Jul 16 '15 at 7:53
  • Looks like you have it working on your site... Maybe your browser cache needed to update. – Bryan Willis Jul 22 '15 at 0:01
  • Yes, now it's working. It just took a while. Thx – Rabu Jul 22 '15 at 23:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.