कल्पना करो कि तुम अंधे हो। आप इस चित्र को कैसे सुनेंगे: « D O . , VoiceOver. . « ». « D O . , VoiceOver. . « ».

काले चश्मे में डी अक्षर और एक सफेद छड़ी और व्हीलचेयर में ओ अक्षर एक बड़े फोन को देख रहे हैं। फोन स्क्रीन पर डोडो पिज्जा ऐप का एक स्क्रीनशॉट है जो वॉयस ओवर के लिए पिज्जा मेनू सेल के नामों का उच्चारण करता है। तस्वीर को पुराने कंप्यूटर के रूप में स्टाइल किया गया है और हरे रंग में निष्पादित किया गया है।

फोन लंबे समय से मेरे लिए एक निरंतरता रहा है, और मैं हर दिन दर्जनों अनुप्रयोगों के बिना अपने जीवन की कल्पना करता हूं जो मैं हर दिन उपयोग करता हूं। लेकिन उस व्यक्ति के बारे में क्या जो फोन को अपने हाथ में नहीं ले सकता है या स्क्रीन पर नहीं देख सकता है? IOS सुविधाएँ सीमित गतिशीलता, दृष्टि और श्रवण वाले लोगों के लिए रोजमर्रा की जिंदगी में इन संभावनाओं को खोलती हैं। उनकी मदद से, आप टेक्स्ट का आकार और कंट्रास्ट बढ़ा सकते हैं, मोनो-ऑडियो बना सकते हैं, एनिमेशन हटा सकते हैं। आप एक स्क्रीन के बिना इंटरफ़ेस के साथ काम कर सकते हैं - कान से (अंधे के लिए) या यहां तक कि केवल आवाज को नियंत्रित करें (यदि व्यक्ति आंदोलन में सीमित है)।

आप किसी भी एप्लिकेशन और यहां तक कि कुछ गेम को भी अपना सकते हैं। आज मैं आपको बताऊंगा कि कैसे आईओएस डेवलपर्स इस दिशा में पहला कदम उठाते हैं।

आवाज नियंत्रण: अपनी आवाज को नियंत्रित करें

IOS 13 से शुरू होकर फोन को आवाज द्वारा नियंत्रित किया जा सकता है। वॉयस कंट्रोल जीवन को सरल बनाता है और सीमित गतिशीलता वाले लोगों को एक नया स्तर देता है। वीडियो देखें, इसमें Apple दिखाता है कि यह कैसे काम करता है:

आप इन वीडियो में फ़ोन को प्रबंधित करने के बारे में अधिक जानकारी प्राप्त कर सकते हैं:

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

जटिल तत्वों (मानचित्र, चार्ट) के साथ काम करने के लिए, आप फोन को ग्रिड दिखाने के लिए कह सकते हैं, फिर मैप पर जगह का चयन सेल नंबर द्वारा किया जा सकता है।

बहुत सारे उपलब्ध इशारे हैं। आप फ़ोन की सेटिंग में सभी का पूरा विवरण देख सकते हैं: सेटिंग → एक्सेसिबिलिटी → वॉइस कंट्रोल → कस्टमाइज़ कमांड।

वॉइस कंट्रोल कैसे काम करता है, इसके तीन उदाहरण: जब यह लेबल, संख्या और ग्रिड दिखाता है

VoiceOver: इशारों पर नियंत्रण रखें

नेत्रहीन लोगों को आपके एप्लिकेशन का उपयोग करने के लिए, आपको VoiceOver का उपयोग करके इसे अनुकूलित करना होगा। सामान्य उपयोग से कुछ अंतर:

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

उपलब्ध इशारों की पूरी सूची।

अपना आवेदन कैसे उपलब्ध करें

वॉइस कंट्रोल और वॉइसओवर एक ही तकनीक पर काम करते हैं, इसलिए एक को एडाप्ट करने पर हमें दूसरे के लिए सपोर्ट मिलता है।

पहले आपको एक उपयोगकर्ता होने की आवश्यकता है: इसे चालू करें, अपने दम पर प्रयास करें और एक शॉर्टकट (त्वरित चालू) कॉन्फ़िगर करें ताकि नई सुविधाओं की जांच करना आसान हो।

कहां सक्षम करें : आप सिरी के माध्यम से या सेटिंग्स (सेटिंग्स → एक्सेसिबिलिटी → वॉयसओवर) के माध्यम से सक्षम / अक्षम कर सकते हैं।

