ऐप्लिकेशन की सुलभता के सिद्धांत (व्यू)

सिद्धांत और Jetpack Compose में लागू करनाarrow_forward

Android फ़्रेमवर्क, ऐक्सेसिबिलिटी से जुड़ी ज़रूरतों वाले लोगों की मदद करने के लिए, ऐक्सेसिबिलिटी सेवा बनाने की सुविधा देता है. यह सेवा, लोगों को ऐप्लिकेशन का कॉन्टेंट दिखा सकती है. साथ ही, उनकी ओर से ऐप्लिकेशन को भी कंट्रोल कर सकती है.

Android, सिस्टम की सुलभता से जुड़ी कई सेवाएं देता है. इनमें ये शामिल हैं:

• TalkBack: यह कम दृष्टि वाले या दृष्टिहीन लोगों के लिए मददगार है. यह कॉन्टेंट को सिंथेसाइज़ की गई आवाज़ में बोलकर सुनाता है. साथ ही, उपयोगकर्ता के जेस्चर के जवाब में ऐप्लिकेशन पर कार्रवाइयां करता है.
• स्विच ऐक्सेस: यह सुविधा उन लोगों के लिए है जिन्हें चलने-फिरने में दिक्कत होती है. यह इंटरैक्टिव एलिमेंट को हाइलाइट करता है और उपयोगकर्ता के बटन दबाने पर कार्रवाई करता है. इसकी मदद से, सिर्फ़ एक या दो बटन का इस्तेमाल करके डिवाइस को कंट्रोल किया जा सकता है.

सुलभता से जुड़ी ज़रूरतों वाले लोगों को आपका ऐप्लिकेशन इस्तेमाल करने में आसानी हो, इसके लिए ज़रूरी है कि आपका ऐप्लिकेशन इस पेज पर बताए गए सबसे सही तरीकों का पालन करे. ये तरीके, ऐप्लिकेशन को ज़्यादा सुलभ बनाएं में बताए गए दिशा-निर्देशों पर आधारित हैं.

लेबल के एलिमेंट

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

ज़्यादातर मामलों में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट का ब्यौरा, लेआउट रिसॉर्स फ़ाइल में दिया जाता है. इस फ़ाइल में एलिमेंट मौजूद होता है. आम तौर पर, लेबल जोड़ने के लिए contentDescription एट्रिब्यूट का इस्तेमाल किया जाता है. इसके बारे में, ऐप्लिकेशन को ज़्यादा ऐक्सेसिबल बनाने से जुड़ी गाइड में बताया गया है. यहां लेबलिंग की कई अन्य तकनीकों के बारे में बताया गया है.

ऐसे एलिमेंट जिनमें बदलाव किया जा सकता है

बदलाव किए जा सकने वाले एलिमेंट, जैसे कि EditText ऑब्जेक्ट को लेबल करते समय, यह मददगार होता है कि एलिमेंट में ही ऐसा टेक्स्ट दिखाया जाए जो मान्य इनपुट का उदाहरण देता हो. साथ ही, इस उदाहरण वाले टेक्स्ट को स्क्रीन रीडर के लिए भी उपलब्ध कराया जाए. ऐसे मामलों में, android:hint एट्रिब्यूट का इस्तेमाल किया जा सकता है. इसका तरीका इस स्निपेट में दिखाया गया है:

<!-- The hint text for en-US locale would be
     "Apartment, suite, or building". -->
<EditText
   android:id="@+id/addressLine2"
   android:hint="@string/aptSuiteBuilding" ... />

इस स्थिति में, View ऑब्जेक्ट के android:labelFor एट्रिब्यूट की वैल्यू, EditText एलिमेंट के आईडी पर सेट होनी चाहिए. ज़्यादा जानकारी के लिए, यहां दिया गया सेक्शन देखें.

एलिमेंट के ऐसे जोड़े जिनमें एक एलिमेंट दूसरे के बारे में जानकारी देता है

आम तौर पर, EditText एलिमेंट में एक View ऑब्जेक्ट होता है. इससे यह पता चलता है कि उपयोगकर्ताओं को EditText एलिमेंट में क्या डालना है. View ऑब्जेक्ट के android:labelFor एट्रिब्यूट की वैल्यू सेट करके, इस संबंध के बारे में बताया जा सकता है.

इस तरह के एलिमेंट पेयर को लेबल करने का एक उदाहरण, यहां दिए गए स्निपेट में दिखाया गया है:

<!-- Label text for en-US locale would be "Username:" -->
<TextView
   android:id="@+id/usernameLabel" ...
   android:text="@string/username"
   android:labelFor="@+id/usernameEntry" />

