Ultimate magazine theme for WordPress.

تنفيذ VoiceOver باستخدام Custom Rotor – وكالة تطوير المنتجات الرقمية

5
الصورة الرمزية

في الجزء الأول من سلسلتنا ، تعرفنا على دوار iOS VoiceOver. بعد ذلك ، سنلقي نظرة على كيفية تنفيذ دوار مخصص لـ VoiceOver الخاص بنا.

ابدء

إذا كنت تبحث عن إضافة إمكانية الوصول إلى تطبيق موجود ، فإن أفضل طريقة للبدء هي إجراء تدقيق على التطبيق الحالي. هناك العديد من الأدوات المتاحة للمساعدة في هذه العملية ولكن لأغراض منشور المدونة هذا ، سنميل إلى اتباع نهج يدوي أساسي.

يمكنك التعرف على مدى سهولة الوصول إلى تطبيقك من خلال تمكين VoiceOver على جهازك وتشغيل تطبيقك كمستخدم. بينما يمكنك ارتداء عصابة على عينيك أو إغلاق عينيك ، فربما تريد استخدام ستارة الشاشة ميزة بدلا من ذلك. عند التشغيل ، يتم تعتيم الشاشة. بمجرد تشغيل VoiceOver ، فإن أسهل طريقة لتبديل ستارة الشاشة هي استخدام إيماءة النقر الثلاثي بثلاثة أصابع.

لاحظ كيف يتفاعل التطبيق مع خيارات التنقل المختلفة في الدوار ، وما يقوله عند التركيز على الصور ، والروابط ، والأزرار ، وما إلى ذلك. انتبه بشكل خاص لكيفية الإعلان عن تغييرات واجهة المستخدم وما إذا كان يتم الإعلان عنها: عند ظهور إشعار أو مهمة طويلة الأمد يكتمل هل يتم توصيل هذا عبر VoiceOver؟

باستخدام VoiceOver ، يجب أن تكون قادرًا على الوصول إلى جميع العناصر الوظيفية على الشاشة ، ويجب أن يكون ترتيب التركيز تسلسليًا. راقب ترتيب التركيز هذا: قد تصبح بعض عناصر واجهة المستخدم مركزة خارج نطاق الترتيب عند استخدام إمكانية الوصول خارج الصندوق ، وقد تقوم عن غير قصد بإنشاء “فخ تركيز” ، حيث يتعطل الترحيل التالي / السابق في جزء صغير من واجهة المستخدم. من السهل إصلاح هذه المشكلات بشكل عام ، وهي مكسب كبير للمستخدمين!

يعد استخدام تطبيقات Apple كاختبار طريقة رائعة للتعرف على بعض المعايير وكيفية تدفق VoiceOver قبل اختبار التطبيق الخاص بك.

الأساسيات

لبدء تنفيذ إمكانية الوصول إلى VoiceOver ، فإن أفضل مكان للبدء هو إلقاء نظرة على سهولة الوصول توثيق. ستجد هنا جميع الإعدادات المتاحة لمكونات واجهة المستخدم الخاصة بك. يوجد الكثير من الخيارات هناك ولكن بعض الخيارات الأكثر استخدامًا موضحة أدناه:

  • accessibilityLabel – يتم نطق النص للمستخدم عند التركيز على العنصر.
  • إمكانية الوصول تلميح – وصف لما يفعله العنصر. يمكن تمكين / تعطيل تلميحات من قبل المستخدم في الإعدادات.
  • isAccessibilityElement – تحديد ما إذا كان عنصر واجهة المستخدم هذا قابلاً للتركيز أم لا.
  • accessibilityTraits – تُستخدم لوصف استخدام عناصر واجهة المستخدم أو سلوكها أو حالتها ، على سبيل المثال ، محدد ، صورة ، رأس ، إلخ.
  • accessibilityValue – قيمة عنصر ، على سبيل المثال ، التقدم على شريط التمرير أو حالة التبديل.

التنفيذ

قبعة رعاة البقر مع الوصف والتصنيف والزردعونا نعمل من خلال مثال يبدأ بتطبيق تصنيف بسيط. تُظهر لقطة الشاشة أعلاه تطبيقًا من صفحة واحدة مع عنوان وصورة ووصف وتصنيف وزر إرسال. الفكرة هنا هي أن المستخدم قادر على تقييم العنصر الموضح في الصورة. من خارج الصندوق ، يركز VoiceOver على الملصقات والأزرار التي تُقرأ بصوت عالٍ وتوفر بعض السياق للمستخدم ، ولكن ليس كل شيء يمكن التركيز عليه. كما ترى ، يتم تخطي كل من الصورة والتحكم في التصنيف تمامًا.

