Content Description: यह क्या है, सिद्धांत और एक्सेसिबिलिटी के लिए कैसे सेट करें

एक्सेसिबिलिटी में Content Description क्या है

Content Description यूज़र इंटरफ़ेस तत्व का एक स्ट्रिंग प्रॉपर्टी है जो सहायक तकनीकों को दृश्य सामग्री का टेक्स्टुअल प्रतिनिधित्व प्रदान करती है। एक स्क्रीन रीडर (iOS में VoiceOver, Android में TalkBack) तत्व को दृश्य रूप से पहचानने का प्रयास करने के बजाय विवरण को ज़ोर से पढ़ता है। विवरण बिना टेक्स्ट लेयर वाली छवियों, आइकन, चार्ट, कस्टम कंट्रोल और किसी भी गैर-पाठ्य तत्व पर लागू होते हैं।

Google Material Design, 2024 के अनुसार, contentDescription के बिना तत्व WCAG 1.1.1 (Non-text Content) का उल्लंघन करते हैं। Accessibility Scanner की जाँच दर्शाती है कि शॉपिंग ऐप में 40% तक आइकन में विवरण नहीं होते। VoiceOver उपयोगकर्ता बिना विशिष्टता के केवल «छवि» या «बटन» सुनता है — ऐसा इंटरफ़ेस नेविगेशन के लिए अनुपयोगी हो जाता है।

Content Description किसी तत्व के दृश्य पाठ को प्रतिस्थापित नहीं करता। यदि किसी बटन में «भेजें» टेक्स्ट लेबल है, तो अतिरिक्त विवरण सेट करने की आवश्यकता नहीं है — स्क्रीन रीडर पाठ पढ़ेगा। छवियों, आइकन और इनपुट फ़ील्ड के लिए विवरण अनिवार्य है।

Accessibility Scanner (Android) और Xcode Accessibility Inspector (iOS) उपकरण स्वचालित रूप से विवरणों की जाँच करते हैं। रिलीज़ से पहले प्रत्येक स्क्रीन पर इन जाँचों को चलाने की अनुशंसा की जाती है।

Content Description क्यों महत्वपूर्ण है: उपयोगकर्ता परिदृश्य

दृष्टिबाधित उपयोगकर्ता इंटरफ़ेस को समझने के लिए VoiceOver पर निर्भर करता है। यदि शॉपिंग कार्ट आइकन में विवरण नहीं है, तो वह केवल «बटन» सुनता है। यह जानने के लिए कि बटन क्या करता है, उसे आँख बंद करके दबाना पड़ता है — एक अपरिवर्तनीय कार्रवाई का जोखिम। «कार्ट से आइटम हटाएँ» जैसा विवरण एक सेकंड में इस समस्या को हल करता है।

अस्थायी सीमाओं वाला उपयोगकर्ता (बाहर तेज़ धूप, टूटी स्क्रीन) भी VoiceOver का उपयोग करता है। Apple Accessibility Report, 2023 के अनुसार, लगभग 20% VoiceOver उपयोगकर्ताओं को स्थायी दृष्टि दोष नहीं है — वे स्थिति के अनुसार सुविधा चालू करते हैं।

WCAG 1.1.1: गैर-पाठ्य सामग्री

WCAG 1.1.1 (स्तर A) आवश्यकता है कि सभी गैर-पाठ्य सामग्री का एक टेक्स्ट विकल्प हो। अपवाद: वह सामग्री जो सजावटी है, केवल दृश्य प्रस्तुति के लिए उपयोग की जाती है, या कोई जानकारी नहीं देती है। सजावटीता परीक्षण: यदि आप तत्व हटाते हैं, तो क्या पृष्ठ का अर्थ बदलता है? यदि नहीं — इसे स्क्रीन रीडर से छुपाया जा सकता है।

Content Description, Label से कैसे भिन्न है

Accessibility Label (iOS में accessibilityLabel) तत्व का नाम है जो स्क्रीन रीडर फोकस पर बोलता है। Content Description (iOS में accessibilityHint) अतिरिक्त स्पष्टीकरण है जो नाम के बाद घोषित किया जाता है और कार्रवाई के परिणाम को बताता है।

अंतर «कार्ट» बटन के उदाहरण से स्पष्ट है। Label: «कार्ट»। Description: «चेकआउट स्क्रीन खोलेगा»। VoiceOver कहता है: «कार्ट। चेकआउट स्क्रीन खोलेगा»। यदि केवल Label सेट किया गया है, तो उपयोगकर्ता को पता नहीं चलेगा कि दबाने के बाद क्या होगा।

तालिका: Label बनाम Description

