Uygulama erişilebilirliğini iyileştirme ilkeleri

Android çerçevesi, erişilebilirlik ihtiyaçları olan kullanıcılara yardımcı olmak için Uygulamalardan kullanıcılara içerik sunabilen bir erişilebilirlik hizmeti oluşturma ve uygulamaları bunlar adına işletiyor.

Android, aşağıdakiler de dahil olmak üzere çeşitli sistem erişilebilirlik hizmetleri sağlar:

  • TalkBack: az gören veya görme engelli kişilere yardımcı olur. İçerikleri sentezlenmiş ses ve kullanıcının hareketlerine yanıt olarak uygulamada işlemler gerçekleştirir.
  • Anahtar Erişimi: bedensel engelli kişilere yardımcı olur. Etkileşimli öğeleri vurgular kullanıcının bir düğmeye basmasına karşılık olarak işlemler gerçekleştirir. Tüm görevleri yalnızca bir veya iki düğme kullanarak cihazı kontrol etmek.

Erişilebilirlik ihtiyacı olan kişilerin uygulamanızı başarılı bir şekilde kullanmalarına yardımcı olmak için uygulamanız, bu sayfada açıklanan ve Uygulamaları daha iyi hale getirmek için erişilebilir.

Sonraki bölümlerde açıklanan bu en iyi uygulamaların her biri, uygulamanızın erişilebilirliğini daha da iyileştirebilir:

Etiket öğeleri
Kullanıcılar her bir etkileşimin içeriğini ve amacını anlayabilmelidir ve anlamlı bir kullanıcı arayüzü öğesi oluşturmak önemlidir.
Erişilebilirlik işlemleri ekleme
Erişilebilirlik işlemleri ekleyerek erişilebilirlik kullanıcılarının en önemli kullanıcı akışlarını tamamlamaya yardımcı olur.
Sistem widget'larını genişletme
Bunun yerine, çerçevenin içerdiği görünüm öğelerini özel görünümlerinizi oluşturabilirsiniz. Çerçevenin görünüm ve widget sınıfları zaten uygulamanızın ihtiyaç duyduğu erişilebilirlik özelliklerinin çoğunu sağlar.
Renk dışında ipuçları kullanma
Kullanıcılar, Google Görüntülü Reklam Ağı'ndaki öğe kategorilerini kullanıcı arayüzü. Bunun için, renklerin yanı sıra desenleri ve konumu kullanarak bunları ifade edin. gösterir.
Medya içeriğini daha erişilebilir hale getirme
Uygulamanızın video veya ses içeriğine açıklama ekleyerek kullanıcıların Bu sayede, izleyicilerin yalnızca görsel veya işitsel işaretlere dayalı olması gerekmez.

Etiket öğeleri

Her bir öğe için kullanıcılara kullanışlı ve açıklayıcı etiketler sağlamanız önemlidir. etkileşimli kullanıcı arayüzü öğesi sağlar. Her etiket, ilgili öğenin anlamını ve amacına hizmet eder. TalkBack gibi ekran okuyucular duyurabilir kullanıcılara hatırlatırız.

Çoğu durumda, düzende bir kullanıcı arayüzü öğesinin açıklamasını belirtirsiniz öğesini içeren bir kaynak dosyasıdır. Etiketleri genellikle contentDescription özelliğini, uygulama geliştirme rehberinde açıklandığı gibi daha erişilebilir. Orada aşağıdaki bölümlerde açıklanan diğer birkaç etiketleme tekniğidir.

Düzenlenebilir öğeler

Örneğin, düzenlenebilir öğeleri etiketlerken EditText nesne; öğenin kendisinde geçerli bir giriş örneği veren metin Böylece bu örnek metni ekran okuyucuların kullanımına sunabilirsiniz. Böyle durumlarda aşağıdaki snippet'te gösterildiği gibi android:hint özelliğini kullanabilir:

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

Bu durumda, View nesnesinin android:labelFor özelliği olmalıdır EditText öğesinin kimliğine ayarlanır. Daha fazla bilgi için aşağıdakilere göz atın bölümüne ekleyin.

