🕡 ⛺️ 👨‍👧 IOS पर VoiceOver: आम समस्याओं का समाधान 📳 🧗🏽 ⛹🏽

जब आप अंधे के लिए एप्लिकेशन को अनुकूलित करने का प्रयास करते हैं, तो अक्सर कुछ गलत हो जाता है: या तो आदेश खो जाएगा, फिर फोकस वहां नहीं मिलेगा। दूसरी ओर, यूएक्स है, जो याद करना आसान है क्योंकि आप संभावित समस्याओं के बारे में नहीं जानते हैं। इस लेख में हम विशिष्ट समस्याओं और उनके समाधानों से निपटेंगे।

IOS एप्लिकेशन का अनुकूलन एक बड़ा विषय है, सब कुछ एक लेख में फिट नहीं हुआ, इसलिए मैं उन्हें एक श्रृंखला में जारी करता हूं।

वॉयस कंट्रोल और वॉइसओवर: ब्लाइंड या स्टिल के लिए एप्लिकेशन को कैसे अनुकूलित करें ।
IOS पर VoiceOver: प्रत्येक नियंत्रण अलग तरीके से व्यवहार करता है।
IOS पर VoiceOver: आम समस्याओं का समाधान।
वॉयसओवर, वॉयस कंट्रोल और यूआई परीक्षणों के कार्यान्वयन के बीच अंतर। (चालू)

में पहले भाग में हम अंधे VoiceOver का उपयोग के लिए आवेदन के अनुकूलन के साथ निपटा: पर हस्ताक्षर किए नियंत्रण, उन्हें, फिक्स्ड नेविगेशन वर्गीकृत किया। में दूसरे भाग, हम आगे ले गया और "सुविधाओं" है कि आवेदन की उपयोगिता अंधे लोगों के लिए अपने काम को बेहतर बनाने और आम तौर पर सुधार करने के लिए नियंत्रण के लिए दिया जा सकता है की जांच की।

आज हम पिज्जा स्क्रीन को एडॉप्ट करने का काम जारी रखेंगे: हम क्रॉल ऑर्डर को बदल देंगे, खरीद की जानकारी को सारांशित करेंगे, मोडल विंडो को ठीक करेंगे और लोडिंग इंडिकेटर में सुधार करेंगे।

नियंत्रण फिर से

यदि आप वॉइसओवर के लिए नियंत्रण के सही क्रम को सेट नहीं करते हैं, तो सबसे अधिक संभावना है कि यह गलत क्रम में तत्वों को बायपास करेगा और पढ़ेगा जैसा आप चाहते हैं। उदाहरण के लिए, यह बटन "बंद" और "टोकरी के साथ" हुआ।

स्क्रीन स्क्रॉल करेगी और बटन ऊपर हैं UIScrollView। यह पता चलता है कि VoiceOver पहले सभी तत्वों को अंदर से बायपास करने की कोशिश करता है UIScrollViewऔर उसके बाद ही शीर्ष बटन पाता है। उपयोगकर्ता के लिए, VoiceOver का यह व्यवहार गलत होगा: बटन सबसे ऊपर हैं, इसलिए उनके साथ पुनरावृत्ति और स्कोरिंग शुरू होनी चाहिए।

आरंभ करने के लिए, आइए पहले पता करें कि वॉयसओवर नियंत्रण के क्रम को कैसे निर्धारित करता है। वह इसे इस तरह से करता है: एक संपत्ति से तत्व लेता है accessibilityElements। डिफ़ॉल्ट रूप से, वे सभी viewवहां मौजूद हैं isAccessibilityElement = true।

अब हम ओवरराइड करके शुरुआत में बटन लगा सकते हैं accessibilityElements:

override var accessibilityElements: [Any]? {
    get {
        var elements = [Any]()
            
        elements.append(contentsOf: [closeButton, cartButton])
        elements.append(contentsOf: contentScrollView.accessibilityElements)
            
        return elements
    }
    set { }
}

समूह के माध्यम से होना चाहिएसमर्थन योग्यता। बच्चों

आमतौर पर, वॉयसओवर एक प्राकृतिक क्रम में तत्वों को पढ़ने की कोशिश करता है - बाएं से दाएं, ऊपर से नीचे तक:

यदि आपके पास समूहबद्ध नियंत्रण हैं, तो आपको वॉयसओवर को समूह में निकटतम तत्व पर जाने की आवश्यकता है, और पढ़ने के क्रम में नहीं। सेट करें .shouldGroupAccessibilityChildren = true, और आदेश तत्वों की निकटता को ध्यान में रखना शुरू कर देगा। संपत्ति को viewसभी तत्वों के लिए माता-पिता के रूप में सेट किया जाना चाहिए ।

ध्यान केंद्रित करने के लिए पहला आइटम इंगित करें