<EditText
   android:id="@+id/usernameEntry" ... />

<!-- Label text for en-US locale would be "Password:" -->
<TextView
   android:id="@+id/passwordLabel" ...
   android:text="@string/password
   android:labelFor="@+id/passwordEntry" />

<EditText
   android:id="@+id/passwordEntry"
   android:inputType="textPassword" ... />

किसी कलेक्शन में मौजूद एलिमेंट

कलेक्शन के एलिमेंट में लेबल जोड़ते समय, हर लेबल यूनीक होना चाहिए. इस तरह, सिस्टम की सुलभता सेवाएं, लेबल की सूचना देते समय स्क्रीन पर मौजूद सिर्फ़ एक एलिमेंट का रेफ़रंस दे सकती हैं. इस जानकारी से उपयोगकर्ताओं को यह पता चलता है कि वे यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों पर कब जा रहे हैं या उन्होंने पहले से खोजे गए किसी एलिमेंट पर फ़ोकस कब किया.

खास तौर पर, दोबारा इस्तेमाल किए गए लेआउट में मौजूद एलिमेंट में अतिरिक्त टेक्स्ट या कॉन्टेक्स्ट के हिसाब से जानकारी शामिल करें. जैसे, RecyclerView ऑब्जेक्ट. इससे हर चाइल्ड एलिमेंट की पहचान अलग से की जा सकेगी.

इसके लिए, अडैप्टर लागू करते समय कॉन्टेंट का ब्यौरा सेट करें. इसे यहां दिए गए कोड स्निपेट में दिखाया गया है:

data class MovieRating(val title: String, val starRating: Integer)

class MyMovieRatingsAdapter(private val myData: Array<MovieRating>):
        RecyclerView.Adapter<MyMovieRatingsAdapter.MyRatingViewHolder>() {

    class MyRatingViewHolder(val ratingView: ImageView) :
            RecyclerView.ViewHolder(ratingView)

    override fun onBindViewHolder(holder: MyRatingViewHolder, position: Int) {
        val ratingData = myData[position]
        holder.ratingView.contentDescription = "Movie ${position}: " +
                "${ratingData.title}, ${ratingData.starRating} stars"
    }
}

public class MovieRating {
    private String title;
    private int starRating;
    // ...
    public String getTitle() { return title; }
    public int getStarRating() { return starRating; }
}

public class MyMovieRatingsAdapter
        extends RecyclerView.Adapter<MyAdapter.MyRatingViewHolder> {
    private MovieRating[] myData;


    public static class MyRatingViewHolder extends RecyclerView.ViewHolder {
        public ImageView ratingView;
        public MyRatingViewHolder(ImageView iv) {
            super(iv);
            ratingView = iv;
        }
    }

    @Override
    public void onBindViewHolder(MyRatingViewHolder holder, int position) {
        MovieRating ratingData = myData[position];
        holder.ratingView.setContentDescription("Movie " + position + ": " +
                ratingData.getTitle() + ", " + ratingData.getStarRating() +
                " stars")
    }
}

मिलते-जुलते कॉन्टेंट के ग्रुप

अगर आपका ऐप्लिकेशन कई यूज़र इंटरफ़ेस (यूआई) एलिमेंट दिखाता है जो एक नैचुरल ग्रुप बनाते हैं, जैसे कि किसी गाने की जानकारी या किसी मैसेज के एट्रिब्यूट, तो इन एलिमेंट को किसी कंटेनर में व्यवस्थित करें. यह कंटेनर आम तौर पर ViewGroup का सबक्लास होता है. कंटेनर ऑब्जेक्ट के android:screenReaderFocusable एट्रिब्यूट को true पर सेट करें. साथ ही, हर इनर ऑब्जेक्ट के android:focusable एट्रिब्यूट को false पर सेट करें. इस तरह, सुलभता सेवाएं एक ही सूचना में, अंदरूनी एलिमेंट के कॉन्टेंट के ब्यौरे को एक के बाद एक दिखा सकती हैं. मिलते-जुलते एलिमेंट को एक साथ रखने से, सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों को स्क्रीन पर मौजूद जानकारी को बेहतर तरीके से समझने में मदद मिलती है.

यहां दिए गए स्निपेट में, एक-दूसरे से जुड़े कॉन्टेंट के हिस्से शामिल हैं. इसलिए, कंटेनर एलिमेंट, ConstraintLayout का एक इंस्टेंस है. इसके android:screenReaderFocusable एट्रिब्यूट को true पर सेट किया गया है. साथ ही, अंदर मौजूद TextView एलिमेंट के android:focusable एट्रिब्यूट को false पर सेट किया गया है:

<!-- In response to a single user interaction, accessibility services announce
     both the title and the artist of the song. -->
<ConstraintLayout
    android:id="@+id/song_data_container" ...
    android:screenReaderFocusable="true">

    <TextView
        android:id="@+id/song_title" ...
        android:focusable="false"
        android:text="@string/my_song_title" />
    <TextView
        android:id="@+id/song_artist"
        android:focusable="false"
        android:text="@string/my_songwriter" />
</ConstraintLayout>

सुलभता सेवाएं, इनर एलिमेंट के ब्यौरे को एक ही बार में बोलकर सुनाती हैं. इसलिए, हर ब्यौरे को कम से कम शब्दों में रखना ज़रूरी है. हालांकि, ऐसा करते समय एलिमेंट का मतलब भी समझ में आना चाहिए.

नेस्टेड ग्रुप

अगर आपके ऐप्लिकेशन के इंटरफ़ेस में कई तरह की जानकारी मौजूद है, जैसे कि त्योहार के इवेंट की दिन के हिसाब से सूची, तो इनर ग्रुप कंटेनर पर android:screenReaderFocusable एट्रिब्यूट का इस्तेमाल करें. लेबलिंग की इस स्कीम से, स्क्रीन के कॉन्टेंट के बारे में पता लगाने के लिए ज़रूरी सूचनाओं की संख्या और हर सूचना की अवधि के बीच सही संतुलन मिलता है.

यहां दिए गए कोड स्निपेट में, बड़े ग्रुप के अंदर मौजूद ग्रुप को लेबल करने का एक तरीका दिखाया गया है:

<!-- In response to a single user interaction, accessibility services
     announce the events for a single stage only. -->
<ConstraintLayout
    android:id="@+id/festival_event_table" ... >
    <ConstraintLayout
        android:id="@+id/stage_a_event_column"
        android:screenReaderFocusable="true">

        <!-- UI elements that describe the events on Stage A. -->

    </ConstraintLayout>
    <ConstraintLayout
        android:id="@+id/stage_b_event_column"
        android:screenReaderFocusable="true">

        <!-- UI elements that describe the events on Stage B. -->

    </ConstraintLayout>
</ConstraintLayout>

टेक्स्ट में मौजूद हेडिंग

कुछ ऐप्लिकेशन, स्क्रीन पर दिखने वाले टेक्स्ट के ग्रुप की खास जानकारी देने के लिए हेडिंग का इस्तेमाल करते हैं. अगर कोई View एलिमेंट हेडिंग दिखाता है, तो सुलभता सेवाओं के लिए उसके मकसद के बारे में बताया जा सकता है. इसके लिए, एलिमेंट के android:accessibilityHeading एट्रिब्यूट को true पर सेट करें.

सुलभता सेवाओं का इस्तेमाल करने वाले लोग, पैराग्राफ़ या शब्दों के बजाय हेडिंग के बीच नेविगेट करने का विकल्प चुन सकते हैं. इस सुविधा से, टेक्स्ट नेविगेशन का अनुभव बेहतर होता है.

सुलभता पैनल के टाइटल

Android 9 (एपीआई लेवल 28) और इसके बाद के वर्शन में, स्क्रीन के पैन के लिए, सुलभता के हिसाब से टाइटल दिए जा सकते हैं. सुलभता के लिए, किसी विंडो के अलग-अलग हिस्सों को पैन कहा जाता है. जैसे, फ़्रैगमेंट का कॉन्टेंट. सुलभता सेवाओं को किसी पैन की विंडो जैसी सुविधा के बारे में समझने के लिए, अपने ऐप्लिकेशन के पैन को जानकारी देने वाले टाइटल दें. इसके बाद, ऐक्सेसिबिलिटी सेवाएं उपयोगकर्ताओं को ज़्यादा जानकारी दे सकती हैं. यह जानकारी तब दी जाती है, जब किसी पैनल की बनावट या कॉन्टेंट में बदलाव होता है.

किसी पैन का टाइटल तय करने के लिए, android:accessibilityPaneTitle एट्रिब्यूट का इस्तेमाल करें. इसका तरीका इस स्निपेट में दिखाया गया है:

<!-- Accessibility services receive announcements about content changes
     that are scoped to either the "shopping cart view" section (top) or
     "browse items" section (bottom) -->
<MyShoppingCartView
     android:id="@+id/shoppingCartContainer"
     android:accessibilityPaneTitle="@string/shoppingCart" ... />

<MyShoppingBrowseView
     android:id="@+id/browseItemsContainer"
     android:accessibilityPaneTitle="@string/browseProducts" ... />