नियम: Label «यह क्या है?» प्रश्न का उत्तर देता है, Description — «क्या होगा?» प्रश्न का। Android में, contentDescription दोनों भूमिकाएँ निभा सकता है, लेकिन व्यवहार में बेहतर है कि उन्हें अलग किया जाए: «[नाम], [स्पष्टीकरण]» संयोजन का उपयोग करें।

कब Description, Label से अधिक महत्वपूर्ण है

जटिल जेस्चर (हटाने के लिए स्वाइप करना, संदर्भ मेनू के लिए लॉन्ग प्रेस) के लिए accessibilityHint अनिवार्य है। VoiceOver उपयोगकर्ता छिपे हुए जेस्चर के बारे में नहीं जानता जब तक कि उनका वर्णन न किया गया हो। तत्व के hint में निर्दिष्ट करें: «हटाने के लिए बाएँ स्वाइप करें»।

iOS: accessibilityHint विशेषता

iOS प्लेटफ़ॉर्म पर, accessibilityHint UIView या NSObject के समान नाम वाली प्रॉपर्टी के माध्यम से सेट किया जाता है। मान 80 वर्णों तक की एक स्ट्रिंग है। VoiceOver विस्तृत विवरण मोड सक्षम होने पर (VoiceOver सेटिंग — «Verbosity» में) label के बाद hint पढ़ता है।

कस्टम बटन के लिए hint सेट करने का उदाहरण:

import UIKit

class CustomButton: UIButton {
    override func awakeFromNib() {
        super.awakeFromNib()
        self.accessibilityLabel = "पसंदीदा में जोड़ें"
        self.accessibilityHint = "आइटम को पसंदीदा सूची में सहेजेगा"
    }
}

बिना टेक्स्ट सामग्री वाले UIImageView के लिए, isAccessibilityElement = true और accessibilityHint सेट करना अनिवार्य है:

let imageView = UIImageView(image: UIImage(named: "chart-sales"))
imageView.isAccessibilityElement = true
imageView.accessibilityHint = "पिछली तिमाही के लिए बिक्री चार्ट"

VoiceOver पढ़ता है: «पिछली तिमाही के लिए बिक्री चार्ट»। यदि hint खाली है — केवल «छवि»। Apple HIG, 2024 hints में «दबाएँ» या «स्पर्श करें» जैसी क्रियाओं का उपयोग न करने की सलाह देता है — VoiceOver स्वचालित रूप से जेस्चर निर्देश जोड़ता है।

SwiftUI: accessibilityHint मॉडिफ़ायर

SwiftUI में, hint एक चेन मॉडिफ़ायर के माध्यम से सेट किया जाता है:

Image(systemName: "trash")
    .accessibilityLabel("हटाएँ")
    .accessibilityHint("चयनित आइटम को स्थायी रूप से हटाएगा")

SwiftUI स्वचालित रूप से समग्र व्यू के लिए मॉडिफ़ायर को जोड़ता है। यदि Image, Button के अंदर है, तो SwiftUI बटन लेबल को प्राथमिक accessibilityLabel के रूप में उपयोग करता है।

Android: contentDescription प्रॉपर्टी

Android में, contentDescription या तो XML मार्कअप में या प्रोग्रामेटिक रूप से setContentDescription() के माध्यम से सेट किया जाता है। TalkBack तत्व पर फोकस होने पर विवरण घोषित करता है।

XML में उदाहरण:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_search"
    android:contentDescription="उत्पाद खोजें" />

डायनामिक तत्वों के लिए प्रोग्रामेटिक सेटिंग:

binding.iconSearch.contentDescription =
    "खोजें। फ़िल्टर के साथ खोज स्क्रीन खोलेगा"

सजावटी छवियों (विभाजक, पृष्ठभूमि, सजावटी आइकन) के लिए contentDescription = "@null" या setContentDescription(null) सेट करें — TalkBack ऐसे तत्वों को छोड़ देगा। XML में: android:contentDescription="@null"। खाली स्ट्रिंग "" काम नहीं करती — TalkBack फिर भी «छवि» घोषित करेगा।

Android: ImageButton और CheckBox के लिए महत्वपूर्ण विवरण

ImageButton के लिए, हमेशा contentDescription सेट करें — TalkBack छवियों पर टेक्स्ट नहीं देखता। CheckBox के लिए, विवरण गतिशील रूप से बदलना चाहिए: स्थिर विवरण के बजाय «चयनित» / «चयनित नहीं»। स्थिति श्रोता में setContentDescription का उपयोग करें।

विवरण लिखने के नियम

सूचनात्मकता — विवरण को अर्थ बताना चाहिए, दिखावट नहीं। «टिक के साथ नीला आइकन» नहीं, बल्कि «आइटम कार्ट में जोड़ा गया»। स्क्रीन रीडर को रंगों से कोई मतलब नहीं — उसे परिणाम से मतलब है।