Birinin diğerini tanımladığı öğe çiftleri

EditText öğesine karşılık gelen bir Kullanıcıların neler yapması gerektiğini açıklayan View nesnesi EditText öğesini girin. Bu ilişkiyi View nesnesinin android:labelFor özelliği.

Bu tür öğe çiftlerini etiketlemeye ilişkin bir örnek aşağıdaki snippet'te gösterilmiştir:

<!-- 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" ... />

Koleksiyondaki öğeler

Bir koleksiyonun öğelerine etiket eklerken her etiketin benzersiz olması gerekir. Böylece, sistemin erişilebilirlik hizmetleri ekranda tam olarak bir tane referans öğesini kullanın. Bu yazışma, kullanıcıların ne zaman kullanıcı arayüzünde veya odağı başka bir öğeye taşıdıklarında keşfetmiştim.

Özellikle, ek metin veya bağlamsal bilgiler dahil edin. öğeler (örneğin, RecyclerView Böylece her bir alt öğe benzersiz bir şekilde tanımlanır.

Bunu yapmak için bağdaştırıcı uygulamanızın bir parçası olarak içerik açıklamasını aşağıdaki gibi ayarlayın: aşağıdaki kod snippet'inde gösterilmektedir:

Kotlin

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"
    }
}

Java

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")
    }
}

İlgili içerik grupları

Uygulamanız doğal bir grup oluşturan çeşitli kullanıcı arayüzü öğeleri görüntülüyorsa, örneğin bir şarkının ayrıntılarını veya bir mesajın özelliklerini göstermek, bu öğeleri kapsayıcısıdır. Bu genellikle ViewGroup öğesinin bir alt sınıfıdır. Kapsayıcıyı ayarlama nesnenin android:screenReaderFocusable özelliğini true ve her bir iç nesnenin android:focusable özelliğini false ile ilişkilendirin. Bu şekilde erişilebilirlik hizmetleri iç mekandaki öğeler" içerik açıklamalarını tek bir duyuruda sırayla yayınlayabilirsiniz. İlgili öğelerin bu şekilde birleştirilmesi yardımcı teknoloji kullanıcılarına yardımcı olur ekrandaki bilgileri daha verimli bir şekilde keşfetmenizi sağlar.

Aşağıdaki snippet, bir konuyla ilgili içerik bir diğeri ise ConstraintLayout örneği olan kapsayıcı öğesi için android:screenReaderFocusable özelliği true ve iç olarak ayarlandı TextView öğelerinin her birinin android:focusable özelliği 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>

Çünkü erişilebilirlik hizmetleri içindeki öğeleri duyurur açıklamaları her açıklamanın mümkün olduğunca kısa olması hem de öğenin anlamını aktarır.

Not: Genel olarak grup için bir içerik açıklaması oluşturmaktan kaçınarak Bu, grubun açıklamasının kırılgan hale gelmesine neden olur ve bir grup açıklaması görünür metinle eşleşmeyebilir.

Ekran okuyucu, liste ya da ızgara bağlamında bir listenin metnini ya da ızgara öğesinin alt metin düğümlerine uygulanır. Bu alanda değişiklik yapmamanızı duyurulur.

İç içe gruplar

