בסריקת נגישות שעשינו לאתר בעברית קיבלנו ממצא מוזר: גלילה אופקית של 108 פיקסלים בעמוד שנראה לגמרי תקין. האלמנט שזוהה כאשם היה מפתיע עוד יותר.

זה היה קישור הדילוג לתוכן. כלומר הרכיב שכל תפקידו לשפר נגישות הוא זה שיצר את תקלת הנגישות.

איך רכיב נגישות שובר עמוד

קישור דילוג הוא הקישור הראשון בעמוד, שמאפשר למי שמנווט במקלדת לקפוץ ישר לתוכן בלי לעבור על כל התפריט. הוא נועד להיות מוסתר עד שמגיעים אליו במקלדת, ואז להופיע.

הדרך הנפוצה ביותר להסתיר אותו, זו שמופיעה כמעט בכל דוגמת קוד ברשת, היא להזיז אותו הרחק אל מחוץ למסך: ערך שלילי גדול, נגיד מינוס 9999 פיקסלים, שדוחף אותו אל מעבר לקצה.

באנגלית זה עובד. הערך השלילי דוחף שמאלה, אל מחוץ לשדה הראייה, והדפדפן לא מרחיב את המסמך לכיוון הזה.

בעברית זה לא עובד. הכיוון מתהפך, האלמנט נוחת בצד ההפוך, והדפדפן מרחיב את רוחב המסמך כדי להכיל אותו. באתר שבדקנו הקישור הזה הגיע לרוחב של יותר מ-10,000 פיקסלים, וגרר איתו את כל העמוד.

התוצאה: בטלפון, כל עמוד באתר זז הצדה. זו נפילה בסעיף התקן שדורש שתוכן יסתדר במסך צר בלי גלילה אופקית.

הדפוס הנכון

במקום להזיז את הטקסט מחוץ למסך, מכווצים אותו לגודל אפסי וחותכים את התצוגה שלו. הוא נשאר קיים במלואו עבור קורא מסך, ואינו תופס שום מקום בפריסה, בשני כיווני הכתיבה.

זה שינוי של כמה שורות, והוא ההבדל בין רכיב נגישות שעובד לבין רכיב שמזיק.

למה זה קורה כל כך הרבה

כי כמעט כל הידע הזמין ברשת נכתב לאתרים שזורמים משמאל לימין. כשמעצב או מפתח מחפש “איך מסתירים טקסט לקורא מסך”, הוא מקבל תשובה נכונה לחלוטין, לאתר אחר.

וזה חוזר בהרבה יותר ממקרה אחד:

שוליים בצד קבוע. קוד שכתוב עם “ימין” או “שמאל” במפורש נשאר תקוע כשהעמוד מתהפך. הפתרון הוא לכתוב לפי “התחלה” ו”סוף”, שמתהפכים לבד.

חיצים שמצביעים הפוך. חץ “הבא” שמצביע ימינה נכון באנגלית והפוך בעברית. זה נראה קטן, ולמי שמנווט לפי הסימנים האלה זה בלבול אמיתי.

אנימציות שנכנסות מהצד הלא נכון. רכיב שאמור להיכנס מהצד שהעין מגיעה ממנו, ונכנס מהצד ההפוך.

וגם כלי הבדיקה עצמו. כשחיפשנו את האלמנט שגרם לחריגה, גילינו שהכלי מחפש אלמנט שחורג מהקצה הימני. בעברית החריגה יוצאת שמאלה, ולכן הוא דיווח נכון שיש בעיה ולא הצליח להצביע על מי אשם. גם הכלים כתובים באנגלית.

איך בודקים את זה בעצמכם

צמצמו את חלון הדפדפן לרוחב של טלפון, בערך 320 פיקסלים, ונסו לגלול הצדה. לשני הכיוונים. אם העמוד זז, יש חריגה.

זו בדיקה של שלושים שניות, והיא תופסת אחת התקלות הנפוצות ביותר באתרים בעברית: העמוד שאפשר “לגרור” קצת הצדה, שכולם מניחים שהוא סתם לא מסודר.

