לדעת מה הבעיה מקצר את הדרך לפתרון
הצהרת נגישות
אתר חדש
כשאתם מעלים אתר חדש לאויר וודאו שישנה הצהרת נגישות. ללא זה על פי התקנות בישראל יהיה ניתן לתבוע אותכם מיד.
בעיות נגישות
בכל פעם שישנם בעיות נגישות המונעות מאדם עם מוגבלות להשתמש באתר או לקבל שירות מכם אליכם לציין מה אפשרויות האחרות כדי לקבל את השירות. אם אין אפשרות שכזאת פנוי למורשה נגישות שירות להתייעצות מה לעשות במקרה זה.
הזמנה למשוב
תרשמו בהצהרה שאם גולש נתקל בבעיה עליו לספק את הפרטים הבאים: 1. תיאור הבעיה 2. מהי הפעולה שניסיתם לבצע 3. באיזה דף גלשתם? 4. סוג וגרסה של הדפדפן 5. מערכת הפעלה וגרסתה. 6. סוג הטכנולוגיה המסייעת (במידה והשתמשתם). הפרטים האלו יקלו עליכם לאתר ולקתן את הבעיה
התאמות טכנולוגיות
תנו הסברים על ההצאמות השונות שביצעתם כמו תמיכה בקוראי מסך, ניווט מקלדת וכדומה
התאמות מבנה פיזי:
פרוט ככל שתוכלו על הסדרי הנגישות הפיזית כמו: חניות נכים, דרכי גישה, מעליות, שירותי נכים
חסמי נגישות
במקרה שישנם חלקים באתר או בשירות שאינם נגישים, ציינו זאת והסבירו את הסיבות, כגון מגבלות טכנולוגיות או פטורים שהתקבלו.
להימנע מהתחייבות
אנחנו לא ממליצים לכתוב בניסוח מחייב למשל במקום אנחנו מתחייבים לרשום אנחנו משתדלים.
לפתוח בהקדמה
פתחו את ההצהרה בהבעת רצון הארגון לנגישות, שוויון ואי-אפליה, והדגישו את הרצון לספק שירות נגיש לכל הלקוחות.
מידע על תאימות לדפדפנים ומערכות הפעלה
ציינו עם אילו דפדפנים ומערכות הפעלה האתר תואם בצורה מיטבית, כדי לאפשר למשתמשים לדעת כיצד לקבל את החוויה הנגישה ביותר
מידע על תהליכים ושירותים נגישים:
הסבירו כיצד ניתן להשתמש בשירותים שלכם באופן נגיש, כולל הוראות להפעלת פונקציות הנגישות באתר, והאם קיימות חלופות נגישות לשירותים שאינם מונגשים במלואם
מידע על תכנים של צד שלישי
: אם באתר משולבים תכנים או שירותים של צד שלישי שאינם מונגשים, ציינו זאת והסבירו אילו חלופות קיימות או כיצד ניתן לקבל סיוע
מיקום הקישור בדף
ניתן להוסיף את הקישור להצהרה בתחתית האתר. התקנות מבקשות שההצהרה תהיה נגישה ובמקום בולט.
עדכון ותאריך
ציינו את תאריך העדכון האחרון של ההצהרה, והתחייבו לעדכן אותה בהתאם לשינויים או שיפורים בנגישות
פרטי רכז הנגישות:
ציינו את שם רכז הנגישות של הארגון, כולל פרטי התקשרות כגון טלפון ודואר אלקטרוני, כדי לאפשר ללקוחות לפנות במקרה של שאלות או בעיות.
ציון רמת הנגישות והתקן:
הצהירו באיזו רמה האתר הונגש, למשל: "האתר הונגש ברמת AA בהתאם להנחיות WCAG 2.0" .
קישור להצהרה
הצהרת נגישות צריכה להופיע בכל הנכסים הדיגיטליים שלכם באתר, בדפי נחיתה ובאפליקציות אם ישנם.
תיאור התאמות הנגישות
פרטו את התאמות הנגישות שבוצעו באתר האינטרנט ובמקום הפיזי של הארגון
מפתחים
אל תסתמך רק על צבע להבעת מצב
השתמש באייקון או טקסט נוסף: "שדה חובה", "שגיאה".
אל תשתמש בפופ-אפים שחוסמים ניווט
ודא שניתן לסגור או לצאת מהם עם Esc או לחצן ברור.
אפשר ניווט מותאם למסך מגע ולמקלדת יחד
תמיכה גם ב־hover וגם ב־focus.
אפשר ניווט מלא עם מקלדת בלבד בתוך הפופאפ
כולל מעבר, בחירה וסגירה – ללא צורך בעכבר.
אפשר סגירה עם כפתור וגם עם מקש Esc
זהו חלק מהנגישות למשתמשי מקלדת – תמיכה בשתי דרכים היא חובה.
אפשר סגירה של הפופאפ גם דרך מקש Esc
לטובת משתמשי מקלדת.
אפשר שליחה עם Enter ולא רק בלחיצה עם עכבר
במיוחד בטפסים או רכיבים מדמים טפסים.
בדוק תאימות בדפדפנים ישנים
<dialog> אינה נתמכת באופן מלא בכל דפדפן – שקול fallback או polyfill במידת הצורך.
בנה כפתורים עם <button> ולא <div> או <a> בלבד
כך תקבל את כל הפונקציונליות המובנית של נגישות.
הוסף aria-labelledby ו־aria-describedby אם צריך
אם התוכן מורכב, עזור לקוראי מסך להבין מה הדיאלוג מכיל
הוסף אינדיקציה למיקוד באמצעות CSS
לדוגמה: :focus { outline: 2px solid #000; }
הוסף טקסט חלופי (alt) לכל תמונה
אלא אם מדובר בתמונה דקורטיבית בלבד – אז יש לרשום alt="".
הוסף לחצנים מתאימים לסגירת מודלים
כולל aria-label="סגור חלון" למשתמשי מסך.
החזר את המיקוד למקום ממנו הגיע המשתמש כשפופאפ נסגר
זה שומר על רצף פעולה תקין.
הימנע ממלכודות מקלדת
אל תיצור רכיבים שאי אפשר לצאת מהם באמצעות Tab או Esc. ובצעו בדיקות כדי לוודא שלא נוצרה מלקודת בטעות
הימנע מקיבוע Viewport
אל תשתמש ב־<meta name="viewport" content="user-scalable=no"> – זה חוסם הגדלה.
הפוך אזורי לחיצה לנגישים במסכים קטנים
לפחות 44px גובה ורוחב.
הצג שגיאות טופס באופן נגיש
עם טקסט ברור וציון בשדה הבעייתי (שימוש ב־aria-describedby).
השתמש ב-labels בטפסים
כל שדה קלט צריך <label for="id"> שמתאים ל-id של האלמנט.
השתמש ב־.showModal() לפתיחה תקינה של הדיאלוג
זה מגדיר את הדיאלוג כ־modal (חסום רקע) ומעביר אליו מיקוד אוטומטי
השתמש ב־<form method="dialog"> לכפתורי פעולה בתוך הדיאלוג
פעולה זו תסגור את הדיאלוג אוטומטית – נוח ובטוח.
השתמש ב־ARIA רק כשאין אלטרנטיבה סמנטית
למשל role="button" כשאין אפשרות להשתמש ב-<button>.
השתמש ב־aria-modal ו־aria-labelledby או aria-label לפופאפ
כדי שהקורא מסך יבין מה מוצג.
השתמש ב־autocomplete בשדות טופס
לדוגמה: autocomplete="email", name, tel.
השתמש ב־rem או em לגודל טקסטים ומרווחים
לא px קשיח – כדי לאפשר שינוי גודל טקסט.
השתמש בתגיות סמנטיות של HTML5 למבנה האתר
למשל <header>, <main>, <nav>, <section>, <footer> – הן מסייעות לקוראי מסך להבין מבנה.
השתמש בתגית <dialog>
במקום להשתמש בDIV לפופ-אפים השתמש בתגית <dialog> היא מגיעה נגישה מהקופסא ותחסוך לך הרבה מאוד עבודה בהנגשה.
התאמות למקלדת
השתמש ב- :focus-visible כדי להתאים עיצוב למקלדת מבלי לקלקל את החוויה למשתמשי עכבר
ודא שהפופאפ נגיש גם במסכים קטנים
רספונסיביות ונגישות הולכים יחד.
ודא שידוע למשתמש שהמודל נפתח
השתמש ב־aria-hidden ו־aria-modal="true".
ודא שמיקוד עובר לפופאפ כשנפתח
כך שמשתמש מקלדת יוכל לנווט בו בקלות.
ודא שקוראי מסך מזהים שהדיאלוג נפתח
כאשר נפתח, כדאי לעדכן aria-hidden לרקע ולעשות פוקוס אוטומטי על הדיאלוג.
ודא שתפריטים נפתחים מגיבים למקלדת
Tab, Enter, Esc, חצים – הכל צריך לפעול.
וודא שהתוכן בתוך <dialog> כולל כותרת ברורה
רצוי שתהיה כותרת בולטת בראש הדיאלוג, עם תיאור תמציתי של מטרתו.
וודא שימוש נכון בתגיות כותרת (H1-H6)
מותר רק H1 אחד לעמוד. שמור על היררכיה לוגית.
וודא שכל רכיב ניתן להפעלה באמצעות מקלדת בלבד
אל תשתמש באירועים כמו onclick בלבד – הוסף גם onkeydown.
וודא שסדר הניווט נשמר גם אחרי רספונסיביות
למשל: שדה טלפון לא יופיע לפני שם פרטי במובייל.
חסום את הרקע מהתמקדות בעת פתיחת פופאפ
אל תאפשר ניווט עם טאב מחוץ לחלון הפעיל.
מצבי HOVER
השתמש ב :focus-within כדי לצור חלופה נגישה למצבי hover
עדכן תיאור דינמי באמצעות live regions
למשל <div aria-live="polite"> – מתאים להודעות כמו "נשמר בהצלחה".
שמור על היררכיה ויזואלית ברורה בתוך הפופאפ
כותרת, תוכן, פעולה – לפי סדר ברור.
שמור על מיקוד (focus trap) בתוך הדיאלוג
כאשר הדיאלוג פתוח, המשתמש צריך להישאר בתוכו – בלי לקפוץ לאלמנטים מחוץ. אם אתם משתמשים בתגית <dialog> אין לכם מה לדאוג התגית אחראית לזה בשבילכם.
שמור על סדר טאב לוגי וטבעי
אל תשתמש ב-tabindex גבוה מ-0 אלא אם חייבים.
שמור על קונטרסט צבעים לפי הדרישות
יחס ניגוד של לפחות 4.5:1 לטקסט רגיל, ו-3:1 לטקסט גדול או ספק מנגנון המטפל בזה
תאימות הקוד למראה הויזואלי
בנה את הקוד כך שיהיה תואם לעיצוב הויזואלי מימין לשמאל ומלמעלה למטה (בהתאם לכיוון השפה)
עיצוב
אל תסתמך על צבע בלבד להעברת מידע
הוסף טקסטים, סמלים או תבניות כדי להבדיל בין אלמנטים, למשל בטפסים עם שגיאות.
אל תשתמש בטקסטים באורך שורה ארוך מדי
עד 80 תווים לשורה בטקסטים רספונסיביים – עוזר לקריאות
אפשר גישה למקלדת לכל פונקציה בעיצוב
כולל תפריטים נפתחים, טאבים, כפתורים מוסתרים וכו'.
אפשר הגדלת טקסט בלי שבירה של עיצוב
וודא שהעיצוב שומר על המבנה שלו גם בהגדלה של עד 200%.
אפשר התאמה בין מצב לילה למצב רגיל
משתמשים מסוימים רגישים לאור חזק – ממשק כהה יכול לעזור
אפשר התאמות נגישות מבלי להסתיר או לגרוע תכנים
התאמות כמו שינוי ניגודיות או הגדלת טקסט צריכות להיות זמינות מבלי לוותר על פונקציונליות
בדוק איך העיצוב נראה במצבים של עיוורון צבעים
יש כלים שמאפשרים סימולציה של עיוורון צבעים – חשוב לבדוק במיוחד אלמנטים שמסתמכים על צבע.
בדוק את העיצוב במצבים שונים של הגדלה והתאמה אישית
ודא שהעיצוב נשאר קריא וניתן לניווט גם בהגדלת טקסט, מצב ניגודיות גבוהה או שפות RTL כמו עברית
דאג ל־Touch Targets בגודל מתאים
אזורי לחיצה במובייל צריכים להיות בגודל של לפחות 44x44 פיקסלים
הוסף אינדיקציה ברורה למצב של רכיבים אינטראקטיביים
למשל: מצב נבחר, טופס מלא, טאב פעיל, שלב נוכחי בתהליך.
הימנע מטקסטים מהבהבים או נעים
אלמנטים מהבהבים (במיוחד מעל שלוש פעמים בשנייה) עלולים לגרום לרגישויות ולפגיעות נוירולוגיות.
הימנע ממלל ארוך בתוך כפתורים
כפתור צריך להיות תמציתי – מילים בודדות שמבהירות את הפעולה
היררכיה ברורה של כותרות
השתמש בכותרות מסודרות (H1, H2, H3 וכו') לפי היררכיה לוגית ולא רק לצורכי עיצוב.
העדף עיצובים פשוטים וברורים
ממשקים "נקיים" ועם ריבוי רווח לבן עוזרים להפחית עומס קוגניטיבי.
השאר מרווחים מספקים בין שורות וטקסטים
גובה שורה (line height) מומלץ של לפחות 1.5, וריווחים בין פסקאות של לפחות פי 1.5 מגובה השורה.
השתמש באייקונים רק עם הסבר טקסטואלי
גם אם האייקון מוכר (למשל עיפרון לעריכה), הוסף תווית או טקסט
השתמש באינדיקטורים ברורים למיקוד (focus)
כאשר משתמש נע בין פריטים באמצעות מקלדת – חשוב לראות בבירור מהו הרכיב הפעיל.
השתמש בפונטים קריאים ונגישים
הימנע מפונטים מקושקשים או דקורטיביים לגוף הטקסט, והעדף פונטים פשוטים וסנס-סריפיים (למשל, Arial, Open Sans).
ודא שהממשק ברור גם בלי עכבר
מעצבים צריכים לחשוב איך הממשק נראה ונגיש במעבר עם מקלדת בלבד – זה קריטי למשתמשים רבים
וודא שמדיה עשירה מלווה בטקסט חלופי
סרטונים צריכים לכלול כתוביות. אלמנטים קוליים צריכים תיאור טקסטואלי.
כללו הסברים
ספקו הסברים לפיתוח על פונקצונליות שאתם מתכננים
ספק משוב חזותי ותחושתי לפעולות
לדוגמה, שינוי צבע כפתור במעבר עכבר, שינוי במקלדת, התראה קולית או ויזואלית אחרי שליחה.
ספק קונטרסט גם בין רכיבי ממשק שאינם טקסט
כמו גבולות של שדות טופס או מצבים פעילים – ניגוד צבעים קריטי
עבודה עם טקסטים חיים ולא בטקסטים בתוך תמונות
טקסטים צריכים להיות ניתנים להעתקה, הגדלה וקריאה על ידי קורא מסך – הימנע מטקסטים בתוך תמונות
שטח לחיצה
חשוב מאוד לצור גבול המראה את שטח הלחיצה של הכפתורים
שימוש בטפסים עם תוויות ברורות
כל שדה בטופס צריך לכלול תווית (label) ברורה עם חיווי מתאים למצב שגיאה, חובה או תקינות.
שימוש עקבי באלמנטים עיצוביים
סגנונות, כפתורים, תפריטים וסמלים צריכים להיראות ולהתנהג באותו אופן בכל העמודים
שמור על גודל טקסט מינימלי של 16 פיקסלים
במיוחד לטקסט גוף – כדי להבטיח קריאות גם באופנים רספונסיביים.
שמור על היררכיה ויזואלית עם הבדל ברור בין רכיבים
המשתמשים צריכים להבין מה ראשי, מה משני ומה לחיץ
שמור על ניגודיות גבוהה
ודא שיש ניגוד צבעים מספיק בין טקסט לרקע (לפי WCAG רמה AA – יחס של לפחות 4.5:1 לטקסט רגיל).
שמור על סדר לוגי בעימוד ובקריאה
למשל: תפריטים בצד שמאל, כותרת בראש, טופס באמצע, כפתור שליחה בסוף – בהתאם לשפת העיצוב.
תן כותרות ותיאורים לכל קישור
טקסטים כמו "לחץ כאן" אינם מספיקים – יש לכתוב "קרא עוד על השירות שלנו", למשל.
אם לא מצאתם מושג שלכם, אל דאגה
צוות המומחים שלנו זמין לענות לכם באמצעות טופס שכאן.