Uygulamanızın arayüzü çok boyutlu bilgiler sunuyorsa (ör. festival etkinliklerinin günlük listesini görmek için android:screenReaderFocusable özelliğini eklemeniz gerekir. Bu etiketleme şeması, ve heyecan verici anları keşfetmek için gerekli duyuru sayısı ve her duyurunun uzunluğuna göre değişebilir.

Aşağıdaki kod snippet'i, daha büyük gruplar:

<!-- 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>

Metin içinde başlıklar

Bazı uygulamalar ekranda görünen metin gruplarını özetlemek için başlıkları kullanır. Eğer belirli bir View öğesi bir başlığı temsil eder. Başlığın amacını belirtebilirsiniz erişilebilirlik hizmetlerine android:accessibilityHeading özelliğini true.

Erişilebilirlik hizmetlerinin kullanıcıları başlıklar arasında gezinmeyi seçebilir anahtar kelimeler arasında geçiş yapın. Bu esneklik, metinde gezinme deneyimi.

Erişilebilirlik bölmesi başlıkları

Android 9 (API düzeyi 28) ve sonraki sürümlerde Ekranın bölmelerinde kullanılabilen erişilebilirlik dostu başlıklar. Erişilebilirlik için açısından, bölme bir pencerenin görsel olarak farklı bir kısmıdır; bir parçanın içeriği hakkında daha fazla bilgi edinin. Erişilebilirlik hizmetlerinin benzer bir davranışa sahip olmasını istiyorsanız, uygulamanızın gezinme bölümüne açıklayıcı bölmeler. Ardından erişilebilirlik hizmetleri, bir bölmenin görünümü veya içeriği değiştiğinde bunu kullanıcılara gösterebilirsiniz.

Bir bölmenin başlığını belirtmek için android:accessibilityPaneTitle özelliğini eklemeniz gerekir:

<!-- 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" ... />

Dekoratif öğeler

Kullanıcı arayüzünüzde yalnızca görsel boşluk veya görsel görünüm için bir öğe varsa amaçlarını belirleyin, android:importantForAccessibility özelliğini "no" olarak değiştirin.

Erişilebilirlik işlemleri ekleyin

Erişilebilirlik hizmetlerini kullananlara, tüm bu ihtiyaçları işlemleri gerçekleştirdik. Örneğin, bir kullanıcı bir Bu işlem erişilebilirlik hizmetlerine de sunulabildiğinden tamamlamanın alternatif bir yolu olabilir.

Tüm işlemleri erişilebilir hale getir

TalkBack kullanıcısı, Sesli Erişim, veya Anahtar Erişimi'nin belirli kullanıcı akışlarını tamamlamak için alternatif yollar olması gerekebilir görebilirsiniz. Sürükleyip bırakma ya da kaydırma gibi hareketlerle ilişkili işlemler için Uygulamanız, Google\u2019ın kullanıcıları tarafından erişilebilen işlemleri erişilebilirlik hizmetleri.

Erişilebilirlik işlemlerini kullanarak Uygulama, kullanıcılara bir işlemi tamamlamaları için alternatif yollar sunabilir.

Örneğin, uygulamanız kullanıcıların bir öğeyi kaydırmasına izin veriyorsa, şunları da yapabilirsiniz: işlevi, aşağıdaki gibi özel bir erişilebilirlik işlemiyle kullanıma sunun:

Kotlin

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
}

Java

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:

Kotlin

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
)

Java

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

Note: When you design your app's UI, use or extend system-provided widgets that are as far down Android's class hierarchy as possible. System-provided widgets that are far down the hierarchy already have most of the accessibility capabilities your app needs. It's easier to extend these system-provided widgets than to create your own from the more generic View, ViewCompat, Canvas, and CanvasCompat classes.

If you must extend View or Canvas directly, which might be necessary for a highly customized experience or a game level, see Make custom views more accessible.

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

Yeni TriSwitch sınıfının doğrudan Switch sınıfından çıkması en iyi seçenektir sınıfını kullanır. Bu şekilde, Android'deki erişilebilirlik çerçeve TriSwitch sınıfının erişilebilirlik özelliklerinin çoğunu sağlar. gereksinimleri:

  • Erişilebilirlik işlemleri: Erişilebilirliğin nasıl sağlanacağıyla ilgili sistem bilgileri hizmetleri, bir TriSwitch üzerinde yapılan her olası kullanıcı girişini emüle edebilir nesnesini tanımlayın. (Devralındığı kaynak: View.)
  • Erişilebilirlik etkinlikleri: Her konuyla ilgili erişilebilirlik hizmetleriyle ilgili bilgiler ekran açıldığında TriSwitch nesnesinin görünümünün değişebilmesinin olası yolu olduğunu unutmayın. (Devralındığı kaynak: View.)
  • Özellikler: Her TriSwitch nesnesiyle ilgili ayrıntılar, örneğin metin içeriğine göre belirlenebilir. (Devralındığı kaynak: TextView.)
  • Durum bilgileri: TriSwitch nesnesinin mevcut durumunun açıklaması örneğin, "işaretli" veya "işareti kaldırıldı". (Devralındığı kaynak: CompoundButton.)
  • Durumun metin açıklaması: Her eyaletin ne olduğuna ilişkin metne dayalı açıklama temsil eder. (Devralındığı kaynak: Switch.)

