נגישות אתרים: מדריך מעשי לעסקים בישראל

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

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

במדריך נסביר:

• מה זה עיצוב נגיש ולמה הוא לא סותר עיצוב יפה;
• מה דורשים החוק בישראל, תקן ת"י 5568 והנחיות WCAG;
• אילו עקרונות נגישות משפיעים הכי הרבה על אתר של עסק;
• איך בודקים נגישות בעצמכם, בלי תקציב גדול;
• למה תוסף נגישות לבד לא פותר את הבעיה;
• מה זו זמינות של אתר ואיך מודדים אותה.

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

לנגישות בעיצוב יש שתי משמעויות שמשלימות זו את זו.

נגישות כבהירות

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

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

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

נגישות כהכלה

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

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

נגישות ויופי הם לא אויבים

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

מה דורש החוק בישראל: ת"י 5568 ו-WCAG

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

התקן והרמה הנדרשת

הדרישה הטכנית מבוססת על התקן הישראלי ת"י 5568, שמאמץ את הנחיות WCAG של ארגון W3C. הרמה שנדרשת בפועל היא AA. ההנחיות עצמן מתעדכנות: הגרסה העדכנית היא WCAG 2.2, שהוסיפה בין השאר דרישות על גודל מטרות מגע, נראות של פוקוס וחלופות לגרירה. גם אם התקן הישראלי מפנה לגרסה קודמת, עבודה לפי WCAG 2.2 ברמה AA מכסה אותו ומכינה אתכם לעדכונים הבאים.

מה זה אומר בפועל לעסק

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

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

גם מעבר לישראל

עסקים ישראליים שמוכרים ללקוחות באירופה צריכים להכיר גם את ה-European Accessibility Act, שנכנס לתוקף ב-2025 וחל על חלק מהשירותים הדיגיטליים, כולל מסחר מקוון. הבסיס הטכני גם שם הוא WCAG, כך שאתר שנבנה נכון בישראל נמצא בנקודת פתיחה טובה.

ארבעת עקרונות הנגישות של WCAG

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

ניתן לתפיסה (Perceivable)

כל מידע צריך להגיע לגולש בדרך שהוא יכול לקלוט:

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

ניתן להפעלה (Operable)

את כל הפעולות באתר צריך להיות אפשר לבצע גם בלי עכבר:

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

מובן (Understandable)

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

יציב (Robust)

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

מה בודקים קודם: שבעה דברים שמשפיעים הכי הרבה

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

1. ניגודיות צבעים

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

2. מבנה כותרות

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

3. טקסט חלופי לתמונות

תיאור קצר של מה שהתמונה מראה ולמה היא שם. לא "תמונה1.jpg" ולא רשימת מילות מפתח. לתמונה של כפתור או אייקון בלי טקסט, ה-alt צריך לתאר את הפעולה, למשל "פתיחת צ'אט בוואטסאפ".

4. ניווט במקלדת ופוקוס

נסו לעבור על האתר רק עם Tab ו-Enter. אם אי אפשר לפתוח את התפריט, לסגור חלון קופץ או לראות איפה הפוקוס נמצא, יש בעיה. עיצובים רבים מסירים את מסגרת הפוקוס כי היא "לא יפה". עדיף לעצב אותה מחדש בצבעי המותג מאשר להעלים אותה.

5. טפסים

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

6. כפתורים וקישורים

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

7. וידאו, אנימציות וחלונות קופצים

וידאו עם כתוביות, אנימציות שמכבדות את הגדרת prefers-reduced-motion של המכשיר, ופופאפים שאפשר לסגור במקלדת ושלא חוסמים את התוכן מיד עם הכניסה לאתר.

איך בודקים נגישות בעצמכם

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

כלים אוטומטיים

• Lighthouse ב-Chrome DevTools: לשונית Accessibility נותנת ציון ורשימת בעיות;
• axe DevTools: תוסף לדפדפן שמאתר בעיות ומסביר איך לתקן;
• WAVE: מציג את הבעיות ישירות על העמוד;
• בודק ניגודיות כמו זה של WebAIM, לבדיקת זוגות צבעים.

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

בדיקה ידנית

1. מקלדת: עברו על העמוד עם Tab, Shift+Tab, Enter ו-Esc.

2. הגדלה: הגדילו את הדפדפן ל-200% ובדקו שהטקסט לא נחתך ושאין גלילה אופקית.

3. קורא מסך: NVDA בחינם ב-Windows, VoiceOver ב-Mac וב-iPhone, TalkBack באנדרואיד. האזינו לעמוד הבית ולטופס יצירת קשר.

4. מובייל: נסו להשלים את הפעולה המרכזית ביד אחת, בחוץ, באור שמש.

5. גווני אפור: הפעילו מצב אפור במכשיר ובדקו שמידע לא הולך לאיבוד.

בפלטפורמות שבהן אנחנו עובדים