एक अन्य रीडिंग ऑर्डर मुद्दा है जब वॉयसओवर पहली बार स्क्रीन खोलता है, यह शीर्ष बाएं तत्व का चयन करता है। सबसे अधिक बार, यह बैक बटन है। एक ओर, यह आपको पिछली स्क्रीन पर जल्दी से लौटने की अनुमति देता है यदि आप गलती करते हैं। दूसरी ओर, यह है कि हम किस स्क्रीन पर अपनी समझ खो देते हैं। आप स्थिति को ठीक कर सकते हैं यदि आप मैन्युअल रूप से वांछित नियंत्रण पर ध्यान केंद्रित करते हैं।

Apple क्या करता है?
यह अजीब है कि UINavigationController"बैक" बटन पर ध्यान केंद्रित करता है, मैं इसे स्क्रीन के शीर्षक पर रख सकता हूं जो खुलता है। सुविधा पक्ष से, मुझे शीर्षक या पहले नियंत्रण पर ध्यान देना सही लगता है, इसलिए हम नई स्क्रीन के बारे में अधिक जानकारी देते हैं। आप स्क्रब के इशारे से वापस जा सकते हैं ।

आप अलर्ट फ़ंक्शन का उपयोग करके फ़ोकस को फिर से व्यवस्थित कर सकते हैं UIAccessibility.post(notification: …)। यह दो पैरामीटर लेता है:

प्रजातियों में से एक UIAccessibility.Notification।
वह वस्तु जिस पर सतर्कता लागू की जानी चाहिए। सबसे अधिक बार, यह पाठ या ऑब्जेक्ट के साथ एक पंक्ति है जिसे अधिसूचना के बाद चुना जाना चाहिए।

आप हेडर पर viewDidLoad में ध्यान केंद्रित कर सकते हैं:

override func viewDidLoad() {
    super.viewDidLoad()
        
    UIAccessibility.post(notification: .screenChanged,
                         argument: titleLabel);
}

आप उस वस्तु को स्थानांतरित कर सकते हैं जिस पर आप ध्यान केंद्रित करना चाहते हैं या पाठ का उच्चारण किया जाना है।

वस्तुओं के लिए अलर्ट के प्रकार

.screenChanged — , . - .
.layoutChanged — . , , «» .

.announcement — . . , . , .

DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) {
		UIAccessibility.post(notification: .announcement,
                         argument: text)
}

.pageScrolled — .UIScrollView « 3 5», . , , .
.pauseAssistiveTechnology .resumeAssistiveTechnology — VoiceOver.

देशी तरीके से मोडल विंडो दिखाएं

जब VoiceOver के साथ काम कर सकते हैं (और करेंगे) विकास में अनुमति सभी जाम शूट। उदाहरण के लिए, हमने एक संदेश फ़ीड किया और ताकि संदेश नीचे से शुरू हो, हमने फ्लिप करने का फैसला किया UITableViewऔर फिर सभी कोशिकाओं को फ्लिप किया । नेत्रहीन, सब कुछ ठीक है, लेकिन सूची VoiceOver में तीन उंगलियों के साथ उल्टा स्क्रॉल करेगी।

हमें एक समस्या का भी सामना करना पड़ा कि हम किसी भी तरह से सामग्री को बदल नहीं सकते, क्योंकि खिड़की पर ध्यान केंद्रित करना संभव नहीं था। यह इसलिए हुआ क्योंकि हमने दृश्य दिखाया था, न UIViewControllerकि किसी विशेष UIPresentationController.वॉइसओवर के साथ, जो इसे संबोधित करता है .firstResponder, और हमारा viewनहीं था।

यदि पुनर्लेखन के लिए समय नहीं है, तो आप इसके viewलिए संपत्ति निर्धारित कर सकते हैं accessibilityViewIsModal। तब VoiceOver केवल उसी पर ध्यान केंद्रित करेगा view।

override var accessibilityViewIsModal: Bool {
    get { return true }
    set {}
}

सच कहूं, तो यह मेरे और हमारे लिए कभी काम नहीं आया UIPresentationController.

अदृश्य फ्रेम्स संरेखित करें

रीडिंग ऑर्डर को फ्रेम द्वारा गिना जाता है, कभी-कभी यह अप्रत्याशित परिणाम देता है। उदाहरण के लिए, हमने क्लिक करने के लिए आसान बनाने के लिए "i" बटन के फ्रेम को बड़ा किया। लेकिन यह पिज्जा नाम के फ्रेम से ऊंचा था, इसलिए फोकस का पहला तत्व "आई" बटन था। हालांकि यह छोटा है, यह दाईं ओर है और आमतौर पर इतना महत्वपूर्ण नहीं है।

आप पढ़ने के क्रम को बदल सकते हैं accessibilityElements, लेकिन मैं एक अलग तरीका दिखाऊंगा। वॉइसओवर संपत्ति का उपयोग करता है accessibilityFrame, बस डिफ़ॉल्ट रूप से यह सामान्य फ्रेम से मेल खाता है। कई समाधान हैं:

नियंत्रण उपवर्ग को ओवरराइड करें और कम किया गया मान लौटाएं।
बाहर सही फ्रेम सेट करें।
बस फ्रेम को समायोजित करें ताकि यह शिलालेख के साथ फ्लश हो।

लेकिन यह महत्वपूर्ण है कि यह फ्रेम स्क्रीन के निर्देशांक में है। साधारण रूपांतरण के लिए एक फ़ंक्शन है UIAccessibility.convertToScreenCoordinates।

इसका उपयोग नियंत्रणों को संयोजित करने के लिए भी किया जा सकता है। उदाहरण के लिए, आपको स्विचर और उसके हस्ताक्षर को संयोजित करने की आवश्यकता है, इसलिए तत्व बड़ा हो जाएगा, उस पर क्लिक करना आसान होगा, अनावश्यक दोहराव दूर हो जाएगा।

override func layoutSubviews() {
        super.layoutSubviews()
        repeatSwitch.accessibilityLabel = repeatLabel.text
        repeatSwitch.accessibilityFrame = UIAccessibility.convertToScreenCoordinates(
                repeatSwitch.frame.union(repeatLabel.frame).insetBy(dx: -12, dy: -12),
                in: repeatSwitch.superview!)
}

मैंने फोकस को भी बड़ा बनाया है .inset, इसे प्रेस करना अधिक सुविधाजनक है।

फ्रेम का उपयोग करना और AccessibilityContainerआप ग्राफ और टेबल उपलब्ध कर सकते हैं।

मुख्य क्रिया को संक्षेप करें

यह UX के बारे में अधिक है, लेकिन मैं आपको वैसे भी बताऊंगा। सामान्य दृष्टि वाला व्यक्ति आसानी से स्क्रीन से सभी सेटिंग्स को पढ़ता है, लेकिन इस अंधे व्यक्ति के लिए, आपको सभी नियंत्रणों के माध्यम से मैन्युअल रूप से सॉर्ट करने की आवश्यकता है। आप प्रक्रिया को सुविधाजनक बना सकते हैं और खरीदें बटन में सभी परिवर्तनों को संक्षेप में प्रस्तुत कर सकते हैं।

उदाहरण के लिए, "खरीदें बटन" प्राप्त करने के लिए। बेकन जोड़ें, जैलापेनो को हटा दें। मूल्य 434 write », आपको कोड में कुछ भी असामान्य लिखने की ज़रूरत नहीं है, बस जोड़ा / हटाए गए के साथ लाइन एकत्र करें:

accessibilityTraits = .button
accessibilityLabel = ""
accessibilityValue = " ,  .  434₽"

और डाउनलोड संकेतक पर हस्ताक्षर करना न भूलें

यदि कार्ट में उत्पाद जोड़ने के बाद आप इंटरफ़ेस को संक्षिप्त रूप से रोकते हैं और कुछ डाउनलोड करते हैं, तो डाउनलोड इंडिकेटर उपलब्ध करना न भूलें:

संकेतक पर ध्यान केंद्रित करने के लिए अलर्ट का उपयोग करें।
फोकस को एक नाम दें। उदाहरण के लिए, लोड हो रहा है।
लगा दो accessibilityViewIsModal।
मुझे पता है जब डाउनलोड समाप्त हो गया है।

यदि लोड करने के बाद आप एक नई स्क्रीन दिखाते हैं, तो वॉयसओवर स्वयं फोकस को स्विच करेगा, इसलिए यह स्पष्ट हो जाएगा कि डाउनलोड समाप्त हो गया है। अधिक जटिल मामलों में, आप स्पष्ट रूप से यह कह सकते हैं या कंपन भी जोड़ सकते हैं ।

Apple क्या करता है?
दिलचस्प बात यह है कि सफारी आईओएस 13 में इसके साथ काम करता है: एक पेज लोड के दौरान, यह प्रत्येक सेकंड में एक क्लिक करता है, और जब एक पेज लोड होता है तो यह * woop-dumb * करता है। काश, आपी की ओर से यह अभी तक उपलब्ध नहीं है, हम iOS 14 की प्रतीक्षा कर रहे हैं।

स्क्रीन को अनुकूलित करने के लिए, हमने अलग-अलग तरीकों का इस्तेमाल किया: हमने बटनों के क्रम को बदल दिया, फोकस के लिए पहले तत्व को इंगित किया, मोडल विंडो को ठीक किया, मुख्य बटन पर सेटिंग्स को सारांशित किया और आवेदन की सुविधा पर काम किया। यह ज्ञान लगभग किसी भी एप्लिकेशन को अनुकूलित करने के लिए पर्याप्त है। आगे बढ़ें।

अगली बार मैं VoiceOver, वॉयस कंट्रोल और UI परीक्षणों के कार्यान्वयन के बीच अंतर के बारे में बात करूँगा।

अगले लेख को याद नहीं करने के लिए, मेरे डोडो पिज्जा मोबाइल चैनल की सदस्यता लें ।

IOS पर VoiceOver: आम समस्याओं का समाधान