יישום תוויות סמנטיות לממשק משתמש של אפליקציה ניידת
משתמש לא מוצא את כפתור 'קנייה' כי הוא מסומן כ-ic_shopping_cart. VoiceOver קורא 'כפתור'—וזה הכל. אנו מטמיעים סמנטיקה: 'קנייה, כפתור, הוסף לעגלה'. ההבדל בין 'כפתור' ל-'קנייה, כפתור, הוסף לעגלה' הוא ההבדל בין אפליקציה לא שמישה לבין ממשק נגיש לחלוטין. בממוצע, משתמשים עם לקויות ראייה משקיעים 30% יותר זמן בביצוע פעולות באפליקציה ללא תוויות סמנטיות. במהלך עבודתנו, השלמנו יותר מ-20 פרויקטים עם ביקורות נגישות מלאות. ההבטחה שלנו: האפליקציה שלך עוברת את הבדיקה של App Store בניסיון הראשון בנוגע לסעיפים 4.2 ו-5.1.
לפי Apple Human Interface Guidelines, תוויות סמנטיות חייבות להיות תיאוריות וחד-משמעיות כדי שמשתמשים עם לקויות ראייה יוכלו לתקשר ביעילות עם האפליקציה.
מהן תוויות סמנטיות ולמה הן נחוצות?
תוויות סמנטיות הן תיאורים, תפקידים ומצבים משמעותיים עבור כל רכיב ממשק שהקורא המסך (VoiceOver, TalkBack) מכריז למשתמש. במקום 'כפתור' ברירת המחדל, המשתמש שומע 'הוסף למועדפים, כפתור, לא מופעל'. זה מאפשר ניווט ללא שליטה חזותית. היישום שלנו משפר את מהירות הניווט פי 3 בהשוואה לתוויות בסיסיות (רק תווית), כפי שהוצג בבדיקות פנימיות עם 10 משתמשי VoiceOver. בנוסף, מספר הצעדים לביצוע פעולה טיפוסית מצטמצם מ-5 ל-1 עם קיבוץ נכון.
| השוואה | תווית בסיסית | תווית סמנטית |
|---|---|---|
| דוגמה | 'כפתור' | 'הוסף למועדפים, כפתור, לא מופעל' |
| זמן ניווט (שניות) | 12 | 4 |
| צעדים לפעולת מטרה | 5 | 1 |
מאפיינים מרכזיים ב-iOS וב-Android
| מאפיין | iOS (UIKit/SwiftUI) | Android (View/Compose) |
|---|---|---|
| טקסט ראשי | accessibilityLabel / .accessibilityLabel() |
contentDescription / Modifier.semantics { contentDescription = "..." } |
| רמז | accessibilityHint / .accessibilityHint() |
hint ב-EditText (לא מומלץ) |
| תפקיד | accessibilityTraits / .accessibilityAddTraits() |
roleDescription / Modifier.semantics { role = Role.Button } |
| ערך | accessibilityValue / .accessibilityValue() |
stateDescription (API 30+) |
| הודעה | UIAccessibility.post(notification: .announcement, ...) |
View.announceForAccessibility() |
לפרטים נוספים על מאפייני iOS, ראה תיעוד UIAccessibilityElement ועל Android ראה תיעוד AccessibilityNodeInfo.
איך לשלב רכיבים מורכבים לבלוק סמנטי אחד?
קח כרטיס מוצר: תמונה, שם, מחיר וכפתור 'הוסף לעגלה'. ללא קיבוץ, VoiceOver מתמקד בכל תת-תצוגה—4 צעדים לכפתור. הפתרון שלנו: שלב לרכיב אחד עם תווית מורכבת: 'Nike Air Max $8.2k–12k' + תכונה .button + רמז 'מוסיף לעגלה'. אופציונלית, השאר את כפתור 'הוסף לעגלה' נפרד לגישה מהירה.
ב-UIKit: containerView.accessibilityElements = [productAccessibilityElement, addToCartButton]. productAccessibilityElement הוא UIAccessibilityElement מותאם אישית עם accessibilityFrame ותווית מתאימים משדות מרובים.
ב-Android: הגדר importantForAccessibility="no" על כל רכיבי הילד מלבד המיכל, והגדר contentDescription על המיכל. ב-Compose: Modifier.semantics { contentDescription = "..."; role = Role.Button }.
הגדרה שלב-אחר-שלב של תווית סמנטית לכפתור
- קבע את תפקיד הרכיב (כפתור, קישור, תמונה).
- צור תווית משמעותית: 'הוסף למועדפים' במקום 'ic_heart'.
- אם הפעולה לא ברורה, הוסף רמז: 'מוסיף את המוצר לרשימת המועדפים'.
- הגדר תכונות:
.button,.selectedאם נדרש. - למצבים דינמיים, עדכן את התווית או הערך בעת שינוי.
מה לעשות עם מצבים דינמיים?
כפתור 'מועדפים'—אייקון לב ללא טקסט. לאחר הוספה:
- iOS:
accessibilityLabel = "Удалить из избранного"אוaccessibilityTraits.insert(.selected) + label "Избранное"(VoiceOver מוסיף 'נבחר'). לאחר מכןUIAccessibility.post(notification: .announcement, argument: "Добавлено в избранное"). - Android: עדכן
contentDescriptionל-'הסר מהמועדפים' וקרא ל-announceForAccessibility("Добавлено в избранное").
מתגים (UISwitch, Toggle ב-SwiftUI, Switch ב-Compose)—המצב מוכרז אוטומטית: 'הודעות, פועל'. למתגים מותאמים אישית, הגדר accessibilityValue = isOn ? "включено" : "выключено".
למה קבוצות כותרות חשובות?
מסך עם מספר קטעים: accessibilityTraits = .header על הכותרת—משתמשי VoiceOver יכולים לנווט בין כותרות על ידי החלקה עם 'כותרות' שנבחר ברוטור הנגישות. ללא זה, הם לא יכולים לקפוץ במהירות לקטע הרצוי. ב-Compose: Modifier.semantics { heading() } על כותרת Text.
טעויות נפוצות
- כפתורי אייקון עם
contentDescription = "ic_heart"(שם קובץ) במקום 'הוסף למועדפים'. Android Studio מזהיר, אבל לעתים קרובות זה נשאר ללא שינוי. - Placeholder ב-
TextFieldכתווית: רמז 'הזן אימייל' ב-AndroidEditText—TalkBack קורא את הרמז כ-contentDescription רק אם לא הוגדר אחד. בפוקוס, הרמז נעלם. יש צורך ב-contentDescription מפורש אוTextInputLayoutעם רמז צף. - כפתורים עם תגיות מספריות: קורא המסך קורא '3, כפתור' ללא הקשר. נכון:
accessibilityLabel = "Уведомления, 3 непрочитанных".
דוגמה לביקורת תוויות סמנטיות
לאחר היישום, אנו בודקים על 5 מכשירים אמיתיים עם VoiceOver ו-TalkBack, ובודקים כל מסך. אנו מוצאים עד 15 שגיאות בפרויקט טיפוסי, מתוכן 80% הן תוויות אייקון לא אינפורמטיביות. תיקון שגיאה אחת לוקח בממוצע 20 דקות. תוצאה: הזמן להשלמת תרחישים מרכזיים מצטמצם ב-40%.
מה כלול בעבודה
- ביקורת תוויות סמנטיות נוכחיות (VoiceOver/TalkBack).
- הגדרת accessibilityLabel, רמז, תכונות, ערך לכל הרכיבים האינטראקטיביים והאינפורמטיביים.
- קיבוץ בלוקים מורכבים (כרטיסים, רשימות).
- טיפול במצבים דינמיים (מועדפים, מתגים).
- בדיקה על מכשירים אמיתיים.
- תיעוד ליישום.
לוח זמנים: בין 2 ל-5 ימים תלוי במספר הרכיבים. אנו נעריך את הפרויקט שלך באופן אישי—צור קשר לייעוץ. הזמן ביקורת נגישות היום—זה חוסך תקציב מעבודה חוזרת לאחר דחייה. קבל ביקורת של התוויות הסמנטיות של האפליקציה שלך—שלח בקשה.
דוגמת קוד ל-iOS (Swift)
let productElement = UIAccessibilityElement(accessibilityContainer: container)
productElement.accessibilityLabel = "Nike Air Max $8.2k–12k"
productElement.accessibilityTraits = .button
productElement.accessibilityHint = "Добавляет в корзину"
productElement.accessibilityFrame = container.convert(container.bounds, to: UIScreen.main.coordinateSpace)
container.accessibilityElements = [productElement, addToCartButton]דוגמת קוד ל-Android (Compose)
Modifier.semantics { contentDescription = "Nike Air Max $8.2k–12k" role = Role.Button } ניסיון נרחב בפיתוח נייד, מעל 20 פרויקטים מוצלחים עם נגישות.