शॉर्टकट कैसे कॉन्फ़िगर करें : त्वरित पहुंच के लिए, होम बटन को तीन बार दबाकर शॉर्टकट को चालू करें (या एक्स मॉडल के लिए "बंद करें"): सेटिंग्स → एक्सेसिबिलिटी → एक्सेसिबिलिटी शॉर्टकट → VoiceOver बगल में स्थित बॉक्स को चेक करें।

प्रोग्रामिंग (सिद्धांत)

एक्सेसिबिलिटी का आधार UIAccessibilityElement प्रोटोकॉल है। VoiceOver को बेहतर बनाने के लिए VoiceOver आपको निम्न करने की आवश्यकता है:

बटन पर हस्ताक्षर करें।
मान जोड़ें।
एक इशारा छोड़ो।
समूह नियंत्रण।
गलत शिलालेखों को सही करें।
नियंत्रण के प्रकार को इंगित करें: बटन, शिलालेख, लिंक, आदि।

Interface builder में कुछ कॉन्फ़िगर किया जा सकता है, लेकिन कुछ सेटिंग्स केवल कोड में उपलब्ध हैं।

इंटरफ़ेस बिल्डर उदाहरण और वॉयस ओवर के लिए सेटिंग्स

बटन के नाम -

प्रत्येक बटन को एक छोटा नाम दिया जाना चाहिए। यदि आप भूल जाते हैं तो VoiceOver बीमा VoiceOver - यह बटन पर पाठ या आइकन का नाम पढ़ने की कोशिश करेगा, लेकिन यह अक्सर ऐसा करता है।

आपको क्या हस्ताक्षर करने की आवश्यकता है:

एक आइकन के साथ बटन, लेकिन पाठ के बिना;
UISlider ;
UIStepper ;
चित्र। यदि संभव हो, तो चित्र में दिखाए गए पर हस्ताक्षर करना बेहतर है। इंस्टाग्राम कर सकता है।

मान - .अधिकता

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

सुझाव -

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

नियंत्रणों का सामान्यीकरण

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

प्रोग्रामिंग (डेमो और अभ्यास)

यह ज्ञान अपने स्वयं के कार्यक्रम में सुधार शुरू करने के लिए पर्याप्त है। आइए पिज्जा के मेनू के एक उदाहरण को देखें।

अंधे के लिए गैर-अनुकूलित संस्करण इस तरह दिखता है:

डोडो पिज्जा एप्लिकेशन के उदाहरण पर वॉयस ओवर तत्वों के हस्ताक्षर एक काली स्क्रीन पर लिखे गए हैं

हल करने के लिए कुछ स्पष्ट मुद्दे:

ऊपरी दाएं कोने में 24 का एक समझ से बाहर का मूल्य।
बाईं और ऊपर की तरफ खाली जगह।
बहुत सारे तत्व।
मूल्य का गलत उच्चारण ("दो सौ और पैंतालीस रूबल से" के बजाय "दो सौ पैंतालीस रूबल से")।

मान जोड़ें

ऊपरी दाएं कोने में 24 डोडो रूबल की संख्या है।
अतः हस्ताक्षर करना आवश्यक है:

 accessibilityLabel = "-" accessibilityValue = amountOfDodoRubles

यह कोड कहीं भी रखा जा सकता है आपके पास मूल्य के लिए वर्तमान मूल्य है।

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

हम ऊपर से खाली जगह को हटा देते हैं

शीर्ष पर स्टॉक एक क्षैतिज UICollectionView । सेल के अंदर एक लेबल होता है, यह VoiceOver ढूंढता है।

कैसे ठीक करें:

पूरे सेल को सुलभ नियंत्रण बनाएं। डिफ़ॉल्ट रूप से, सभी view अन्य तत्वों के लिए केवल कंटेनर के रूप में कार्य करते हैं; VoiceOver उन्हें अनदेखा करता है। अंतिम तत्व के रूप में view को चिह्नित करने के लिए, isAccessibilityElement = true सेल पर isAccessibilityElement = true सेट करें। यह awakeFromNib() विधि में किया जा सकता है। उसके बाद, पूरे सेल बाहर खड़े होना शुरू हो जाएगा, खाली स्थान अब हस्तक्षेप नहीं करता है।
सेल को एक नाम दें। आप अब लेबल पर ध्यान केंद्रित नहीं कर सकते हैं, इसलिए आपको पाठ को मैन्युअल रूप से निर्दिष्ट करने की आवश्यकता है। accessibilityLabel = specialOffer.title