• Webflow: בתוך ה-Designer יש פאנל Audit שמתריע על alt חסר, ניגודיות וסדר כותרות. אפשר להגדיר alt ברמת הנכס בספריית ה-Assets, להוסיף aria-label ולשלוט בסדר הפוקוס. ב-CMS כדאי להוסיף שדה alt לכל תמונה, כדי שגם פוסטים חדשים יהיו נגישים.
• WordPress: כדאי לבחור תבנית שמסומנת accessibility-ready, להיזהר מבוני עמודים שמייצרים קוד עמוס ולבדוק כל תוסף לפני ההתקנה. סליידרים וגלריות מתוספים חיצוניים הם מקור קבוע לבעיות.

למה תוסף נגישות לבד לא מספיק

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

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

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

זמינות: הצד השני של "אתר נגיש"

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

איך מודדים זמינות

• אחוז זמינות (Uptime): החלק מהזמן שבו האתר עובד ועונה כמו שצריך. זה המדד שמופיע בהתחייבויות השירות (SLA) של ספקי אחסון.
• MTBF (Mean Time Between Failures): הזמן הממוצע בין תקלות. ככל שהוא ארוך יותר, טוב יותר.
• MTTR (Mean Time To Repair): הזמן הממוצע לתיקון תקלה. ככל שהוא קצר יותר, טוב יותר.

"התשיעיות"

זמינות נמדדת במספר התשיעיות. מה שנשמע גבוה הוא לא תמיד מספיק:

• 99% זמינות שווה בערך 3.65 ימי השבתה בשנה;
• 99.9% שווה בערך 8.8 שעות בשנה;
• 99.99% שווה בערך 53 דקות בשנה;
• 99.999% שווה בערך 5 דקות בשנה.

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

איך משפרים זמינות באתר של עסק

• אחסון מנוהל עם CDN: פלטפורמות כמו Webflow מגיעות עם אחסון ו-CDN מובנים. ב-WordPress כדאי לבחור אחסון מנוהל ולא את החבילה הזולה ביותר.
• ניטור: שירותי ניטור כמו UptimeRobot או Better Stack בודקים את האתר כל כמה דקות ושולחים התראה ברגע שהוא נופל.
• גיבויים וסביבת staging: כדי שעדכון תוסף לא יפיל את האתר החי, ושאפשר יהיה לחזור לגרסה תקינה תוך דקות.
• הפרדת רכיבים: אם שירות חיצוני כמו צ'אט או מערכת הזמנות נופל, שאר האתר צריך להמשיך לעבוד. במערכות גדולות עושים את זה עם איזון עומסים (load balancing), התרחבות אוטומטית (scalability) ועמידות לתקלות (fault tolerance).
• ניטור של הטפסים עצמם: טופס שהפסיק לשלוח לידים ל-CRM הוא השבתה שקטה. כדאי לבדוק אותו באופן קבוע או לבנות אוטומציה שמתריעה כשלא נכנסו לידים במשך זמן חריג.

תוכנית עבודה: איך מנגישים אתר קיים

שלב 1: מיפוי

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

שלב 2: תיעדוף

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

שלב 3: תיקון במערכת העיצוב

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

שלב 4: תוכן

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

שלב 5: הצהרת נגישות ובדיקה חוזרת

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

טעויות נפוצות

• להשאיר נגישות לסוף הפרויקט, כשכל תיקון כבר יקר;
• לסמוך רק על ציון 100 ב-Lighthouse;
• להעלים את מסגרת הפוקוס כי היא "מקלקלת את העיצוב";
• להכניס טקסט חשוב בתוך תמונה, למשל באנר עם מבצע;
• לשכוח את הגרסה האנגלית או הרוסית של האתר, שגם היא צריכה להיות נגישה;
• להנגיש פעם אחת ולא לבדוק שוב אחרי עדכוני תוכן.

איך RJL Studio בונה אתרים נגישים

אנחנו מתייחסים לנגישות כחלק מהעיצוב והפיתוח, לא כתוסף בסוף. בשלב ה-UX/UI אנחנו בודקים ניגודיות, גודל מטרות מגע ומבנה כותרות כבר בקבצי Figma. בפיתוח ב-Webflow או ב-WordPress אנחנו בונים רכיבים סמנטיים, טפסים עם תוויות, ניווט מלא במקלדת ושדות alt ב-CMS, כך שגם תוכן שתעלו בעצמכם יישאר נגיש. לפני השקה אנחנו מריצים בדיקות אוטומטיות וידניות, ומגדירים ניטור זמינות לאתר ולטפסים.

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

שאלות נפוצות על נגישות אתרים

האם כל עסק בישראל חייב אתר נגיש?

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

מה ההבדל בין ת"י 5568 ל-WCAG?

WCAG הן ההנחיות הבינלאומיות של W3C. ת"י 5568 הוא התקן הישראלי שמבוסס עליהן ומגדיר מה נדרש בישראל. עבודה לפי WCAG 2.2 ברמה AA היא דרך טובה לעמוד בתקן ולהישאר מעודכנים.

האם תוסף נגישות מספיק כדי לעמוד בחוק?

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

כמה זמן לוקח להנגיש אתר?

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

האם נגישות משפיעה על SEO?

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