בעידן ה AI כל כך הרבה דברים משתנים כולל תפקידם של מתכנתים. והינה גם תחום הנגשת אתרי אינטרנט משתנה – כיום ניתן לפתח אתר אינטרנט באמצעות פרומפטים לכלי AI שונים. וכשיודעים להוסיף הנחיות נגישות בהתחלה ותוך כדי תהליך הבנייה / העדכון והשינוי- הרי שמקבלים ממשקים נגישים שהופכים את האתר לנגיש לפי התקנות ובמיוחד לפי הסטנדרט הבינלאומי המקובל בארץ, בארה"ב ובאירופה להנגשת תכנים באינטרנט – ה WCAG.
לפני 14 שנים בערך היו אנשים שרצו שאלמד לכתוב קוד. אז למדתי אבל גם סבלתי ומחיתי ברוב תוקף. אני לא אוהבת לכתוב קוד. אני אוהבת לכתוב אפיונים והנחיות נגישות לאלמנטים בממשקי משתמש. טוב, אני גם אוהבת לקרוא קוד… ואני במיוחד אוהבת לקרוא את ה WCAG מקצועיים ! מאמרים מקצועיים ומחקרים אקדמיים.
לצערי הרב, האפיונים שלי וגם ההנחיות שלי לא תמיד צברו פופולאריות בקרב מתכנתים: אם בגלל שחלק מהם היו או עדיין עצלנים מכדי לקרוא הנחיות, ועוד יותר עצלנים מלקרוא את דפי ההנחיות והטכניקות של ה WCAG, ואם בגלל שהם עצלנים מידי לכתוב קוד או ללמוד לכתוב קוד נגיש ואם בגלל סיבות אחרות.
וכך בעצם תוגבר מעגל הקסמים הזה של עוד סבב ועוד סבב בדיקות נגישות – שלרוב מוביל בסופו של דבר לאתר שאינו עומד בסטנדרט מינימלי להנגשת תכנים באינטרנט WCAG 2.0 לרמה A ו AA בישראל. אגב באירופה ובארה"ב התקדמו כבר לגרסאות מתקדמות יותר עם שינויי חקיקה שיבטיחו יותר איזונים בין הזכות של אנשים עם מוגבלות לנגישות דיגיטלית, לבין ההכרה בתיעדוף.
עוד סיבוב ועוד סיבוב ובכל פעם פנצ'ר חדש בגלגלי הנגישות
דוגמה 1: כפתור כיווץ והרחבה
סבב ראשון
- אני מוצאת שאלמנט שמרחיב ומכווץ מידע, לא מוגדר באופן תקין למשתמשי מקלדת עם וללא תוכנה קוראת מסך ומציינת זאת בדוח הנגישות בעמודת תיאור.
- בעמודת המלצות תיקון, אני כותבת שניתן להשתמש בטכניקות כגון aria-expanded ומצרפת קישורים בעמודה זו או בעמודת מקורות מידע.
סבב שני לאחר תיקונים – שמגיע לאחר כמה שבועות לפחות ולעיתים לאחר כמה חודשים
האלמנט חזר מתוקן חלקית במקרה הטוב
- או שהוגדר עבורו aria-expanded=false כשהאלמנט מכווץ אבל לא true כשהוא מורחב.
- או ההפך מסעיף 1.
- או שבטעינת העמוד האלמנט לא "מוצג" לתוכנה קוראת מסך כאלמנט מכווץ שניתן להרחבה, אבל בלחיצה עליו המשתמש מקבל חיווי קולי בקורא המסך שהוא מורחב.
- או שלאלמנט דווקא חסר אפקט וויזואלי שיאפשר למשתמשי מקלדת רואים, לראות את מוקד המקלדת בזמן ניווט.
- או שהוגדר יחס ניגוד מתחת למינימום הנדרש.
- או שהאלמנט, שבדרך כלל מוגדר ככפתור, קיבל "צ'ופר" בדמות tab-index חיובי במספר גבוה מאוד – מה שגורם לשיבוש בסדר הניווט למשתמשי מקלדת עם וללא קורא מסך.
או שילובים של כמה אפשרויות בווריאציות שונות
- אבל לא כתבת לנו.
- אנחנו רוצים לדבר איתך
- לא מצאנו אצלנו את הבעיה
סבב שלישי
למרבה הצער לעיתים קרובות גם סבב שלישי לא מספיק
למרבה הצער, לעיתים קרובות מאוד מדובר בתהליכים ארוכים ומתישים לכל הצדדים הנוגעים בדבר.
דוגמה 2: תיאור תמונות
האמת היא שצריך לדעת איך לתאר תמונות מסוגים שונים בהקשר מתאים. ובכל זאת בחלוף מעל לעשור זוהי משימה מאתגרת לעיתים. תיאור מפורט מידי עשוי לפגוע בחוויית המשתמש שכן הוא אינו רצוי בסיטואציה מסוימת, ולעיתים החסרת מידע דווקא תסייע לאנשים להבין את ההקשר. גם במקרה זה, אפשר כיום להסתייע בכלי AI שונים כגון Chat GPT לתיאור תמונות שיצרתם באמצעות כלי AI או תמונות שצילמתם וברשותכם.
להלן תמונה – איך הייתם מתארים אותה?
תכונות HTML ו‑ARIA מקיפות מפתח כבול בכבלים – המחשה למעגל קסמים שבו מפתחים מסתבכים במשימות נגישות פשוטות, והצורך בכלי AI שיפרמו את הקשר.
- בתוך רקע סגלגל כהה נוצץ מעגל מאגי עתידני-דיגיטלי בקווי ניאון כחולים‑סגולים.
- מן הטבעת המרכזית מסתעפות זרועות רבות, וכל קצה ענף עטור בבועה זוהרת ובה שם תכונת נגישות ב‑HTML או aria
- ARIA – `<button>`, `role="button"`, `aria-label`, `alt`, `tabindex`, `aria-live`, `heading levels`, `contrast ratio`, `skip links`, `lang`, `focus‑visible` ועוד. הקווים הדקים יוצרים רשת מורכבת המזכירה “מעגל קסמים” אינסופי.
- במרכז המעגל יושב מפתח אתרים מסתבך בכבלים דמויי סוגריים מסולסלים. יד אחת תומכת בראשו בתסכול והבעת פניו מבטאת בלבול. הכבלים מתלפפים סביב זרועותיו, משלימים את המסר: אפילו משימות נגישות “פשוטות” עלולות להפוך לסבך כאשר אין כלים נכונים – וכאן נכנס הפוטנציאל של AI לפשט ולפתור.
- התאורה הנאונית שוטפת את הדמות ואת הכיתובים בזוהר כחלחל‑סגלגל היוצר תחושת עומק מפרספקטיבה על־חללית, ומרמזת לטכנולוגיה מתקדמת. חלקיקי אור עדינים מרחפים סביב, מחזקים את האווירה המאגית של “מעגל נגישות” מתעתע.
-
-
-
-
-
-
- התמונה מדגימה כיצד ריבוי דרישות נגישות עלול להיראות כמו לחש־קוד סבוך – בשעה שכלי AI בשפה טבעית מסוגלים “לתרגם” את הבקשה למרכיבים מדויקים ולהנגיש את התהליך למפתחים.
-
-
-
-
-
-
לפתח אתרים ואפליקציות עם כלי AI בשפה טבעית ומבלי לדעת לכתוב קוד
ואז הם הגיעו כלי ה AI כולל היכולות המופלאות לשפר את הנגישות לאנשים עם מוגבלויות וכן, עם היכולת לפתח אתרי אינטרנט ואפליקציות באמצעות פרומפטים ומבלי באמת לדעת לכתוב קוד – לפחות כשמדובר בממשקים פשוטים ויומיומיים – או לא בהכרח בעצם.
למה לא בעצם? כי גם לדעת לאפיין ולבנות תפריט נגיש או טופס מקוון נגיש – גם הם דוגמאות לאלמנטים מורכבים שגם היום קשה למתכנתים רבים ליישם.
התנסיתי במספר כלי AI כגון
- Previewב Chat GPT של חברת Open AI
- Artifactשל Claude AI של חברת Anthropic
- Google AI studio ו Gemini
- Groq
- ועד ל Base44 הפיתוח הישראלי של מאור שלמה שנמכר לחברת וויקס.
Base44 ליצירת אתרים ואפליקציות
- Base44עושה עבודה פשוט מדהימה בבניית אתרי אינטרנט ואפליקציות Webשבו כל השיח מתבצע בשפה טבעית.
- אחד הדברים שהרשימו אותי במיוחד ב Base44 הוא שניתן לטעון תמונות ישירות מהמחשב, כן, בלי לספק כתובת URL של התמונה עם סיומת jpg או png. את התמונות ניתן להוסיף לאתר או ליישום שבונים ולבקש להגדיר טקסט חלופי בפרמטר alt או להגדיר את התמונה עם alt ריק.
- באמצעות Base44 הצלחתי גם ליצור מערכת שתדע לשלוח נתונים לכתובת דואר אלקטרוני של נרשמים או בטופס יצירת קשר – גם כן על ידי פקודות טקסט פשוטות.
- מה שעוד מרשים זה שניתן לשנות, לתקן, להוסיף אלמנטים והשינויים מתבצעים תוך מספר שניות או כמה דקות בודדות.
- כמובן שניתן להגדיר דומיינים מותאמים והגדרות רבות נוספות כולל אבטחת מידע ופרטיות.
- ורק התחלתי את המסע שלי בלמידת הפלטפורמה הזו לפני כמה ימים.
אפיוני נגישות כחלק מתהליך בניית האתרים
- פתחתי מסמך Word והתחלתי לכתוב אפיון לדף נחיתה.
- כתבתי את האפיון ברמה הכללית ולאחר מכן הגדרתי בשפה טבעית את מאפייני הנגישות המבוקשים. כלומר, ניסוח כללי של תנגיש את האלמנט הזה לפי WCAG וציון הגרסה לא מספק בהכרח.
- Base44 יצר את דף הנחיתה בגרסה הראשונית
- ואז התחלתי גם בבדיקות ובבקשות לשנות, לתקן, להגדיר מחדש, להסיר, להזיז אלמנטים ועוד.
- ותוך כמה שניות התעדכנה עוד גרסה.
כל השנים שבהם קראתי וחרשתי את WCAG ונספחיו, מאמרים מקצועיים ומחקרים, הביאו אותי מוכנה לשימוש בכלי AI לפיתוח אתרים. אני יודעת לכתוב הנחיות נגישות, כלי ה AI מיישם, אני בודקת ובמידת הצורך מספקת משוב – ותוך כמה דקות ספורות לכל היותר יש גרסה מעודכנת.
לאפיין, להגדיר עיצוב, לבנות ולפתח אלמנטים נגישים – זה נהדר. עם זאת חשוב מאוד לבדוק נגישות בכל הכלים הנפוצים וכולל בדיקה באמצעות מקלדת עם וללא תוכנות קוראות מסך, ובדיקה בדפדפנים ובמכשירי קצה שונים.
שגיאה: אין פוקוס ויזואלי לאלמנט אינטראקטיבי
אחד מהאלמנטים האינטראקטיביים שביקשתי ליישם הוא כפתור מכווץ, שניתן להרחבה ומציג מידע נוסף. מובן שאחד מהפרמטרים הוא אפשרות לראות את מוקד המקלדת בזמן ניווט מקלדת עם מקש ה TAB להתקדמות קדימה ו Shift + Tab לחזרה אחורה בניווט.
Base44 לא הצליח ליישם כשביקשתי אותו בעיצוב מסוים. שוב ושוב ניסיתי וללא הצלחה. כמעט אמרתי זהו, עם המערכת הזו. ואז התעשתתי וביקשתי עיצוב קצת שונה ואז זה הצליח – יש אפשרות לראות את מוקד המקלדת. כך אנשים עם מוגבלות מוטורית בידיים שמסתייעים בניווט מקלדת בלבד (ובמכשירי עזר מבוססים מקלדת) יוכלו לראות לאן הם מנווטים בממשק המשתמש.
העובדה שמתקבלות שגיאות בודדות ביותר מעודדת ומשמחת אותי מאוד.
לסיכום
לכלי כמו Base44 יש פוטנציאל אדיר באמת לשלב נגישות, שמישות, ופיתוח אתרים ואפליקציות Web כי לפעמים כל מה שצריך זה אתר קטן או דף נחיתה אחד או טופס מקוון אחד ליצירת קשר. למיטב הבנתי ניתן כבר כיום לבנות ממשקים מורכבים עם Base44 כך שלא בהכרח מדובר באתרים פשוטים.