איך מצאנו את זה, וזה חלק מהסיפור

לא ראינו את התקלה הזאת בעין. באמת שלא: העמוד נראה מצוין בכל מסך שבדקנו בו.

מה שתפס אותה היה בדיקה שרצה בכל בנייה ומודדת דבר אחד פשוט, האם רוחב המסמך גדול מרוחב החלון. המספר היה 108 פיקסלים, וזה מספיק כדי לדעת שיש בעיה בלי לדעת מה היא. משם זה היה חיפוש, ובחיפוש הזה גילינו גם שהכלי עצמו מחפש בכיוון הלא נכון.

זה הלקח האמיתי כאן, והוא רחב יותר מ-RTL: תקלות מהסוג הזה לא מתגלות בעין אלא במדידה. אף אחד לא פותח את האתר שלו ואומר “רגע, יש כאן 108 פיקסלים מיותרים”. מה שקורה בפועל הוא שגולש בטלפון מרגיש שמשהו זז, לא מבין מה, ומייחס את זה לתחושה כללית שהאתר קצת רשלני.

ועוד שני מקומות שנשברים בשקט

טפסים. תווית שמיושרת לצד קבוע נוחתת בעברית בצד ההפוך מהשדה שלה, והקשר הוויזואלי בין השאלה לתשובה נשבר. זה לא נופל בשום בדיקה אוטומטית, כי מבחינת הקוד התווית מקושרת כמו שצריך.

טבלאות. טבלה רחבה שנחתכת במסך צר היא בעיה בכל שפה, ובעברית היא נחתכת מהצד שלא מנסים לגלול אליו. הפתרון הוא לתת לטבלה אזור גלילה משלה, ולוודא שאפשר להגיע לאזור הזה גם במקלדת ולא רק באצבע.

שלוש בדיקות שאפשר לעשות היום

לצמצם את חלון הדפדפן לרוחב טלפון ולנסות לגרור לשני הצדדים. אם משהו זז, יש חריגה.

לעבור על העמוד עם מקש Tab ולראות איפה נוחת הפוקוס הראשון. אם הוא נוחת על משהו שלא רואים, כנראה יש שם רכיב מוסתר בטכניקה הישנה.

להסתכל על החיצים. חץ “הבא” או “המשך” שמצביע לכיוון הלא נכון הוא הסימן הכי מהיר לכך שהאתר תורגם ולא הותאם.

ומה עושים כשמעתיקים קוד בכל זאת

אף אחד לא בונה אתר בלי להסתכל על דוגמאות, וזה בסדר גמור. השאלה היא מה בודקים אחרי.

חפשו במה שהעתקתם את המילים “ימין” ו”שמאל”. כמעט תמיד יש להן מקבילה שמתהפכת לבד לפי כיוון הכתיבה, ולרוב זו החלפה של מילה אחת.

חפשו ערכים שליליים גדולים. מינוס 9999 ודומיו הם כמעט תמיד סימן לטכניקת הסתרה ישנה שנשברת בעברית.

ואז פתחו את העמוד ברוחב של טלפון. אם הוא זז, מצאתם את זה תוך שלושים שניות במקום חודשיים אחרי שהאתר עלה.

לסיכום

עברית היא לא רק תרגום. היא כיוון זרימה הפוך, וכל טכניקה שמסתמכת על הכיוון צריכה להיבדק מחדש. הידע הזמין ברשת מצוין, והוא נכתב לרוב לאתר שזורם לכיוון השני.

בכל אתר שאנחנו בונים הבדיקה רצה בשלושה רוחבי מסך, כולל 320, ובודקת גם את הכיוון שאף אחד לא בודק. את הבאג שסיפרנו עליו כאן מצאנו בדיוק ככה, ולא בעין.

רוצים לדעת אם האתר שלכם זז הצדה בטלפון? בואו נדבר ↗