आप इसे cellForItemAt विधि में कॉन्फ़िगर कर सकते हैं:

 func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let specialOffer = specialOffers[indexPath.row] let cell = collectionView.deque… cell.accessibilityLabel = specialOffer.title return cell }

तालिका सेल को सरल बनाएं

उत्पाद के साथ सेल में दो समस्याएं हैं: बहुत सारे तत्व और एक गलत मूल्य विवरण।

नियंत्रण मिलाएं

अब सेल के कई क्षेत्र हैं: नाम, विवरण, मूल्य और चित्र, प्रति सेल 4 नियंत्रण। यदि मेनू में 10 उत्पाद हैं, तो यह पहले से ही 40 छोटे नियंत्रण हैं। यह सामान्य करने के लिए आवश्यक है कि 10 उत्पाद थे, इसलिए यह अर्थ के करीब निकला।

मेनू सेल जहां आइटम को समूहीकृत नहीं किया जाता है

आप सरल कर सकते हैं:

पूरे सेल को सुलभ नियंत्रण बनाएं। हम पहले से ही जानते हैं कि यह कैसे करना है: सेट isAccessibilityElement = true सेल के isAccessibilityElement = true
accessibilityLabel में accessibilityLabel सबसे महत्वपूर्ण बात लिखता है: नाम और कीमत। अल्पविराम से अलग होकर, VoiceOver खाते में विराम चिह्न लेता है।
accessibilityValue क्षमता में अतिरिक्त जानकारी निर्दिष्ट करें, हमारे मामले में यह रचना है।
संकेत दें कि सेल को दबाया जा सकता है, अर्थात। यह अनिवार्य रूप से एक बटन है। accessibilityTraits = .button

एक मेनू सेल जो वॉइस ओवर के लिए एक के रूप में काम करता है

