web-dev-qa-db-fra.com

L'axe X du site est gâché parce qu'il est en hébreu

L'un des les sites de mes clients sont en hébreu, qui est une langue de droite à gauche.

J'utilise le thème MH Newsdesk Lite trouvé sur wordpress.org . Le thème utilise une classe .screen-reader-text{} générée parcore/ wordpress pour afficher le formulaire de recherche avec get_search_form().

Le problème est qu'il y a un texte, en particulier "חפס", qui déborde de la page de gauche. Je crois que cela est dû au fait qu’il est affiché en langage RTL. Je veux faire en sorte que la page d'accueil (et éventuellement d'autres pages et publications), never défile jusqu'à l'axe des x. Quelle est la meilleure pratique pour les développeurs de thèmes et les utilisateurs de ces thèmes d’utiliser .screen-reader-text{} tout en maintenant l’accessibilité et en ne perturbant pas l’affichage (comme la page défilant horizontalement dans mon cas)?

Voici quelques liens pertinents que j'ai trouvés: https://make.wordpress.org/accessibility/tag/screen-reader/https://make.wordpress.org/themes/2015/01/26/support-screen-reader-text/

themescsslanguage
1
Rabu

C'est dû au css:

Cochez cette case (Ligne # 314 style.css):

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

Supprimez la marge de gauche alors cela fonctionne bien. C'est sur le formulaire de recherche de l'encadré. Désolé pour l'anglais.

Merci

0
Vee

Contexte: les directives d'accessibilité indiquent que les formulaires doivent avoir des étiquettes. Le concepteur de thème a évidemment décidé de ne pas vouloir l'étiquette, mais a utilisé cette astuce CSS pour la déplacer sans désobéir (totalement) aux instructions.

Toutefois, ce code ne masque que l'étiquette du formulaire de recherche à gauche d'une page en anglais (ou dans une autre langue de gauche à droite). Puisque l'hébreu est de droite à gauche, le texte apparaît et élargit considérablement la page.

La solution rapide consiste à le cacher à droite au lieu de gauche. La réponse de @ Vee ramène l'étiquette de texte à côté du formulaire, si vous le souhaitez.

Il se peut que vous soyez rétrogradé alors que quelqu'un pense poser la mauvaise question ou vous ne l'avez pas bien étudiée , ou autre chose.

1
Dub Scrib

La méthode de @ Vee fonctionnera, mais si vous voulez la garder cachée, utilisez cette méthode:

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

Il semblerait que vous ayez un plugin css personnalisé jetpack installé, alors ajoutez-le simplement ici, vous ne devrez donc pas vous mêler du thème parent.

0
Bryan Willis