सजावट वाले एलिमेंट

अगर आपके यूज़र इंटरफ़ेस (यूआई) में कोई एलिमेंट सिर्फ़ विज़ुअल स्पेसिंग या विज़ुअल अपीयरेंस के लिए मौजूद है, तो उसके android:importantForAccessibility एट्रिब्यूट को "no" पर सेट करें.

सुलभता से जुड़ी कार्रवाइयां जोड़ना

यह ज़रूरी है कि सुलभता सेवाओं का इस्तेमाल करने वाले लोग, आपके ऐप्लिकेशन में सभी उपयोगकर्ता फ़्लो आसानी से पूरे कर पाएं. उदाहरण के लिए, अगर कोई व्यक्ति सूची में किसी आइटम पर स्वाइप कर सकता है, तो इस कार्रवाई को सुलभता सेवाओं के लिए भी उपलब्ध कराया जा सकता है. इससे लोगों को एक ही उपयोगकर्ता फ़्लो को पूरा करने का दूसरा तरीका मिल जाता है.

सभी कार्रवाइयों को ऐक्सेस करने की सुविधा देना

TalkBack, Voice Access या Switch Access का इस्तेमाल करने वाले व्यक्ति को, ऐप्लिकेशन में कुछ उपयोगकर्ता फ़्लो पूरे करने के लिए, दूसरे तरीकों की ज़रूरत पड़ सकती है. हाथों के जेस्चर से जुड़ी कार्रवाइयों, जैसे कि खींचकर छोड़ना या स्वाइप करने के लिए, आपका ऐप्लिकेशन कार्रवाइयों को इस तरह से दिखा सकता है कि वे सुलभता सेवाओं का इस्तेमाल करने वाले लोगों के लिए ऐक्सेस की जा सकें.

सुलभता कार्रवाइयों का इस्तेमाल करके, ऐप्लिकेशन उपयोगकर्ताओं को कोई कार्रवाई पूरी करने के अन्य तरीके उपलब्ध करा सकता है.

उदाहरण के लिए, अगर आपका ऐप्लिकेशन उपयोगकर्ताओं को किसी आइटम पर स्वाइप करने की अनुमति देता है, तो आपके पास इस सुविधा को सुलभता से जुड़ी कस्टम कार्रवाई के ज़रिए भी उपलब्ध कराने का विकल्प होता है. जैसे:

ViewCompat.addAccessibilityAction(
    // View to add accessibility action
    itemView,
    // Label surfaced to user by an accessibility service
    getText(R.id.archive)
) { _, _ ->
    // Same method executed when swiping on itemView
    archiveItem()
    true
}

ViewCompat.addAccessibilityAction(
    // View to add accessibility action
    itemView,
    // Label surfaced to user by an accessibility service
    getText(R.id.archive),
    (view, arguments) -> {
        // Same method executed when swiping on itemView
        archiveItem();
        return true;
    }
);

With the custom accessibility action implemented, users can access the action through the actions menu.

Make available actions understandable

When a view supports actions such as touch & hold, an accessibility service such as TalkBack announces it as "Double tap and hold to long press."

This generic announcement doesn't give the user any context about what a touch & hold action does.

To make this announcement more descriptive, you can replace the accessibility action’s announcement like so:

ViewCompat.replaceAccessibilityAction(
    // View that contains touch & hold action
    itemView,
    AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_LONG_CLICK,
    // Announcement read by TalkBack to surface this action
    getText(R.string.favorite),
    null
)

ViewCompat.replaceAccessibilityAction(
    // View that contains touch & hold action
    itemView,
    AccessibilityNodeInfoCompat.AccessibilityActionCompat.ACTION_LONG_CLICK,
    // Announcement read by TalkBack to surface this action
    getText(R.string.favorite),
    null
);

This results in TalkBack announcing "Double tap and hold to favorite," helping users understand the purpose of the action.

Extend system widgets

This section uses the example of implementing a special type of Switch called TriSwitch while following best practices around extending system widgets. A TriSwitch object works similarly to a Switch object, except that each instance of TriSwitch allows the user to toggle among three possible states.

Extend from far down the class hierarchy

The Switch object inherits from several framework UI classes in its hierarchy:

View
↳ TextView
  ↳ Button
    ↳ CompoundButton
      ↳ Switch

नई TriSwitch क्लास को सीधे Switch क्लास से एक्सटेंड करना सबसे अच्छा होता है. इस तरह, Android सुलभता फ़्रेमवर्क, TriSwitch क्लास को सुलभता से जुड़ी ज़्यादातर सुविधाएं उपलब्ध कराता है:

• ऐक्सेसिबिलिटी से जुड़ी कार्रवाइयां: सिस्टम के लिए जानकारी कि ऐक्सेसिबिलिटी सेवाएं, TriSwitch ऑब्जेक्ट पर की गई हर संभावित उपयोगकर्ता इनपुट की नकल कैसे कर सकती हैं. (View से इनहेरिट की गई.)
• सुलभता इवेंट: सुलभता सेवाओं के लिए जानकारी. इसमें यह बताया जाता है कि स्क्रीन रीफ़्रेश या अपडेट होने पर, TriSwitch ऑब्जेक्ट की उपस्थिति में किस तरह से बदलाव हो सकता है. (View से इनहेरिट की गई.)
• खासियतें: हर TriSwitch ऑब्जेक्ट के बारे में जानकारी. जैसे, उसमें दिखने वाले टेक्स्ट का कॉन्टेंट. (TextView से इनहेरिट की गई.)
• स्टेट की जानकारी: TriSwitch ऑब्जेक्ट की मौजूदा स्थिति के बारे में जानकारी. जैसे, "चुना गया" या "नहीं चुना गया". (CompoundButton से इनहेरिट की गई.)
• स्टेट का टेक्स्ट वाला ब्यौरा: टेक्स्ट के आधार पर यह जानकारी कि हर स्टेट का क्या मतलब है. (Switch से इनहेरिट की गई.)

Switch और इसकी सुपरक्लास का यह व्यवहार, TriSwitch ऑब्जेक्ट के लिए लगभग एक जैसा होता है. इसलिए, लागू करने के दौरान, दो के बजाय तीन संभावित स्थितियों को शामिल किया जा सकता है.

कस्टम इवेंट तय करना

सिस्टम विजेट को बढ़ाने पर, इस बात की संभावना होती है कि आपने इस विजेट के साथ लोगों के इंटरैक्ट करने के तरीके में बदलाव किया हो. इन इंटरैक्शन में हुए बदलावों को तय करना ज़रूरी है, ताकि सुलभता सेवाएं आपके ऐप्लिकेशन के विजेट को इस तरह अपडेट कर सकें जैसे उपयोगकर्ता सीधे तौर पर विजेट के साथ इंटरैक्ट करता है.

सामान्य दिशा-निर्देश यह है कि व्यू पर आधारित हर उस कॉलबैक के लिए जिसे आपने बदला है, आपको ViewCompat.replaceAccessibilityAction() को बदलकर, सुलभता से जुड़ी कार्रवाई को फिर से तय करना होगा. अपने ऐप्लिकेशन के टेस्ट में, फिर से तय की गई इन कार्रवाइयों के व्यवहार की पुष्टि की जा सकती है. इसके लिए, ViewCompat.performAccessibilityAction() को कॉल करें.

यह सिद्धांत, TriSwitch ऑब्जेक्ट के लिए कैसे काम कर सकता है

सामान्य Switch ऑब्जेक्ट के उलट, TriSwitch ऑब्जेक्ट पर टैप करने से तीन संभावित स्थितियां दिखती हैं. इसलिए, इससे जुड़ी ACTION_CLICK की सुलभता से जुड़ी कार्रवाई को अपडेट करना ज़रूरी है:

class TriSwitch(context: Context) : Switch(context) {
    // 0, 1, or 2
    var currentState: Int = 0
        private set

    init {
        updateAccessibilityActions()
    }

    private fun updateAccessibilityActions() {
        ViewCompat.replaceAccessibilityAction(this, ACTION_CLICK,
            action-label) {
            view, args -> moveToNextState()
        })
    }

    private fun moveToNextState() {
        currentState = (currentState + 1) % 3
    }
}

public class TriSwitch extends Switch {
    // 0, 1, or 2
    private int currentState;

    public int getCurrentState() {
        return currentState;
    }

    public TriSwitch() {
        updateAccessibilityActions();
    }

    private void updateAccessibilityActions() {
        ViewCompat.replaceAccessibilityAction(this, ACTION_CLICK,
            action-label, (view, args) -> moveToNextState());
    }

    private void moveToNextState() {
        currentState = (currentState + 1) % 3;
    }
}

अन्य संसाधन

अपने ऐप्लिकेशन को ज़्यादा से ज़्यादा लोगों तक पहुंचाने के बारे में ज़्यादा जानने के लिए, यहां दिए गए अतिरिक्त संसाधन देखें:

कोडलैब

• Android पर सुलभता सुविधाएं लागू करना

ब्लॉग पोस्ट

• सुलभता: क्या आपने सभी उपयोगकर्ताओं को सेवा दी है?