שיפור הנגישות של אפליקציות

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

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

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

הגדלת החשיפה של הטקסט

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

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

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

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

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

שימוש בפקדים גדולים ופשוטים

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

ב-Jetpack Compose, הרבה רכיבי Material מובנים כמו Button,‏ IconButton ו-ListItem כבר אוכפים את הגודל המינימלי הזה. עם זאת, כשיוצרים רכיבים אינטראקטיביים בהתאמה אישית, צריך להגדיר את הגודל בעצמכם.

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

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}

מידע נוסף על הגדלים המינימליים של יעדי מגע

תיאור של כל רכיב בממשק המשתמש

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

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}

שימו לב שאין צורך לספק contentDescription לרכיבי Text הניתנים לשילוב. שירותי הנגישות של Android (כמו TalkBack) מקריאים אוטומטית את הטקסט עצמו.

כשמוסיפים תיאורים לרכיבים בממשק המשתמש של האפליקציה, חשוב לזכור את השיטות המומלצות הבאות:

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

  • הימנעו מכפילויות בתיאורים. לדוגמה, אם לחיצה על כפתור גורמת לפעולת "שליחה" באפליקציה, תיאור הכפתור צריך להיות "Submit" ולא "Submit button".

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

  • משתמשים ב-API של hideFromAccessibility כדי לסמן רכיבים שהם רק דקורטיביים, כדי ששירותי הנגישות יוכלו להתעלם מהם. אם לרכיב בממשק המשתמש יש פרמטר contentDescription אבל הוא רק קישוט (כמו Icon שהוא חלק מרכיב אחר בממשק המשתמש), צריך להעביר את null כדי למנוע תיוג מיותר. לתרחישים מורכבים יותר, ראו מיזוג וניקוי.

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

מקורות מידע נוספים

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

Codelabs

סרטונים

צפייה בתוכן