संक्षिप्तता — इष्टतम लंबाई 2–4 शब्द (80 वर्णों तक)। लंबे विवरण नेविगेशन को धीमा करते हैं: VoiceOver क्रमिक रूप से पढ़ता है, प्रत्येक शब्द उपयोगकर्ता के समय का एक सेकंड है। Apple WWDC 2023, «Accessibility by Design» के अनुसार, 5 सेकंड से अधिक पढ़ने वाला वाक्यांश संज्ञानात्मक प्रवाह को बाधित करता है।

अद्वितीयता — एक ही स्क्रीन पर समान विवरण वाले दो तत्व नहीं होने चाहिए। उपयोगकर्ता यह अंतर नहीं कर पाएगा कि पहले बनाम दूसरे तत्व पर फोकस करने से क्या परिणाम होगा। यदि कई «खरीदें» बटन हैं, तो एक पहचानकर्ता जोड़ें: «iPhone 15 खरीदें», «iPhone 15 Pro खरीदें»।

स्थानीयकरण — Content Description को ऐप द्वारा समर्थित सभी भाषाओं में अनुवादित किया जाना चाहिए। विवरणों में स्थानीयकरण त्रुटि App Store में Accessibility Review विफल होने के सामान्य कारणों में से एक है।

विवरण की लंबाई: शोध

Nielsen Norman Group, 2024 के शोध ने दिखाया कि स्क्रीन रीडर के लिए इष्टतम विवरण लंबाई 3–5 शब्द (50 वर्णों तक) है। लंबे विवरण नेविगेशन की गति को 30% तक कम कर देते हैं, क्योंकि उपयोगकर्ता को अगले कदम से पहले घोषणा समाप्त होने तक प्रतीक्षा करनी पड़ती है।

उपयोग करते समय सामान्य गलतियाँ

अतिरेकता — विवरण दृश्य पाठ की नकल करता है। यदि किसी बटन में «भेजें» टेक्स्ट है, तो accessibilityHint = «भेजें बटन» सेट न करें। VoiceOver स्वचालित रूप से पाठ पढ़ेगा, और hint अनावश्यक शोर जोड़ देगा।

Label के साथ भ्रम — टेक्स्ट बटन के लिए label के बजाय contentDescription का उपयोग करना। iOS में, accessibilityLabel को बटन टेक्स्ट से मेल खाना चाहिए (या खाली होना चाहिए यदि टेक्स्ट पहले से दिखाई दे रहा है), और hint को केवल कार्रवाई स्पष्ट करनी चाहिए। Google Testing Blog, 2024 के अनुसार, Play Store में समीक्षित 23% ऐप में डुप्लिकेट विवरण हैं।

गतिशीलता की अनदेखी — स्थिति बदलने पर विवरण अपडेट नहीं होता। उदाहरण के लिए, «Wi-Fi» टॉगल का विवरण चालू करने के बाद भी «Wi-Fi सक्षम करें» ही रहता है। सही तरीका: स्थिति की निगरानी करके विवरण को गतिशील रूप से «Wi-Fi अक्षम करें» में बदलना।

रेंडर चक्र और प्रतिगमन

डिज़ाइन अपडेट (आइकन बदलाव, तत्व पुनर्व्यवस्था) के बाद, Content Description अक्सर खो जाता है। कारण: डिज़ाइनर छवि बदलता है, डेवलपर नए एसेट की एक्सेसिबिलिटी प्रॉपर्टी की जाँच नहीं करता। समाधान: कोड रिव्यू में एक्सेसिबिलिटी जाँच को अनिवार्य कदम बनाएँ — «क्या Content Description अपडेट किया गया?» चेकलिस्ट आइटम जोड़ें।

Content Description कैसे जाँचें

• iOS में: Xcode → Accessibility Inspector — तत्व चुनें, Label और Hint फ़ील्ड जाँचें
• Android में: Play Store से Accessibility Scanner इंस्टॉल करें — अपनी स्क्रीन पर चलाएँ
• दोनों प्लेटफ़ॉर्म पर: VoiceOver/TalkBack चालू करें और जेस्चर से पूरी स्क्रीन नेविगेट करें
• एक UI परीक्षण लिखें जो सभी ImageView के लिए contentDescription की जाँच करता है

iOS के लिए UI परीक्षण उदाहरण

func testContentDescriptionExists() {
    let app = XCUIApplication()
    app.launch()
    let image = app.images["chart-sales"]
    XCTAssertNotNil(image.label)
    XCTAssertGreaterThan(image.label.count, 0)
}