सेल के अंदर की विधि आवश्यक मूल्यों को प्रतिस्थापित करती है:

 func refreshAccessibility(title: String?, price: String?, ingredients: String?, isProductAvailable: Bool) { isAccessibilityElement = true // 1 let price = isProductAvailable ? price : "  " accessibilityLabel = [title, price].compactMap { $0 } .joined(separator: ", ") // 2 accessibilityValue = ingredients // 3 accessibilityTraits = .button // 4 }

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

चार नियंत्रणों के संयोजन का एक उदाहरण: माइनस बटन, मात्रा के साथ लेबल, प्लस बटन और सभी उत्पादों के लिए मूल्य

हम "रूबल" को झुकाते हैं

"रूबल" को सही तरीके से वर्तनी करने के लिए, हम सही लाइन उत्पन्न करते हैं और इसे बटन के लिए accessibilityLabel में डालते हैं।

 buyButton.accessibilityLabel = String(format: NSLocalizedString(" %d ", comment: "Price button. Ex.:  150 "), price)

आपको Localizable.stringsDict फ़ाइल में गिरावट करने की आवश्यकता है:

स्थानीय लोगों के लिए उदाहरण

इशारा नेविगेशन

नेविगेशन के लिए दो सहायक इशारे हैं: स्क्रब और मैजिक टैप।

स्क्रब पिछली स्क्रीन पर वापस आ जाता है। इसे निष्पादित करने के लिए, स्क्रीन को दो उंगलियों के साथ स्वाइप करें, जैसे कि पत्र जेड लिखना। आप स्क्रैबल के साथ टाइपिंग भी समाप्त कर सकते हैं।

मेडजिक टैप वर्तमान स्क्रीन का मुख्य कार्य कहता है। दो उंगलियों के साथ दो बार टैप करने की आवश्यकता है। आप खिलाड़ी में एक गीत शामिल कर सकते हैं या कॉल का जवाब दे सकते हैं।

Medjik tapa में UX समस्या है - यह स्पष्ट नहीं है कि यह क्या करता है। खुद के लिए, हमने इस तरह से फैसला किया है: यदि स्क्रैबल स्क्रीन पर वापस जाता है, तो स्क्रिप्ट के अनुसार मैजिक टैप को अगली स्क्रीन पर अनुवाद करने दें। पिज्जा कार्ड पर, यह इसे टोकरी में जोड़ देगा, यदि आप टोकरी में थे, तो आप डिलीवरी स्क्रीन पर जाएंगे, और वितरण स्विच से भुगतान तक।

लेकिन अगर कार्रवाई स्पष्ट नहीं है, तो आप बटन के टूलटिप में जादू टैप के बारे में बात कर सकते हैं। लेकिन याद रखें: संकेत नहीं बोले जा सकते हैं, यह सेटिंग्स पर निर्भर करता है।

अडॉप्ट नेविगेशन

यदि आप स्टॉक या डोडो-रूबल बटन पर क्लिक करते हैं, तो एक मोडल स्क्रीन खुल जाएगी। अगर हम UINavigationController उपयोग करते हैं, तो कुछ भी नहीं करना होगा। लेकिन मोडल स्क्रीन के लिए, आपको यह बताने की जरूरत है कि वे अतिरिक्त इशारों पर कैसे प्रतिक्रिया देते हैं।

पॉपअप उदाहरण

स्क्रब लगाएं

उपयोगकर्ता द्वारा Z को ड्रा करने के बाद, firstResponder की firstResponder विधि firstResponder । आमतौर पर, यह वर्तमान UIViewController ।

आपके लिए यह तरीका लागू करने के लिए पर्याप्त है, इसमें स्क्रीन को बंद करें और सही लौटें, यह दर्शाते हुए कि इशारे पर कार्रवाई की गई है और आप responder chain आगे responder chain सकते हैं:

 override func accessibilityPerformEscape() -> Bool { dismiss(animated: true) return true }

इसी तरह से, आप मैजिक टैप का जवाब दे सकते हैं। उदाहरण के लिए, कार्ड से प्रमोशन लागू करें:

 override func accessibilityPerformMagicTap() -> Bool { applySpecialOffer() return true }

समस्याओं का पता कैसे लगाएं

अनुकूलन समस्याओं को ढूंढना मुश्किल नहीं है, बस VoiceOver चालू करें और दर्जनों आप पर VoiceOver । लेकिन थोड़ी देर के बाद नई समस्याओं का पता लगाना अधिक कठिन हो जाएगा, जबकि कुछ महत्वपूर्ण याद करना आसान है, क्योंकि आपको कानों द्वारा समस्याओं का पता लगाना होगा। डेवलपर के लिए जीवन को आसान बनाने के कुछ तरीके हैं।

उपशीर्षक सक्षम करें। IOS 13 में, एक सेटिंग दिखाई दी है जिसमें "उपशीर्षक" शामिल हैं: सेटिंग्स → एक्सेसिबिलिटी → वॉयसओवर → कैप्शन पैनल।
वॉयस कंट्रोल के माध्यम से कैप्शन देखें। VoiceOver का परीक्षण करते समय, आप Voice Control को सक्षम कर सकते हैं, फिर सभी लेबल तुरंत दिखाई देंगे। अगर कहीं कोई अंक है, तो आप रजिस्टर करना भूल गए।
अभिगम्यता निरीक्षक। एक्सेसिबिलिटी इंस्पेक्टर आपको सिम्युलेटर में सभी accessibility गुणों को देखने की अनुमति देता है। वह वर्तमान स्क्रीन को भी ऑडिट कर सकता है, इसलिए आप संभावित समस्याओं के बारे में जानेंगे: अवसाद के छोटे क्षेत्र, गैर-विपरीत तत्व, अहस्ताक्षरित बटन। यदि आवश्यक हो, तो वह अपनी आवाज के साथ सभी तत्वों को पढ़ सकता है।

अभी के लिए बस इतना ही

हमने एक स्क्रीन को अनुकूलित किया। आपको बहुत कम प्रोग्राम करने की आवश्यकता है, एक बुनियादी स्तर पर पहुंच बनाए रखना आसान है।

लेकिन दृश्यों के पीछे बहुत कुछ रहता है: विभिन्न accessibilityTraits - accessibilityTraits , टाइपिंग, एप्लिकेशन नेविगेशन, custom actions , फ़ोकस ऑर्डर, accessibility notifications , रोटर और ब्रेल। इसके बारे में अगली बार।

यदि आप अभी और जानना चाहते हैं, तो आप पढ़ सकते हैं:

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

वॉयस कंट्रोल और वॉइसओवर: ब्लाइंड या स्टिल के लिए एप्लिकेशन को कैसे अनुकूलित करें