תוכן העניינים
1 תיקון תצוגת תווים מיוחדים בהצהרות נגישות
כשבהצהרת הנגישות או בפרטי מורשה הנגישות מופיעים תווים כמו גרש (') או אמפרסנד (&),
לעיתים האתר או מערכת הניהול מקודדים אותם מספר פעמים כ־HTML entities. התוצאה: במקום לראות "בימים א'-ה'"
המשתמש רואה מחרוזות כמו א'-ה' – חוויית קריאה גרועה ומראה לא מקצועי.
הפתרון שיושם: נוספו פונקציות JavaScript שמפענחות קידוד HTML חוזר (decode) ומאבטחות את הטקסט לפני הצגה (escape). כך הטקסט מוצג תמיד נכון – גם כשמוזנים גרשים, אמפרסנד או סימני פיסוק אחרים – בלי לשבור את המבנה או לחשוף את האתר לסיכוני XSS.
התיקון חל על הצהרה נוספת מהאתר, על מורשה נגישות (שם, אימייל, טלפון) ועל דיווח הפרה, בכל המסכים והמודלים הרלוונטיים.
2 שיפור פונקציית "הסתר תמונות"
פונקציית "הסתר תמונות" נועדה לאפשר למשתמשים שמעוניינים בהפחתת גירויים ויזואליים לראות את האתר בלי תמונות.
בגרסאות קודמות התמיכה הייתה חלקית: תמונות רקע (למשל ב־Hero או ב־Footer), תגי <picture>
ותמונות שמוזרקות דינמית לא תמיד הוסתרו, ובמקרים אחרים התמונות "נעלמו" בצורה ששינתה את הפריסה ויצרה רושם מוזר.
מה שופר:
- כיסוי רחב יותר: מלבד תגי
img, מוסתרות כעת גם תמונות בתוךpictureוכל תמונות הרקע (background-image) באלמנטים בדף – כולל Hero, באנרים וסליידרים. - הסתרה עדינה בלי זעזוע פריסה: במקום להעלים לגמרי את האלמנט (display:none) – שיכול לרוקן אזורים ולגרום לקפיצות – התמונות מוצגות בעדינות: אטימות נמוכה מאוד (opacity) וטשטוש (blur). התוצאה: "נראה אבל לא ממש" – המשתמש לא רואה את התוכן הויזואלי, אבל הפריסה נשארת יציבה.
כך משתמשים שזקוקים להפחתת גירויים מקבלים חוויית גלישה נוחה יותר, בלי שהאתר ייראה שבור או ריק.
3 הגנה על פסי ההתאמה מפני CSS חיצוני
פסי ההתאמה (סליידרים) של גודל גופן, רווח מילים, רווח אותיות ו־גובה שורה
מוצגים בתוך פאנל התוסף. באתרים מסוימים ה־CSS הגלובלי של האתר (למשל כללים ל־input[type="range"]
או ל־div שמכילים אותם) דרס את העיצוב של הפסים – והם נראו מעוותים, גדולים מדי או לא ברורים.
השיפור: נוספה הגנה מלאה על מראה הפסים:
- עיצוב מפורש ל־מסלול (track) בדפדפנים שונים:
::-webkit-slider-runnable-trackו־::-moz-range-track, כך שהפס עצמו תמיד נראה אחיד. - שימוש ב־contain ו־isolation על קבוצת כל סליידר, כדי לבודד אותה מ־CSS של האתר.
- איפוס appearance והגדרות מינימום/מקסימום כדי שהפס לא יישבר גם כשהאתר משנה גודלי input או רכיבים כלליים.
כך בכל אתר שבו מותקן התוסף, פסי ההתאמה נראים עקביים, קריאים ונוחים לשימוש.
4 בידוד מלא של חלונות המידע מכלי הנגישות
חלונות כמו הצהרת נגישות, מורשה נגישות, ניווט מקלדת ו־דיווח הפרה נועדו להציג מידע וברור – לא להיות חלק מהתוכן שמושפע מהתאמות הנגישות. אם גודל גופן, רווח מילים, ניגודיות או היפוך צבעים היו חלים גם על המודלים, המשתמש היה מקבל טקסט מעוות, צפוף או לא קריא דווקא כשצריך לקרוא הוראות והצהרות.
מה בוצע:
- ניתוק מהתאמות טקסט: גודל גופן, רווח מילים, רווח אותיות וגובה שורה לא חלים על תוכן המודלים. נוספו דריסות מפורשות (word-spacing, letter-spacing, line-height) כך שהמודל תמיד מוצג בערכים נורמליים וקריאים.
- ניתוק מניגודיות והיפוך צבעים: ניגודיות גבוהה והיפוך צבעים חלים על האתר בלבד; במודלים נשמר עיצוב ברור ועקבי (רקע לבן, טקסט כהה) עם פיצוי ל־zoom במקום הצורך.
- כיוון RTL קבוע: באתרים שמוגדרים כ־LTR, תוכן המודלים (הצהרה, מורשה נגישות וכו') מוצג תמיד מימין לשמאל, עם
direction: rtlו־unicode-bidi: isolate, כדי שהקריאה בעברית תישאר טבעית. - דיווח הפרה ממורכז: חלון "דיווח הפרה" נשאר עם עיצוב ממורכז (טקסט וכפתורים במרכז) כדי להבדיל אותו מחלונות המידע הטקסטואליים ולתת חוויית מילוי טופס נוחה.
בנוסף, גם פונקציות כמו הדגשת קישורים, הדגשת כותרות, מצב קריאה, פונט דיסלקציה, הסתר תמונות וסמני עכבר מותאמים – לא חלות על תוכן המודלים, כך שהמידע החשוב תמיד נגיש וקריא.
5 הגנה ומיטוב במובייל
במובייל, שינוי גודל הגופן דרך התוסף (למשל 120% או 140%) השפיע לעיתים על חלונות המודל: המודל "נעלם" חלקית, הזום נראה קיצוני או הפריסה השתבשה. בנוסף, בחלק מהמכשירים הגדלה מעל 140% גרמה להתנהגות לא יציבה של הדף והמודל.
השיפורים:
- ניתוק המודל מגודל הגופן: במובייל נוספו כללים שמבטיחים שהמודל לא יורש את גודל הגופן המוגדל של העמוד – כולל שימוש ב־zoom מפצה וקביעת גודל גופן בסיסי למודל – כך שהחלונות נשארים קריאים ויציבים.
- מיקום ו־viewport: המודל מקובע ל־position: fixed עם כיסוי מלא של המסך (כולל שימוש ב־100dvh / 85svh) כדי שלא "יברח" או יקטן כשמשנים גודל גופן.
- מגבלת גודל גופן במובייל: כדי למנוע זום קיצוני ושבירת פריסה, במובייל ההשפעה של סליידר גודל הגופן מוגבלת ל־140%. המשתמש יכול להזיז את הסליידר מעבר ל־140%, אך ההשפעה בפועל על העמוד תישאר עד 140% – חוויית גלישה יציבה וברורה.
התוצאה: גלישה נוחה ואמינה בתוסף גם במובייל, עם מודלים תמיד קריאים וללא זום "פראי".
6 שיפור עיצוב דף הבית (Hero)
דף הבית של "נגישות לכולם" עבר עדכון עיצובי כדי להציג מסר ברור ומודרני בלי עומס ויזואלי. השינויים מבוססים על עקרונות של צפיפות נכונה, היררכיה ויזואלית ברורה וחוויית משתמש עדכנית.
- Hero קומפקטי: צמצום מרווחים מיותרים בין הכותרת, התת־כותרת, הפיצ'רים והכפתורים – כך שהבלוק נראה מאוחד וקריא בלי "אוויר" מוגזם.
- סדר אלמנטים: שורת הפיצ'רים (התקנה ב־30 שניות, WCAG 2.1, כל פלטפורמה) מוצגת ראשונה; מתחתיה כפתורי "התחל עכשיו" ו"שאלות נפוצות" – זרימת פעולה לוגית.
- אייקון "כל פלטפורמה": החלפת אייקון הברק באייקון גריד (רשת ריבועים) – סמל שמתקשר טוב יותר לתמיכה במגוון פלטפורמות ופחות ל"מתח" או אפקט מלאכותי.
- טקסט ותמצות: תת־הכותרת חולקה לשתי שורות קצרות עם מרווח מינימלי ביניהן; גודלי הגופן הוגדרו בנגיעה קלה כדי לשמור על קריאות בלי לחזור לעיצוב כבד.
- סטטיסטיקות: מספרי "אתרים", "משתמשים" ו"₪0 לכל החיים" מוצגים בגופן מעט גדול יותר ובשורה אחת, גם במובייל – מידע ברור בלי להעמיס.
בנוסף, באתר הוחלף אייקון הלוגו (ב־Header וב־Footer) ל־אייקון SVG אחיד – דמות נגישות עם ידיים מושטות – הזהה לאייקון שמופיע בתוסף עצמו, ליצירת זהות ויזואלית עקבית.
7 סיכום
העדכון המתואר כאן מחזק את התוסף ואת האתר בכמה מישורים: נגישות אמיתית (תצוגת תווים נכונה, הסתר תמונות יעיל וברור, פסי התאמה יציבים), חוויית משתמש (מודלים מנותקים מהתאמות וקריאים תמיד, מיטוב מובייל ומגבלת זום סבירה), ו־עיצוב ותקשורת (דף בית מסודר ומודרני, לוגו ואייקונים עקביים).
כל השינויים תואמים לגישת WCAG 2.1 ולעקרונות של נגישות דיגיטלית – כך שמשתמשי הקצה, כולל אנשים עם מוגבלויות, יקבלו כלי עקבי, צפוי ונוח לשימוש באתר שלכם. מתעניינים בהתקנה? קראו את איך זה עובד או הרשמו בחינם והתקינו תוך דקות.
רוצים את כל השיפורים האלה באתר שלכם?
התוסף שלנו מתעדכן כל הזמן. הרשמו בחינם והתקינו תוך דקות.