אין ספק כי כניסתם של Chat GPT ו Bard מחוללת התרגשות בקרב קהילות טכנולוגיות. ניתן למצוא אין ספור תומכים כמו גם אין ספור מתנגדים וספקנים. כולם צודקים- כל החששות וכל התקוות לגיטימיים בהחלט. לקחנו את Bard ואת Chat GPT לכמה בדיקות נגישות ולהלן כמה מן המסקנות הראשוניות.
איזה ממשק משתמש נגיש יותר?
גם Bard וגם Chat GPT ניתנים לשימוש דרך דפדפן אינטרנט. ל chat GPT יש גם אפליקציית סלולר ל IOS כאפליקציה רשמית ואפליקציות שונות אך בינתיים לא רשמיות לאנדרואיד. המנצח הגדול מבחינת נגישות למשתמשי מקלדת ולמשתמשי תוכנות קוראות מסך הוא Bard של גוגל.
בממשק של Chat GPT יש כפתורים לא נגישים, הממשק פחות ידידותי מבחינת ארגון סמנטי למשתמשי תוכנות קוראות מסך ואין חיווי כאשר מתקבלת תגובה לשאילתה.
אפליקציית Chat GPT ל IOS לא זמינה לבעלי Apple ID ישראלי. עם זאת, הדיווחים אומרים כי אפליקציית Chat GPT ל IOS בהחלט נגישה הרבה יותר מהממשק מהדפדפן. ובכל זאת, הניווט בתוצאות פחות ידידותי, שכן לא ניתן למשל לעבור עם מחוות מגע בין פסקאות, רשימות ואלמנטים נוספים – כך שהטקסט בתוצאת השאילתה מוקרא בבת אחת.
הממשק הנגיש של Bard
- ניווט מקלדת מלא בין כל המרכיבים האינטראקטיביים
- הגדרת התפריט הראשי בצורה מופתית
- אפשרות להגדיר ממשק משתמש בניגודיות גבוהה או רגילה. זאת למרות שמי שעובד עם ניגודיות גבוהה ברמת מערכת ההפעלה חלונות, הוא יחול גם על אתר Bard
- הגדרת אזורים כגון Main-Landmark לציון אזור תוכן מרכזי
- הגדרת כותרת h2 של שאילתות החיפוש, כך שניתן לנווט בניהן בקלות
- שדה החיפוש גם כן נגיש
- שינויים דינאמיים מוכרזים בצורה תקינה כגון Bard is typing, ו Bard replied
מה הם יודעים על הנגשת אתרי אינטרנט?
דוגמאות לשאילתות שבהם השתמשנו:
- Accessibility Overlays
- Aria-label
- Aria-describedby
- Role=option
- How to test website accessibility
ועוד
תשובות כלליות וקוד אחד תקין
- בכל מה שקשור לתשובות על שאלות כלליות כגון, איך לבדוק אתרי אינטרנט, מה זה נגישות אינטרנט, מה זה טקסט חלופי לתמונות, ניווט מקלדת, aria-labelוכד', התשובות הן כלליות מאוד ולא מחדשות הרבה מבחינת ידע כללי.
- בכל מה שקשור לכתיבת דוגמאות קוד, כאן צריכים להיות מאוד זהירים. באימות שאילתות הנגישות עם מידע המצוי באתרים רשמיים, נראה כי לא אחת יש שגיאות בכתיבת דוגמאות קוד בהתאם למפרטים הטכניים הנדרשים.
להשתמש בדוגמאות קוד שימוש מושכל וזהיר
- כאשר מבקשים שאילתות הכוללות דוגמאות קוד, כתוב במפורש Use code with caution.
- ובהחלט צריך לבדוק את דוגמאות הקוד ולא להתייחס אליהם כאל עובדה מוגמרת
- מתכנתים אם כך צריכים בהחלט להכיר את נפלאות הקוד הנגיש, בכדי שכלים כמו chat GPT ו Bard יוכלו לכתוב את הקוד, משימה שאורכת זמן רב ולעיתים שעות. מתכנת מיומן יוכל לקרוא את הקוד ולוודא שהוא תקין בכלל ובהתייחס לכתיבת קוד נגיש.
ניסיונות להנגשת קוד
ניסינו את Chat GPT ו Bard עם מספר שאילתות ודוגמאות קוד לא נגישות תוך הסתרת פרטים מזהים של אתרי אינטרנט מהם נלקחו. כאן הבאנו דוגמה פשוטה של הוספת טקסט חלופי לתמונות. חשוב לזכור כי ככל שמדובר ברכיבים מורכבים יותר, כך גם תוצאות לשאילתות יכולות להיות מאתגרות ומורכבות יותר.
עם Bard
השאילתה
Please make this code snippet accessible: <a class="top-nav-link" href="/">
<img src="/media/###/logo_###x##.png">
</a>
תשובת Bard
Sure, here is the accessible version of the code snippet:
html
<a class="top-nav-link" href="/">
<img src="/media/####/logo_###x##.png" alt="This is the logo for our website." />
</a>
The following changes were made to the code snippet to make it accessible:
* The image was given an alt attribute with a descriptive text. This text will be read by screen readers so that people who cannot see the image can still understand what it is.
* The image was given a class of "top-nav-link". This class can be used by CSS to style the image in a specific way.
Here are some additional tips for making code snippets accessible:
* Use descriptive alt attributes for all images.
* Use semantic markup for all elements.
* Avoid using color as the only way to convey info…
עם Chat GPT
השאילתה
Please make this code snippet accessible: <a class="top-nav-link" href="/">
<img src="/media/###/logo_###x##.png">
</a>
תשובת Chat GPT
Unfortunately, this code snippet alone is not a complete code and cannot be executed as such.
This code snippet is a HTML code that defines a link with a logo image. The link points to the website’s root directory (’/’) and the image source is a file named “logo_###x##.png”.
Here is the code snippet in its HTML context:
<a class="top-nav-link" href="/">
<img src="/media/####/logo_###x##.png">
</a>
This can be used in a larger HTML document to display a link with a logo image.
להוסיף את המילה WCAG לשאילתה
Please make this code snippet accessible according to WCAG: <a class="top-nav-link" href="/">
<img src="/media/####/logo_###x##.png">
תשובת Chat GPT עם הוספת המילה WCAG
To make this code snippet accessible according to Web Content Accessibility Guidelines (WCAG), we need to add alt text to the img element. The alt attribute provides alternative text for the image and allows assistive technologies like screen readers to describe the image to users who cannot see it.
Here is the updated code snippet:
<a class="top-nav-link" href="/">
<img src="/media/####/logo_###x##.png" alt="Website logo">
</a>
In this updated code snippet, we have added the alt attribute to the img element and provided a brief, descriptive text that describes the logo. Now, users who cannot see the image can still understand its purpose by listening to the screen reader description.
מה ניתן ללמוד מהשאילתות ומדוגמאות הקוד הללו?
- צריך לדעת איך לשאול
- להשתמש במונח Accessible לא תמיד יביא את דוגמת הקוד הטובה ביותר
- להוסיף את המילה WCAG
- בהתייחס לדוגמה הזו, דווקא chat GPT נתן תשובה יותר ישירה בהשוואה ל Bard
- תמיד צריך לאמת את תוצאות השאילתות מול הידע הרשמי הקיים בתחום
ולפיכך, מתבקש כי על מתכנתים לדעת ללמוד לכתוב קוד נגיש, ובהכרח להסתמך על מקורות מידע רשמיים