العناوين

توفر واجهة برمجة تطبيقات إمكانية الوصول سمات يمكن استخدامها في عناصر واجهة المستخدم المختلفة. هذه تتيح للمستخدم معرفة تفاصيل إضافية مثل الاستخدام أو السلوك أو الحالة. يمكن أن يكون لعنصر واجهة المستخدم سمات متعددة مرتبطة به. على سبيل المثال ، لنفترض أن لديك ملف UISegmentedControl مع خيارات متعددة. نظرًا لأنه زر ، يجب أن يحتوي على سمة الزر. يجب أن يحتوي العنصر المحدد أيضًا على السمة المحددة. نتيجة لذلك ، عندما يركز المستخدم على العنصر المحدد ، سيعلنه VoiceOver على أنه “زر” و “محدد”.

يستخدم الدوار أيضًا بعض سمات إمكانية الوصول هذه لتحديد عناصر مختلفة على الشاشة. إذا لم تكن معتادًا على الدوار وكيفية استخدامه ، فإن التعرف على الدوار الخاص بـ iOS VoiceOver يوفر نظرة عامة سريعة. باستخدام هذا التطبيق النموذجي ، إذا كنت تستخدم الدوار لتحديد “العناوين” ثم حرك إصبع واحد لأعلى ولأسفل ، فإن VoiceOver يستجيب بـ “لم يتم العثور على العنوان”. على الرغم من أن عنوان “Authentic Cowboy Hat” يُقصد به أن يكون العنوان لهذه الشاشة ، إلا أنه لم يتم التعرف عليه كواحد ، لأنه لم يتم تعيين سمة الرأس. لإصلاح ذلك ، يمكنك إضافة سمة إمكانية الوصول إلى العنوان على هذا التصنيف:

titleLabel.accessibilityTraits = [.header]

يؤدي هذا إلى وضع علامة على الملصق كرأس ، والذي يسمح بدوره للدوار بالانتقال إليه عند استخدام إعداد التنقل بين العناوين. يؤدي هذا الإعداد أيضًا إلى أن يعلن VoiceOver “العنوان” بعد محتوى التسمية.

الصور

في هذا التطبيق نريد أن يعرف المستخدم ما هو تصنيفهم. نظرًا لأن الصورة ليست مزخرفة تمامًا ، يجب أن يكون VoiceOver قادرًا على التركيز عليها وتقديم وصف. إذا قمت ببساطة بتمكين VoiceOver على الصورة ، فستبذل iOS قصارى جهدها لوصف الصورة للمستخدم. يمكنك جعل الصورة قابلة للوصول عن طريق إضافة:

productImageView.isAccessibilityElement = true

الآن إذا قمنا بتشغيل التطبيق مرة أخرى وطلبنا منه قراءة الصفحة من الأعلى ، فإن الصورة تثبت أنها قابلة للتركيز! تلميح: جرب التمرير سريعًا بإصبعين لأعلى أثناء تنشيط VoiceOver ، والذي ينشط “القراءة من الأعلى”.

https://www.youtube.com/watch؟v=7ec6Empz8e8

لاحظ أنه عندما يركز VoiceOver على الصورة ، فإنه يقول “صورة ، قبعة رعاة البقر”. “الصورة” المنطوقة مأخوذة من accessibilityTrait ل UIImageView، و “قبعة رعاة البقر” هو النظام الذي يحاول وصف محتويات الصورة للمستخدم. في هذه الحالة ، تكون الصورة واضحة جدًا ، لذا فهي تقوم بعمل جيد لمعرفة ماهيتها. لترك تقييم ذي مغزى ، يحتاج المستخدم إلى مزيد من التفاصيل حول نمط قبعة رعاة البقر. يمكن تغيير النص المنطوق عن طريق إضافة ملف accessibilityLabel على الصورة:

productImageView.accessibilityLabel = "Dark brown leather hat with embellishments"

https://www.youtube.com/watch؟v=FGOxq5Zl-SE

الآن أصبح لدى المستخدم فهم أفضل لما هو موجود في UIImageView!

دوار مخصص

أخيرًا وليس آخرًا ، لا يمكن لمستخدم VoiceOver التفاعل مع عنصر التحكم في تصنيف النجوم على الشاشة. هذا لأنه ملف UIStackView بمجموعة من خمسة UIImageViewس. لجعل الوصول إليه أقل ، يستخدم التطبيق ملف UITapGestureRecognizer للتعامل مع تفاعل المستخدم مع المكدس. بشكل افتراضي، UITapGestureRecognizerلا يمكن الوصول إليها ولا تعمل عند تشغيل VoiceOver. في حين أن هناك بعض الحالات التي يمكن فيها استخدام أدوات التعرف على الإيماءات مع VoiceOver ، فإن هذا التطبيق المحدد سيستفيد من دوار مخصص.

