מבוא לסמנטיקה

מבוא לסמנטיקה וטכנולוגיה מסייעת

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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

בשיעור הזה נסתמך על העבודה ונאפשר לך לחשוב על גורמי נגישות אחרים, כמו בניית אתרים כדי לתמוך במשתמשים כמו Victor Tsaran, שלא יכולים לראות את המסך.

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

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

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

טכנולוגיה מסייעת

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

דוגמאות לטכנולוגיה מסייעת, כולל זכוכית מגדלת קבית ותותב רובוטי.

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

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

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

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

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

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

סכומים

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

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

קנקן תה עם ידית וצינור.

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

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

לדוגמה, אפשר לשנות את ניסוח השימוש ברכיבי צורה נפוצים (סכומים) באופן הבא:

  • לחצני בחירה — "אני יכול לבחור באחת מהאפשרויות האלה".
  • תיבת סימון — "אני יכול לבחור 'כן' או 'לא' לאפשרות זו".
  • שדה טקסט — "אני יכול להקליד משהו באזור הזה".
  • תפריט נפתח – "אני יכול לפתוח את הרכיב הזה כדי להציג את האפשרויות שלי".

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

החשיפה הלא-ויזואלית של השימוש של רווח בר-קיימא נקראת הסמנטיקה שלו.

קוראי מסך

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

ביקשנו מויקטור טסאראן להסביר איך הוא נכנס לאינטרנט כאדם עיוור באמצעות קורא מסך מובנה ב-OS X, שנקרא VoiceOver. צפו בסרטון הזה של Victor על ידי שימוש ב-VoiceOver.

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

דף הדגמה של ChromeVox Lite

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

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

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

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

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

קורא מסך משתמש ב-DOM כדי ליצור צמתים נגישים.