עולם הנגישות - קורא מסך | אלון פרידמן ויסברד

רקע: מה זה קורא מסך?

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

תוכנת NVDA

תוכנת קורא המסך NVDA פותחה ב- 2006 על ידי שני מפתחים עיוורים מאוסטרליה שרצו לשפר את נגישות המחשבים לאנשים עיוורים או לקויי ראייה על ידי פיתוח קורא מסך לא מסחרי הניתן להורדה בחינם (לקריאה נוספת אודות NVDA). לפני כן לאנשים רבים לא הייתה גישה למחשב כי קורא מסך מסחרי כגון JAWS היה דבר יקר ביותר.

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

אני ממליץ עליה ככלי לבדיקות הן בשל הפופולריות שלה והזמינות שלה (כאמור, חינמית), אך גם בשל העובדה שהיא "מחמירה" יותר מקוראי מסך אחרים. היא פחות מנסה "לנחש", וכאשר משהו אינו מוגדר באופן תקין, סביר שהבעיה תיחשף ב NVDA יותר מאשר בקוראים אחרים.

התקנת התוכנה

לינק להורדה:

https://www.nvaccess.org/download/

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

הגדרות ראשוניות

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

 

הגדרת מקש NVDA:
מקש NVDA הוא המקש שמשמש בכל מיני קיצורי מקלדת של התוכנה. כברירת מחדל זהו מקש Ins אבל ניתן להגדיר שהוא יהיה CapsLock.

הגדרת Speech Viewer:
אמנם זו חוויה מאוד מעניינת ונוחה לשמוע את קורא המסך מקריא בעזרת מנוע הדיבור שלו. אבל בשביל לקלוט במדויק מה נאמר, ובמיוחד בשביל לתעד, נוח להפעיל את אפשרות הצגת המלל על המסך. זאת נעשה באופן הבא: נפתח את תפריט NVDA, נבחר ב Tools, ונפעיל את Speech Viewer. על מנת שלא נצטרך בכל הפעלה לפתוח אותו מחדש, נסמן את תיבת הסימון של  "Show Speech Viewer on Startup" וכך הוא פשוט יופעל עם התוכנה. 

כיבוי מעקב אחרי העכבר: על מנת שנוכל להעתיק את הפלט של ה Speech Viewer, אנחנו נצטרך קודם לבטל את המעקב של NVDA אחרי תנועות העכבר, אחרת תוך כדי שננסה לסמן את הטקסט עם העכבר, קורא המסך יקריא את אותו הטקסט, וישנה את הטקסט המוצג בחלון ה Speech Viewer. נעשה זאת באופן הבא: נלך ל Preferences -> Settings -> Mouse ושם נבטל את הסימון של "Enable mouse tracking".

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

נקודה אחרונה לציון: יש אפשרות להפעלת סימון של הפוקוס. זה נמצא תחת

 "Settings -> Vision -> "Enable Highlighting.

תפעול בסיסי

נסתכל על כמה מקיצורי המקלדת השימושיים ביותר:

 

הפעלה: Ctrl+Alt+N

כיבוי: CAPS+Q

 

קריאת האלמנט הבא: חץ מלטה

קריאת האלמנט הקודם: חץ למעלה

 

דילוג לכותרת הבאה: H

דילוג לכותרת הקודמת Shift+H (בכל קיצור Shift זה אומר "בכיוון ההפוך", לא אציין זאת לכל אחד בנפרד).

דילוג לכותרת h1 הבאה - מקש 1 (ובאופן כללי 1-6 עבור h1-h6).

 

דילוג לתמונה הבא: G

דילוג לאזור הבא: D

דילוג לטבלה הבאה: T

דילוג לכפתור הבא: B

דילוג לקישור הבא: K

דילוג לרשימה הבאה: L

דילוג לפריט הרשימה הבא: I

בדיקות עם קורא מסך

בדיקות הקשורות למקלדת:

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

בדיקת התוכן עם קורא מסך:

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

שם (name / accessible name) הוא הטקסט של האלמנט במקרה של טקסט, הוא הטקסט החלופי במקרה של תמונה, ובכל מקרה הוא ערך ייחודי המתאר את אותו אלמנט ספציפי.

תפקיד (role) הוא סוג האלמנט, לדוגמה: כפתור, תמונה, קישור, כותרת רמה 2, רשימה.

מצב (state) רלבנטי למשל עבור כפתור מסוג checkbox אז יכול להיות checked או unchecked.

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

מקרים שצריך לשים לב אליהם:

  • שכותרות מוגדרות באופן נכון - h1 על הכותרת הראשית של העמוד, h2 לכותרות משנה, וכן הלאה.
  • שרשימות מסומנות כ ul או ol.
  • שטבלאות מסומנות כ table ושתאי הכותרת שלהן מוגדרות ככאלה - th.
  1. טיפול בתוכן מוסתר. אם לא מפתחים במחשבה על נגישות, לעתים תוכן מוסתר ויזואלית, אך עדיין זמין לקורא מסך. למשל תוכן אשר מוקם "מחוץ למסך" או "מתחת" לאובייקט אחר עלולים לצוץ כאשר עוברים עם קורא המסך שורה שורה.

 

מטריצת בדיקות עם קוראי מסך שונים

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

 

Mobile / Desktop

OS

Screen Reader

Browser

Desktop

Windows

NVDA

Chrome / Firefox

Mobile

iOS

VoiceOver

Safari

Desktop

Windows

JAWS

Chrome / IE

Mobile

Android

TalkBack

Chrome

Desktop

Mac

VoiceOver

Safari

 

קישורים שימושיים

אוסף קיצורי מקלדת של NVDA:

https://dequeuniversity.com/assets/pdf/screenreaders/nvda-guide.pdf

סרטון הדרכה קצר של רוב דודסון מגוגל:

https://www.youtube.com/watch?v=Jao3s_CwdRU&list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&index=10&t=0s

סיכום

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