תכנון של יישומי אינטרנט נגישים הוא מרכיב מרכזי במתן חווית משתמש חיובית ושביעות רצון כוללת של המשתמשים באפליקציה. אפליקציית אינטרנט נגישה מבטיחה גישה שווה לאנשים עם יכולות שונות ולאנשים במיקומים גיאוגרפיים שונים. כדאי לאפשר לאנשים עם מגבלות שקשורות לשמיעת, לקוגניטיבית, לדיבור או ליכולות החזותיות, עם מגבלות זמניות שקשורות למוגבלויות לטווח קצר, לחיבור איטי לאינטרנט או אפילו לאור שמש בוהק. כשמפתחים את החזית של אפליקציית האינטרנט, כדאי להשתמש בפתרונות נגישות כבר מההתחלה כדי למנוע בעיות נגישות ואת הצורך לבצע מחדש פעולות כלשהן בשלב מאוחר יותר במהלך ה-build. חשוב לוודא שסורקי אינטרנט וקוראי מסך יוכלו לעבור את התוכן של האפליקציה שלכם, ובמקביל לספק למשתמשים חוויית משתמש חיובית.
נגישות היא חובה משפטית במדינות ובתחומים רבים. עליכם להבין את ההנחיות האלה ולשלב פתרונות נגישות בעיצוב שלכם. במקרים עסקיים שונים מדגישים את חשיבות הנגישות גם לתוכן באינטרנט.
במשאבים כמו MDN ו-WCAG מספקים הנחיות חיוניות והצעות לשיפור הנגישות של אפליקציית האינטרנט שלכם. אפשר גם להשתתף בקורס למידה על נגישות באתר web.dev.
התלות ההדדית בין רכיבים שונים היא היבט חיוני בהפיכת אפליקציית אינטרנט לנגישה למשתמשים מגוונים.
צבע וניגודיות
שימוש בצבע הוא הגורם העיקרי להערכת הנגישות של אפליקציות אינטרנט. משתמשי הקצה צריכים להיות מסוגלים להבין את התוכן בדף, וצבע וניגודיות משפיעים באופן משמעותי על תפיסת התוכן של המשתמשים. תנאים ומוגבלויות שקשורים לראייה יכולים להיות זמניים, תלויי-מצב או קבועים, אבל צריך להביא אותם בחשבון כשיוצרים את החזית של אפליקציית האינטרנט. יצירת הניגודיות או ההבדל בבהירות בין הצבעים שבהם משתמשים בממשק שגלוי למשתמש יכולה להפוך את אפליקציית האינטרנט שלכם לנגישה יותר למשתמשים מגוונים. יחס הניגודיות מספק את ההבדל הבהירות בין הרקע לטקסט.
כדי למדוד את הניגודיות אפשר להשתמש בנוסחה של יחס ניגודיות כדי לוודא שקיים ניגודיות מינימלית לטקסט או לסמלים ברקע. יש סוגים רבים של מוגבלויות בתפיסת צבעים, אבל מודלים חדשים של צבע יכולים להבטיח שהתוכן ייקלט בצורה נכונה גם אם הוא יוצג בגווני אפור.
עיצוב כהה מומלץ בדרך כלל לתמיכה בצבע ובניגודיות כדי להקל על הנגישות. עיצובים כהים מועדפים בדרך כלל לקלט חזותי בגלל קשיים בקריאה ובתאורה לבנה. אפליקציות שמבוססות על תוכן כוללות כמות גדולה של טקסטים ותמונות, ולכן חשוב מאוד להשתמש בצורה נכונה בצבע וביחס הניגודיות כדי לתת מענה לצרכים המגוונים של המשתמשים.
מידע נוסף על צבעים וניגודיות ב-web.dev
טיפוגרפיה
הטיפוגרפיה מתייחסת לבחירה ולסידור של הטקסט כך שיהיה קריא וקריא למשתמשים מגוונים. אחת מהגדרות הנגישות שהשתנו ביותר היא גודל ברירת המחדל של הגופן במכשירים. יכול להיות שמשתמשים מסוימים ירצו להתאים יותר טקסט למסך בגופן קטן יותר או שהטקסט יהיה גדול ככל האפשר. לכן חשוב מאוד שגודל הטיפוגרפיה יהיה גמיש וקריא. בנוסף, הדמויות בטקסט צריכות להיות מובחנות לקורא, והטקסט הכולל צריך להיות קריא לקריאה. במהלך התכנון של ממשק הקצה של האפליקציה, הקפידו לבחור גופנים קריאים וקריאים.
גופן
הגופן או משפחת הגופנים שאתם בוחרים לאפליקציית האינטרנט צריכים להיות נגישים באופן חזותי למגוון רחב של קוראים. הגופן הוא העיצוב החזותי של האותיות בטקסט של האפליקציה. מחקרים רבים מתארים את החשיבות של גופנים כשאנחנו בודקים את הנגישות של תוכן באינטרנט. כשמוצאים את האיזון הנכון בין המותג, יעדי העיצוב של ממשק המשתמש וקלות הקריאה, האפליקציה מהנה יותר למגוון רחב יותר של משתמשים. כשאתם מפתחים את החזית, כדאי לחשוב איך אפשרויות הגופן ואפשרויות הגופנים שבהן הן פועלות תורמים לנגישות ולעיצוב הכללי של האפליקציה.
גודל הגופן
כדאי לאפשר את האפשרות לשינוי מרחק התצוגה בדפדפן, כדי לעזור למשתמשים עם ליקויי ראייה או עיוורון צבעים. גופן הטקסט באפליקציית האינטרנט
חייב להיות גלוי לקוראים מגוונים. אפשר לראות שינויים בגודל הגופן על ידי מעבר מ-px ל-rem. יחידות Rem מאפשרות גודל גופן יחסי לרכיב השורש של אפליקציית Wep. זוהי אפשרות רב-תכליתית שתגדיל את הנגישות הכוללת של יישום האינטרנט שלכם.
מבנה ופריסה
מגוון מאפיינים מבניים ומאפייני פריסה משפיעים על הנגישות של הממשק. תכונות הפריסה שכדאי להשתמש בהן כוללות ריווח ויישור בין גושי טקסט וכן את הרווח בין שורות הטקסט ואפילו אותיות בודדות. שימוש במשבצות והצגה חזותית של הרכיבים שרוצים לכלול בעיצוב. הפריסה והמבנה של התוכן צריכים להיות מרתקים ומהנים למשתמשים. למשתמשים מסוימים יכול להיות קשה להשתמש בפריסות מורכבות או ברקעים עמוסים עם בלוקים מרובים של טקסט, כמו משתמשים עם ADHD. חשוב לתת עדיפות להכללה בתהליך העיצוב של ממשק הקצה.
ARIA ו-HTML
אפליקציות אינטרנט עשירות ונגישות (ARIA) כוללות הנחיות ומאפיינים שנועדו לשפר את הנגישות של אפליקציות אינטרנט עבור המשתמשים. ARIA משלימה את ה-HTML ומאפשרות גישה לווידג'טים של JavaScript, עדכוני תוכן בזמן אמת והודעות שגיאה. שימוש נכון ב-ARIA הוא חיוני כדי להפוך את אפליקציית האינטרנט שלכם לנגישה יותר. שימוש שגוי ב-ARIA עלול להוביל לשגיאות ולגרום לירידה בנגישות של האפליקציה למשתמשים.
כדאי להשתמש בתוויות ARIA כשאפשר כדי להוסיף פורמטים חלופיים שתואמים לברייל ולהמרת טקסט לדיבור (TTS). תוויות ותפקידים של ARIA מאפשרים לשנות את עץ הנגישות כשהוא שונה מעץ dom. התוויות האלה חשובות גם כשמשתמשים בתגים לא רגילים, כמו div, שמשמשים כלחצן לחיץ. יש צורך ב-ARIA כשלרכיב HTML אין תמיכה בנגישות. כשאתם מתכננים את האפליקציה מבוססת התוכן, חשוב לוודא שיש תמיכה מלאה בקוראי מסך ובאמצעי סיוע אחרים כדי שהאפליקציה תוכל להגיע לכמה שיותר משתמשים.
מידע נוסף על ARIA ו-HTML באתר web.dev
אינטרנציונליזציה
תרגום של אפליקציה הוא תכנון של אפליקציית אינטרנט שתהיה נגישה למשתמשים מרקעים לשוניים ותרבותיים שונים. אפליקציית האינטרנט שלכם אמורה להתאים את עצמה לשפות, לאזורים גיאוגרפיים ולהעדפות תרבותיות שונות בלי לבצע שינויים מהותיים בקוד. המרכיבים העיקריים של הבינלאומי: תמיכה בכמה שפות, התאמה לשוק המקומי, הפרדת תוכן, עיצוב תאריך ושעה, כיוון טקסט ומשא ומתן לגבי שפה.
באמצעות הפיכת אפליקציית האינטרנט שלכם לבינלאומית, תוכלו ליצור חוויה כוללת וידידותית למשתמש עבור קהל גלובלי רחב. לוקליזציה היא חיונית לכל אפליקציית אינטרנט עם בסיס משתמשים מגוון או מטרה עסקית מסוג התרחבות בינלאומית.
תכונות לוגיות
כשיוצרים סגנונות ב-CSS, חשוב להשתמש ב-start / end במקום במאפיינים כמו top / down/ left/ right. כך אפשר להבטיח שהתפריטים ופריסות האתר ישתנו בהתאם לשפות הנכתבות מימין לשמאל.
תוכן חלופי
כדי לספק תגי עיצוב מותאמים אישית לתוכן שלכם, צריך לכלול את המאפיין lang בתג ה-HTML עם קישורים למסמכים חלופיים בכותרת. כך הדפדפן יכול לבחור את הדף הנכון
אם השפה המוגדרת שונה משפת ברירת המחדל של הדפדפן. הוא יכול לעזור לדפדפני אינטרנט ולמנועי חיפוש להבין את השפה של הדף, שהיא חשובה לעיבוד התוכן בצורה נכונה ולאופטימיזציה יעילה למנועי חיפוש.
בינלאומי
האובייקט Intl ב-JavaScript הוא כלי חשוב ליצירת אפליקציות אינטרנט בעלות מודעות במספר שפות ובתרבויות שונות. הוא מספק יכולות של התאמה לשוק המקומי והבינלאומי באפליקציות אינטרנט, ומבטיח שהממשק והתוכן שלכם מובנים ומתאימים מבחינה תרבותית למשתמשים ברחבי העולם. התכונות שהאובייקט Intl מספק כוללות: עיצוב תאריך ושעה, עיצוב מספרים ואוסף מחרוזות.
מידע נוסף על אינטרנציונליות ב-web.dev
טפסים
טופסי HTML הם חלק קריטי מיישומי אינטרנט מבוססי-תוכן. הם מאפשרים אינטראקציה עם המשתמשים ומספקים שיטה מובנית לאיסוף מידע על משתמשים. אם טופסי HTML לא נגישים לקהל רחב, זה עלול לגרום לתסכול ולאי שביעות רצון בקרב המשתמשים.
כדי להפוך טופסי HTML לנגישים, השתמשו ברכיבי HTML סמנטיים בכל שדות הטופס. כך טכנולוגיות מסייעות יוכלו להבין את המטרה של כל שדה ולעזור למשתמשים למלא אותו בקלות. בנוסף, חשוב לסמן את כל שדות הטופס בצורה ברורה. כך המשתמשים יכולים לספק מידע מדויק ושימושי. חשוב גם לבדוק את הנגישות של טופסי ה-HTML. ניתן לעשות זאת באמצעות טכנולוגיות מסייעות כדי לדמות את חוויית המשתמש שדורשת מטכנולוגיות כאלה לצרוך את תוכן האפליקציה.