UIStackViews غير قابلة للتركيز افتراضيًا ، لذا فلنبدأ بجعلها قابلة للوصول:

ratingStackView.isAccessibilityElement = true


أصبح العنصر الآن قابلاً للتحديد ، لكن VoiceOver لا يقول أي شيء. يحتاج إلى accessibilityLabel الذي يصف الوضع الحالي. على افتراض أن currentRating متغير يحتوي على قيمة النجمة الحالية ، يمكننا تضمين ذلك في التسمية:

// The rating goes from 0 to 4 but the user should hear 1 to 5
ratingStackView.accessibilityLabel = "Rating: (currentRating + 1) out of 5"

في هذه المرحلة ، لا يمكن للمستخدم التفاعل مع عنصر التحكم في التصنيف إلى جانب التركيز عليه وسماع الحالة الحالية. هذا هو المكان الذي يمكننا فيه إضافة دوار مخصص يسمح للمستخدم بالتحرك سريعًا لأعلى ولأسفل لتغيير تقييمه للعنصر.

// The name of the rotor is the title in the rotor item selection and what the user hears
let ratingRotor = UIAccessibilityCustomRotor(name: "Rating Value") { [weak self] predicate -> UIAccessibilityCustomRotorItemResult? in
    guard let self = self else { return nil }

    // When the user flicks up we want to increase the rating and down is used to decrease while keeping it within bounds
    let isFlickUp = predicate.searchDirection == UIAccessibilityCustomRotor.Direction.previous
    let delta = isFlickUp ? +1 : -1
    rating = min(max(0, rating + delta), 4)

    // Handles the UI updates to fill in the stars
    self.setRating(value: rating)

    // Notifies the system that the layout for the rating stack view changed
    UIAccessibility.post(notification: .layoutChanged, argument: self.ratingStackView)

    return UIAccessibilityCustomRotorItemResult(targetElement: self.ratingStackView , targetRange: nil)
}

يقوم الكود أعلاه بإنشاء دوار مخصص يقوم بتحديث التصنيف لأعلى أو لأسفل بمقدار نجمة واحدة مع كل إيماءة لأعلى أو لأسفل على التوالي. الخطوة الأخيرة هي إضافة هذا الدوار إلى العنصر الذي نريده أن يعمل عليه:

ratingStackView.accessibilityCustomRotors = [ratingRotor]

في هذه المرحلة ratingStackView يحتوي على دوار مخصص يسمى “قيمة التصنيف”. عندما يركز المستخدم على ratingStackView، يقول VoiceOver تلقائيًا ، “استخدم الدوار للوصول إلى قيمة التصنيف.” يتيح هذا التلميح للمستخدم معرفة أن هناك خيار قيمة التصنيف متاح في الدوار.

تصنيف الدوار على الصورة ووصف قبعة رعاة البقرالتطبيق الآن لديه دوار مخصص! توفر الدوارات المخصصة إمكانيات لا حصر لها عند جعل تطبيقك أكثر سهولة لمستخدمي VoiceOver. يمكن جعل جميع عناصر التحكم المخصصة الرائعة في متناول الجميع بسهولة.

استنتاج

عند التنقل عبر التطبيق باستخدام VoiceOver ، يمكن للمستخدم الآن التفاعل مع جميع العناصر وأداء نفس الوظائف مثل المستخدمين الذين لا يستخدمون VoiceOver!

يغطي هذا بعض الإعدادات الأساسية واستخدامات وظيفة VoiceOver. لا يقتصر VoiceOver على الأمثلة المذكورة أعلاه فقط ، ولكنه يوفر نقطة انطلاق رائعة. بدلاً من إضافة إمكانية الوصول إلى تطبيقك كفكرة لاحقة ، فإن إضافتها من بداية عملية تطوير التطبيق والتصميم مع وضع هؤلاء المستخدمين في الاعتبار يكون له تأثير كبير على قابلية استخدام التنفيذ.

اقترح التحدي: تعتبر الدوارات رائعة لبعض التطبيقات ، ولكن هذا التحكم بالنجوم سيكون له معنى أيضًا عند التعامل معه على أنه شريط تمرير. قم بتحديث الكود لاستخدام السمة القابلة للتعديل وقيمة الوصول بدلاً من الدوار المخصص. أيهما أكثر قابلية للاستخدام؟

تريد أن تلعب مع الكود؟ يمكنك العثور على الرمز من هذا المنشور هنا.

الصورة الرمزية



Source link

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.