שיפור הנגישות לדפי אינטרנט
קבוצת המסמכים הזו היא גרסה מבוססת-טקסט של חלק מהתוכן שנכלל בקורס Udacity בנושא נגישות. מדובר בטיפול תמציתי יותר של העקרונות והנהלים של הנגישות, ולא תמלול ישיר של הקורס, תוך שימוש בתוכן המקורי של הקורס כבסיס.
סיכום
- למד מהי המשמעות של נגישות וכיצד היא חלה על פיתוח אתרים.
- כאן מוסבר איך יוצרים אתרים נגישים וזמינים לכולם.
- נלמד איך לכלול נגישות בסיסית עם השפעה מינימלית על הפיתוח.
- למדו אילו תכונות HTML זמינות ואיך להשתמש בהן כדי לשפר את הנגישות.
- נלמד על שיטות נגישות מתקדמות ליצירת חוויות נגישות משופרות.
אם תבינו את נושא הנגישות, ההיקף שלה וההשפעה שלה, תוכלו להיות מפתחי אתרים טובים יותר. מטרת המדריך היא לעזור לכם להבין איך ליצור אתרים נגישים ומועילים לכולם.
לפעמים קשה לאיית את המילה "נגישות", אבל זה לא חייב להיות קשה לביצוע. במדריך הזה תלמדו איך להשיג כמה ניצחונות קלים שעוזרים לשפר את הנגישות במאמץ מינימלי, איך אפשר להשתמש במה שמובנה ב-HTML כדי ליצור ממשקים נגישים וחזקים יותר, ואיך למנף טכניקות מתקדמות ליצירת חוויות נגישות מלוטשות.
אתם גם מגלים שהרבה מהטכניקות האלה יעזרו ליצור ממשקים נעימים וקלים יותר לשימוש עבור כל המשתמשים, לא רק עבור משתמשים עם מוגבלויות.
כמובן, למפתחים רבים יש רק הבנה מעורפלת לגבי המשמעות של נגישות, כמו חוזים ממשלתיים, רשימות של משימות וקוראי מסכים, נכון? - ואפשר לראות שפע של תפיסות שגויות. לדוגמה, מפתחים רבים מרגישים שפנייה לנגישות תאלץ אותם לבחור בין יצירה של חוויה מהנה ומושכת לבין חוויה מגוונת, מכוערת אבל נגישה.
כמובן שזה לא המקרה בכלל, אז בואו נבהיר את העניין לפני שניגש לנושא אחר. מה המשמעות של נגישות, ומה אנחנו לומדים כאן?
מהי נגישות?
באופן כללי, כשאנחנו אומרים שאתר נגיש, הכוונה היא שהתוכן של האתר זמין ושכל אחד יכול להפעיל את הפונקציונליות שלו. כמפתחים, קל להניח שכל המשתמשים יכולים לראות מקלדת, עכבר או מסך מגע ולהשתמש בהם, וליצור אינטראקציה עם תוכן הדף באותו אופן.
לעומת זאת, נגישות מתייחסת לחוויה של משתמשים שעשויים להיות מחוץ לטווח הצר של המשתמש ה "טיפוסי", שעשויים לגשת לדברים או לקיים איתם אינטראקציה באופן שונה מהצפוי. באופן ספציפי, הבעיה קשורה למשתמשים שחווים מוגבלויות או מוגבלות מסוג מסוים. חשוב לזכור שהחוויה הזו יכולה להיות לא פיזית או זמנית.
לדוגמה, על אף שאנחנו נוטים למקד את הדיון שלנו על נגישות במשתמשים עם מוגבלות פיזית, כולנו יכולים להתייחס לחוויית השימוש בממשק שאינו נגיש לנו מסיבות אחרות. האם נתקלת בבעיה בשימוש באתר למחשב שולחני בטלפון נייד, או שראית את ההודעה "תוכן זה אינו זמין באזור שלך" או שלא הצלחת למצוא תפריט מוכר בטאבלט? אלה כל הבעיות של נגישות.
ככל שתלמדו יותר, תגלו שטיפול בבעיות נגישות באופן רחב יותר, באופן כללי יותר, כמעט תמיד משפרת את חוויית המשתמש לכולם. נבחן את הדוגמה הבאה:
בטופס הזה יש מספר בעיות נגישות.
- הטקסט בניגודיות נמוכה, ולמשתמשים לקויי ראייה קשה לקרוא אותו.
- תוויות בצד שמאל ושדות מימין מקשה על אנשים רבים לשייך אותם, וכמעט בלתי אפשרי למי שצריך להגדיל את התצוגה כדי להשתמש בדף;
- התווית 'זכור פרטים?' לא משויכת לתיבת הסימון, ולכן עליך להקיש או ללחוץ רק על הריבוע הקטנטן ולא רק ללחוץ על התווית. כמו כן, מי שמשתמש בקורא מסך יתקשה להבין מה השיוך.
עכשיו נשחרר את שרביט הנגישות שלנו ונראה את הטופס שבו הבעיות האלה טופלו. אנחנו הולכים להכהות את הטקסט, לשנות את העיצוב כך שהתוויות יהיו דומות לדברים שמסומנים בתווית, ונתקן את התווית כך שתהיה משויכת לתיבת הסימון, כדי שתוכלו להחליף אותה גם בלחיצה על התווית.
באיזה כלי היית רוצה להשתמש? אם אמרתם "הגרסה הנגישה", תוכלו להבין את הבסיס העיקרי של מדריך זה. לעיתים קרובות, חסימה מלאה של משתמשים ספורים פוגעת גם בפני אנשים רבים אחרים, לכן תיקון בעיית הנגישות משפר את החוויה לכולם.
הנחיות בנושא נגישות של תוכן אינטרנט
במדריך הזה נתייחס להנחיות הנגישות של תוכן באינטרנט (WCAG) 2.0, סדרת הנחיות ושיטות מומלצות שמומחי נגישות ניסחו כדי לטפל במשמעות של 'נגישות' באופן שיטתי.
הארגון של WCAG מאורגן לפי ארבעה עקרונות שנקראים לעיתים קרובות באמצעות ראשי התיבות POUR:
ניראות: האם המשתמשים יכולים לראות את התוכן? זה לא אומר שכל המשתמשים יכולים לקלוט אותו בעזרת חוש אחד, כמו ראייה.
תפעולי: האם משתמשים יכולים להשתמש ברכיבי ממשק משתמש ולנווט בתוכן? לדוגמה, מישהו שלא יכול להשתמש בעכבר או במסך מגע לא יכול להפעיל תוכן שמחייב אינטראקציה של העברת עכבר.
מובן: האם המשתמשים יכולים להבין את התוכן? האם המשתמשים יכולים להבין את הממשק, והאם הוא עקבי מספיק כדי למנוע בלבול?
חזק: האם מגוון רחב של סוכני משתמש (דפדפנים) יכולים לצרוך את התוכן? האם הוא פועל עם טכנולוגיה מסייעת?
ב-WCAG יש סקירה מקיפה לגבי המשמעות של נגישות התוכן, אבל לפעמים היא יכולה להיות קצת מאתגרת. כדי לצמצם את התופעה הזו, בקבוצה WebAIM(Web Accessibility in Mind), יצרנו את ההנחיות של WCAG לרשימת משימות קלה לביצוע, שמיועדת במיוחד לתוכן באינטרנט.
ברשימת המשימות של WebAIM תוכלו למצוא סיכום קצר ברמה גבוהה של מה שצריך להטמיע, וגם לקשר למפרט של WCAG הבסיסי אם אתם צריכים הגדרה מורחבת.
בעזרת הכלי הזה, תוכלו לשרטט את הכיוון של פעולות הנגישות שלכם ולהיות בטוחים שכל עוד הפרויקט שלכם עומד בקריטריונים המפורטים, המשתמשים שלכם ייהנו מחוויה חיובית בגישה לתוכן.
הבנת המגוון התרבותי של המשתמשים
כשלומדים על נגישות, קל להבין את המגוון הרחב של המשתמשים בעולם ואת נושאי הנגישות שמשפיעים עליהם. כדי להסביר בפירוט, הנה סשן אינפורמטיבי של שאלה/תשובה עם ויקטור טסאראן, מנהל תוכנית טכנית ב-Google, עיוור לחלוטין.
על מה אתה עובד ב-Google?
התפקיד שלי ב-Google הוא לעזור להבטיח שהמוצרים שלנו מתאימים לכל המשתמשים, ללא קשר למוגבלויות או למוגבלות.
אילו סוגים של לקויות יש למשתמשים?
כשאנחנו חושבים על הסוגים של הלקות שיקשו על אדם מסוים לגשת לתוכן שלנו, הרבה אנשים יראו מיד משתמש עיוור כמוני. ואמין, לקויות כאלה עלולות לגרום לתסכול ולבלתי אפשרי בשימוש באתרי אינטרנט רבים.
להרבה טכניקות אינטרנט מודרניות יש תופעת לוואי מצערת של יצירת אתרים שלא פועלים היטב עם הכלים שמשתמשים עיוורים משתמשים בהם כדי לגשת לאינטרנט. עם זאת, הנגישות כוללת הרבה מעבר לכך. מבחינתנו, אפשר להבין טוב יותר שהליקויי ראייה מתחלקים לארבע קטגוריות רחבות: ראייה ויזואלית, מוטורית, שמיעה וקוגניטיבית.
בואו נעבור על הדרכים האלה. יש לך אפשרות לתת דוגמאות ללקויי ראייה?
ניתן לחלק את ליקויי הראייה לכמה קטגוריות: משתמשים ללא ראייה, כמוני, עשויים להשתמש בקורא מסך, בברייל או בשילוב של השניים.
זה בעצם די יוצא דופן כשאין לכם שום יכולת ראייה, אבל עדיין יש סיכוי טוב שאתם מכירים או פגשתם לפחות אדם אחד שלא יכול לראות בכלל. עם זאת, יש גם מספר גדול יותר של משתמשים עם לקויות ראייה.
זהו טווח רחב, החל ממישהו כמו אשתי, שאין לה קרניים, כך שבזמן שהיא יכולה לראות דברים שהיא קשה מאוד לקרוא את הטקסט והיא נחשבת לעיוורת מבחינה משפטית, למישהי שיש לה רק ראייה לקויה וצריכה להרכיב משקפי מרשם חזקים מאוד.
יש מגוון רחב מאוד, ולכן באופן טבעי יש מגוון רחב של אפשרויות לינה שאנשים בקטגוריה הזו משתמשים בהן: חלקם כן משתמשים בקורא מסך או בצג ברייל (שמעתי על אישה אחת שקוראת ברייל שמוצג על המסך כי קל יותר לראות אותה מאשר טקסט מודפס), או שהם משתמשים בטכנולוגיה של המרת טקסט לדיבור (TTS) ללא הפונקציונליות של קורא המסך המלא, או שהם יכולים להשתמש בהגדלת המסך או בהגדלת המסך. יכול להיות שהם ישתמשו גם באפשרויות של ניגודיות גבוהה, כמו מצב של ניגודיות גבוהה במערכת ההפעלה, תוסף לדפדפן עם ניגודיות גבוהה או עיצוב של ניגודיות גבוהה באתר.
הרבה משתמשים אפילו משתמשים בשילוב של הפעולות האלה, למשל חברה שלי לורה שמשתמשת בשילוב של מצב ניגודיות גבוהה, מרחק מתצוגה בדפדפן והמרת טקסט לדיבור (TTS).
אנשים רבים יכולים להתחבר ללקויי ראייה. בהתחלה, כולנו חווים ירידה בראייה ככל שאנחנו מזדקנים, כך שגם אם לא חוויתם זאת, יש סיכוי טוב ששמעתם שההורים שלכם מתלוננים על כך. אבל הרבה אנשים חווים תסכול כשהם מוציאים את המחשב הנייד ליד חלון שמשי, ומגלים שהם לא מצליחים לקרוא כלום! אולי כל מי שעבר ניתוח לייזר או שפשוט צריך לקרוא משהו מהחדר אולי השתמש באחד מהמקומות האלה שהזכרתי. אז לדעתי קל למפתחים לגלות אמפתיה כלפי משתמשים לקויי ראייה.
אה, ואני צריך לזכור להזכיר אנשים עם ראיית צבעים לקויה - לכ-9% מהגברים יש ליקוי מסוים בראיית הצבעים! בנוסף לכ-1% מהנשים. ייתכן שהם יתקשו להבדיל בין אדום וירוק או צהוב וכחול. כדאי לחשוב על זה בפעם הבאה שתעצבו אימות של הטופס.
מה לגבי לקויות מוטוריות?
כן, לקויות מוטוריות או לקות מוטורית. הקבוצה הזו כוללת את כל הגורמים שמעדיפים לא להשתמש בעכבר, כי אולי הם היו צופים ב-RSI או משהו וזה מכאיב להם, לאנשים עם שיתוק פיזי וטווח תנועה מוגבל בחלקים מסוימים בגוף.
משתמשים עם לקויות מוטוריות יכולים לבצע פעולות במחשב שלהם באמצעות מקלדת, מתג, שליטה באמצעות הקול או אפילו מכשיר למעקב אחר העיניים.
בדומה ללקויי ראייה, ניידות יכולה להיות גם בעיה זמנית או מצבית: אולי יש שבר בפרק כף היד של העכבר. אולי משטח המגע מתקלקל במחשב הנייד או שאתם נוסעים ברכבת רועשת. יכולים להיות הרבה מצבים שבהם הניידות של המשתמש תיחסם. לכן, אנחנו משפרים את החוויה הכוללת עבור כל מי שיש לו לקויות קבועות וגם עבור כל מי שמגלה באופן זמני שהוא לא יכול להשתמש בממשק משתמש שמבוסס על מצביע.
נהדר, בואו נדבר על ליקויי שמיעה.
הקבוצה הזו יכולה לכלול מגוון נושאים, מחרשים עמוקים ועד כבדי שמיעה. ובדומה לראיית הראייה, השמיעה שלנו נוטה להתפוגג עם הגיל. רבים מאיתנו נעזרים בדברים נפוצים, כמו מכשירי שמיעה.
עבור משתמשים עם ליקויי שמיעה, עלינו לוודא שאנחנו לא מסתמכים על צלילים, ולכן אנחנו מקפידים להשתמש בדברים כמו כתוביות ותמלולים של סרטונים, ולספק חלופה כלשהי, אם הקול הוא חלק מהממשק.
וכמו שראינו אצל בעיות ראייה ומוגבלויות מוטוריות, קל לדמיין מצב שבו גם מי שהאוזניים שלו פועלות כראוי ירוויח מהסביבה הזו. הרבה חברים שלי אומרים שהם אוהבים את זה כשיש לסרטונים כתוביות ותמלולים, כי המשמעות היא שאם הם נמצאים במשרד פתוח ולא מביאים את האוזניות, הם עדיין יכולים לצפות בסרטון!
תוכל לספר לנו קצת על לקויות קוגניטיביות?
יש מגוון של מחלות קוגניטיביות כמו ADD, דיסלקסיה ואוטיזם, שעשויות להצביע על אנשים שרוצים או צריכים לגשת לדברים בצורה שונה. באופן טבעי אפשרויות האירוח לקבוצות האלה מגוונות מאוד, אבל בהחלט יש חפיפה עם תחומים אחרים. למשל, שימוש בפונקציונליות של שינוי מרחק התצוגה כדי להקל על הקריאה או הריכוז. בנוסף, המשתמשים האלה עשויים לגלות שעיצוב מינימליסטי באמת עובד הכי טוב, כי הוא מצמצם את הסחות הדעת ואת העומס הקוגניטיבי.
אני חושב שכל אחד יכול להזדהות עם הלחץ הקוגניטיבי של עומס יתר, אז ברור שאם ניצור משהו שעובד טוב עבור מישהו עם ליקויי קוגניטיבית, ניצור משהו שתהיה חוויה נעימה לכולם.
אז איך תסכם את דעתך על נגישות?
אם מסתכלים על המגוון הרחב של יכולות ומוגבלויות שעשויות להיות לאנשים, אפשר לראות שתכנון ובניית מוצרים רק לאנשים עם ראייה, שמיעה, מיומנות וקוגניציה מושלמים נראים מאוד צרים. זה כמעט מצב של פגיעה עצמית, כי אנחנו יוצרים חוויה מלחיצה ופחות שימושית לכולם, ועבור חלק מהמשתמשים, יוצרים חוויה שלמעשה מחריגה אותם לגמרי.
בראיון הזה, ויקטור זיהה טווח של לקויות שונות וסיווג אותן לארבע קטגוריות רחבות: ויזואליות, מוטורית, שמיעה וקוגניטיבית. הוא גם ציין שכל סוג של פגיעה יכול להיות מצבי, זמני או קבוע.
נבחן כמה דוגמאות מהעולם האמיתי של לקויות גישה, ונראה איפה הן שייכות לקטגוריות ולסוגים האלה. חשוב לזכור שמוגבלויות מסוימות עשויות להשתייך ליותר מקטגוריה אחת או סוג אחד.
| מצבי | זמני | קבוע | |
|---|---|---|---|
| ויזואלי | זעזוע מוח | עיוורון | |
| מנוע | להחזיק תינוק | יד שבורה, RSI* | RSI* |
| שמיעה | משרד רועש | ||
| קוגניטיבית | זעזוע מוח |
פציעה חוזרת על עצמה: למשל, תסמונת המנהרה הקרפלית, מרפק טניס, אצבע הדק
השלבים הבאים
כבר טיפלנו חלק מהשטח! קראת על
- מהי נגישות ולמה היא חשובה לכולם
- WCAG ורשימת משימות הנגישות של WebAIM
- סוגים שונים של לקויות שצריך לשקול
בהמשך המדריך נדון בהיבטים המעשיים של יצירת אתרי אינטרנט נגישים. נארגן את המאמץ הזה לפי שלושה תחומי נושא עיקריים:
התמקדות: נסביר איך לפתח דברים שאפשר להפעיל באמצעות מקלדת במקום עכבר. זה חשוב, כמובן, למשתמשים עם לקויות מוטוריות, אבל הוא גם מבטיח שממשק המשתמש יהיה תקין לכל המשתמשים.
סמנטיקה: אנחנו נקפיד לבטא את ממשק המשתמש שלנו בצורה חזקה שפועלת עם מגוון טכנולוגיות מסייעות.
עיצוב: נשקול עיצוב חזותי ונבחן כמה טכניקות להפיכת הרכיבים החזותיים של הממשק לגמישים ולשימושיים ככל האפשר.
כל אחד מהנושאים האלה יכול למלא קורס שלם, לכן לא נעסוק בכל היבט של יצירת אתרי אינטרנט נגישים. עם זאת, ניתן לכם מספיק מידע כדי להתחיל, ונפנה אתכם לכמה מקומות טובים שבהם תוכלו ללמוד יותר על כל נושא.