Switch ve üst sınıflarındaki bu davranış neredeyse aynı davranış TriSwitch nesne için aynıdır. Bu nedenle, uygulamanız mümkün olan durumların sayısını ikiden üçe çıkarmaya odaklanın.

Özel etkinlikleri tanımlama

Bir sistem widget'ının kapsamını genişlettiğinizde kullanıcıların Google Play'de etkileşimde bulunabilirsiniz. Her bir satışın gerçekleşmesini sağlayan bu etkileşim değişikliklerini Böylece erişilebilirlik hizmetleri, uygulamanızın widget'ını kullanıcı widget'la doğrudan etkileşimde bulunur.

Genel bir kural olarak, geçersiz kıldığınız her görüntülemeye dayalı geri çağırma için ayrıca eski URL'leri geçersiz kılarak ilgili erişilebilirlik işlemini ViewCompat.replaceAccessibilityAction(). Uygulamanızın testlerinde, yeniden tanımlanan bu işlemlerin davranışını arama ViewCompat.performAccessibilityAction().

Bu ilke TriSwitch nesneleri için nasıl çalışır?

Sıradan bir Switch nesnesinin aksine, TriSwitch nesnesine dokunduğunuzda döngü üç olası durum. Bu nedenle, ilgili ACTION_CLICK erişilebilirlik özellikleri işlemin güncellenmesi gerekiyor:

Kotlin

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
    }
}

Java

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;
    }
}

Renk dışında ipuçları kullanma

Renk körlüğü olan kullanıcılara yardımcı olmak için renk dışında ipuçları kullanarak Uygulamanızın ekranlarındaki kullanıcı arayüzü öğelerini ayırt edin. Bu teknikler farklı şekil veya boyutlar kullanma, metin veya görsel desenler sağlama, veya ses ya da dokunma tabanlı (dokunsal) geri bildirim ekleyerek öğelerin farklar olabilir.

Şekil 1'de, bir etkinliğin iki versiyonu gösterilmektedir. Bir versiyonda tek renk olan bir iş akışındaki iki olası işlemi birbirinden ayırt etmektir. Diğer sürümde renklerin yanı sıra şekil ve metin de ekleme, iki seçenek arasındaki farkları vurgulayın:

Şekil 1. Yalnızca renk kullanarak kullanıcı arayüzü öğeleri oluşturma örnekleri (solda) ve renk, şekil ve metin kullanarak (sağda).

Medya içeriğini daha erişilebilir hale getirme

Video klip gibi medya içeriği barındıran bir uygulama geliştiriyorsanız veya ses kaydı içeren bir ses kaydı içeren uygulamalar, farklı türlerde erişilebilirlik gereksinimleri. Özellikle, şunları yapmanızı önerir:

  • Kullanıcıların medyayı duraklatmasına veya durdurmasına olanak tanıyan denetimler ekleyin, ve altyazıları açın/kapatın.
  • Videoda bir iş akışını tamamlamak için kritik öneme sahip bilgiler sunuluyorsa Aynı içeriği transkript gibi alternatif bir biçimde sunmalıdır.

Ek kaynaklar

Uygulamanızı daha erişilebilir hale getirme hakkında daha fazla bilgi edinmek için aşağıdaki konulara bakın ek kaynaklar:

Codelab'ler

Blog yayınları