Prinsip-prinsip untuk meningkatkan aksesibilitas aplikasi

Beberapa orang yang menggunakan perangkat Android memiliki kebutuhan aksesibilitas yang berbeda dengan yang lainnya. Untuk membantu kelompok tertentu yang sama-sama membutuhkan fitur aksesibilitas, framework Android menyediakan kemampuan bagi developer untuk membuat layanan aksesibilitas, yang menyajikan konten aplikasi kepada mereka dan mengoperasikan aplikasi atas nama mereka.

Android menyediakan beberapa layanan aksesibilitas sistem, termasuk:

TalkBack: Membantu orang-orang yang memiliki gangguan penglihatan atau tunanetra. Mengumumkan konten melalui suara yang disintesis, dan melakukan tindakan pada aplikasi sebagai respons atas gestur pengguna.
Tombol Akses: Membantu orang-orang yang memiliki gangguan motorik. Menandai elemen interaktif, dan melakukan tindakan sebagai respons terhadap pengguna yang menekan tombol. Memungkinkan pengontrolan perangkat, hanya dengan 1 atau 2 tombol.

Untuk membantu pengguna yang membutuhkan fitur aksesibilitas agar dapat menggunakan aplikasi Anda, aplikasi Anda harus mengikuti praktik terbaik yang dijelaskan di halaman ini, yang disusun berdasarkan panduan utama sebagaimana tercantum dalam Menjadikan aplikasi lebih mudah diakses.

Setiap praktik terbaik berikut dapat makin meningkatkan aksesibilitas aplikasi Anda:

Elemen label: Pengguna harus dapat memahami konten dan tujuan setiap elemen UI yang interaktif dan bermanfaat dalam aplikasi Anda.
Menggunakan atau memperluas widget sistem: Buat elemen tampilan yang disertakan oleh framework, bukan tampilan kustom Anda sendiri. Class tampilan dan widget framework sudah menyediakan sebagian besar kemampuan aksesibilitas yang dibutuhkan aplikasi Anda.
Menggunakan isyarat selain warna: Pengguna harus dapat membedakan kategori elemen dalam UI dengan jelas. Untuk melakukannya, gunakan pola dan posisi serta warna untuk menunjukkan perbedaannya.
Menjadikan konten media lebih mudah diakses: Coba tambahkan deskripsi pada konten video atau audio aplikasi Anda, agar pengguna yang menikmati konten tersebut tidak perlu sepenuhnya mengandalkan isyarat visual atau aura.

Elemen label

Penting untuk menyediakan label yang deskriptif dan berguna kepada pengguna di setiap elemen UI interaktif aplikasi Anda. Setiap label harus menjelaskan arti dan tujuan elemen tertentu. Pembaca layar seperti TalkBack dapat membacakan label ini kepada pengguna yang mengandalkan layanan ini.

Umumnya, Anda menentukan deskripsi elemen UI tertentu dalam file resource tata letak yang berisi elemen ini. Meskipun biasanya Anda menambahkan label menggunakan atribut contentDescription seperti dijelaskan dalam panduan menjadikan aplikasi lebih mudah diakses, ada beberapa teknik pelabelan lain yang perlu diperhatikan, seperti dijelaskan di bagian berikut ini.

Elemen yang dapat diedit

Saat melabeli elemen yang dapat diedit, seperti objek EditText, sebaiknya tampilkan teks yang memberikan contoh input yang valid dalam elemen itu sendiri, selain menjadikan teks contoh ini tersedia bagi pembaca layar. Dalam situasi ini, Anda dapat menggunakan atribut android:hint, seperti ditunjukkan dalam cuplikan berikut:

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

Dalam situasi ini, objek View harus memiliki atribut android:labelFor-nya yang disetel ke ID elemen EditText. Untuk detail selengkapnya, lihat bagian yang menjelaskan cara menyambungkan label elemen yang salah satunya mendeskripsikan elemen lainnya.

Menyambungkan elemen yang salah satunya mendeskripsikan elemen lainnya

Sudah umum bagi elemen EditText untuk memiliki objek View yang sesuai dan mendeskripsikan konten yang harus dimasukkan pengguna dalam elemen EditText. Pada perangkat yang menjalankan Android 4.2 (API level 17) atau yang lebih tinggi, Anda dapat menunjukkan hubungan ini dengan menyetel atribut android:labelFor objek View.

Contoh pelabelan untuk pasangan elemen tersebut ditunjukkan pada cuplikan berikut:


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

Elemen dalam koleksi

Saat menambahkan label ke elemen koleksi, setiap label harus unik. Dengan begitu, layanan aksesibilitas sistem dapat merujuk dengan tepat ke satu elemen di layar saat membacakan label. Hubungan ini memberi tahu pengguna kapan mereka menjelajahi UI atau kapan mereka memindahkan fokus ke elemen yang sudah mereka temukan.

Secara khusus, Anda harus menyertakan teks tambahan atau informasi kontekstual di elemen dalam tata letak yang digunakan kembali, seperti objek RecyclerView, sehingga setiap elemen turunannya diidentifikasi secara unik.

Untuk melakukannya, setel deskripsi konten sebagai bagian dari implementasi adaptor Anda, seperti ditunjukkan dalam cuplikan kode berikut:

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

Grup konten terkait

Jika aplikasi Anda menampilkan beberapa elemen UI yang membentuk grup secara otomatis, seperti detail lagu atau atribut pesan, atur elemen tersebut dalam container, yang umumnya merupakan subclass ViewGroup. Setel atribut android:screenReaderFocusable objek container ke true, dan setiap atribut android:focusable objek inti ke false. Dengan demikian, layanan aksesibilitas dapat menyajikan deskripsi konten elemen inti, satu per satu, dalam satu pembacaan. Dengan menggabungkan elemen terkait ini, pengguna teknologi pendukung dapat menemukan informasi yang ada di layar dengan lebih efisien.

Cuplikan berikut berisi bagian konten yang terkait satu sama lain, sehingga elemen container, instance ConstraintLayout, memiliki atribut android:screenReaderFocusable yang disetel ke true, dan setiap elemen TextView inti memiliki atribut android:focusable yang disetel ke 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>

Karena layanan aksesibilitas membacakan deskripsi elemen inti dalam satu kalimat, penting untuk membuat setiap deskripsi sesingkat mungkin tetapi tetap menyampaikan maksud elemen tersebut.

Label grup kustom

Jika diinginkan, Anda dapat mengganti pengelompokan dan pengurutan default platform untuk deskripsi elemen inti grup dengan memberikan deskripsi konten untuk grup tersebut.

Cuplikan berikut menampilkan contoh deskripsi grup yang disesuaikan:

<!-- In response to a single user interaction, accessibility services
     announce the custom content description for the group. -->
<ConstraintLayout
    android:id="@+id/song_data_container" ...
    android:screenReaderFocusable="true"
    android:contentDescription="@string/title_artist_best_song">

    <TextView
        android:id="@+id/song_title" ...

        <!-- Content ignored by accessibility services -->
        android:text="@string/my_song_title" />
    <TextView
        android:id="@+id/song_artist"

        <!-- Content ignored by accessibility services -->
        android:text="@string/my_songwriter" />
</ConstraintLayout>

Grup bertingkat

Jika antarmuka aplikasi Anda menyajikan informasi multi-dimensi, seperti daftar acara festival harian, gunakan atribut android:screenReaderFocusable pada container grup inti. Skema pelabelan ini memberikan keseimbangan yang baik antara jumlah pembacaan yang diperlukan untuk menemukan konten layar dan durasi setiap pembacaan.

Cuplikan kode berikut menunjukkan satu metode untuk memberi label pada grup di dalam grup yang lebih besar:

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

Judul dalam teks

Beberapa aplikasi menggunakan judul untuk meringkas grup teks yang muncul di layar. Jika elemen View tertentu merepresentasikan judul, Anda dapat menunjukkan tujuan judul tersebut untuk layanan aksesibilitas dengan menyetel atribut android:accessibilityHeading elemen ke true.

Pengguna layanan aksesibilitas dapat memilih untuk memilih opsi navigasi antar-judul, bukan antar-paragraf atau antar-kata. Fleksibilitas ini akan meningkatkan pengalaman navigasi teks.

Di Android 9 (API level 28) dan yang lebih tinggi, Anda dapat memberikan judul yang mudah diakses untuk panel layar. Untuk tujuan aksesibilitas, panel adalah bagian jendela dengan tampilan visual yang mencolok, seperti konten suatu fragmen. Agar layanan aksesibilitas dapat memahami perilaku seperti jendela di panel, Anda harus memberikan judul yang deskriptif pada panel aplikasi Anda. Selanjutnya, layanan aksesibilitas dapat memberikan informasi yang lebih terperinci kepada pengguna saat tampilan atau konten panel berubah.

Untuk menentukan judul panel, gunakan atribut android:accessibilityPaneTitle, seperti ditampilkan dalam cuplikan berikut:

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

Elemen dekoratif

Jika elemen di UI Anda hanya ada untuk spacing visual atau tujuan tampilan visual, setel atribut android:contentDescription ke "null".

Jika aplikasi Anda hanya mendukung perangkat yang menjalankan Android 4.1 (API level 16) atau yang lebih tinggi, Anda dapat menyetel atribut android:importantForAccessibility elemen-elemen dekoratif ini ke "no".

Memperluas widget sistem

Poin penting: Saat Anda mendesain UI aplikasi, gunakan atau perluas widget yang disediakan sistem dengan hierarki class Android serendah mungkin. Widget yang disediakan sistem dengan hierarki paling rendah sudah memiliki sebagian besar kemampuan aksesibilitas yang dibutuhkan aplikasi Anda. Memperluas widget yang disediakan sistem ini lebih mudah daripada membuat widget sendiri dari class View, ViewCompat, Canvas, dan CanvasCompat yang lebih umum.

Jika Anda harus memperluas View atau Canvas secara langsung, yang mungkin diperlukan untuk pengalaman yang sangat disesuaikan atau untuk tingkat game, lihat Menjadikan tampilan kustom lebih mudah diakses.

Bagian ini akan menjelaskan cara mengimplementasikan jenis khusus Switch yang disebut TriSwitch. Cara kerja objek TriSwitch mirip dengan objek Switch, kecuali bahwa setiap instance TriSwitch memungkinkan pengguna berganti-ganti di antara 3 kemungkinan status.

Memperluas dari hierarki class paling rendah

Objek Switch mewarisi beberapa class UI framework dalam hierarki-nya:

View
↳ TextView
  ↳ Button
    ↳ CompoundButton
      ↳ Switch

Sebaiknya class TriSwitch yang baru diperluas secara langsung dari class Switch. Dengan demikian, framework aksesibilitas Android menyediakan sebagian besar kemampuan aksesibilitas yang diperlukan class TriSwitch:

Tindakan aksesibilitas: Memberi tahu sistem cara layanan aksesibilitas mengemulasi setiap kemungkinan masukan pengguna yang dijalankan pada objek TriSwitch. (Diwarisi dari View.)
Peristiwa aksesibilitas: Memberi tahu layanan aksesibilitas tentang setiap kemungkinan cara agar tampilan objek TriSwitch dapat berubah saat layar dimuat ulang atau diperbarui. (Diwarisi dari View.)
Karakteristik: Detail setiap objek TriSwitch, seperti konten teks yang ditampilkannya. (Diwarisi dari TextView.)
Informasi status: Deskripsi tentang status objek TriSwitch saat ini, misalnya "dicentang" atau "tidak dicentang". (Diwarisi dari CompoundButton.)
Deskripsi teks tentang status: Penjelasan berbasis teks tentang apa yang direpresentasikan oleh setiap status. (Diwarisi dari Switch.)

Perilaku gabungan ini, dari Switch dan superclass-nya, hampir sama dengan perilaku yang diinginkan objek TriSwitch. Oleh karena itu, implementasi Anda dapat berfokus pada perluasan jumlah kemungkinan status dari 2 hingga 3.

Menentukan peristiwa kustom

Saat Anda memperluas widget sistem, Anda mungkin mengubah aspek tentang cara pengguna berinteraksi dengan widget tersebut. Penting untuk menentukan perubahan interaksi ini agar layanan aksesibilitas dapat memperbarui widget aplikasi Anda seolah-olah pengguna berinteraksi dengan widget secara langsung.

Pedoman umumnya adalah, untuk setiap callback berbasis tampilan yang Anda ganti, Anda juga perlu menentukan ulang tindakan aksesibilitas yang sesuai dengan mengganti ViewCompat.replaceAccessibilityAction(). Dalam pengujian aplikasi, Anda dapat memvalidasi perilaku tindakan yang dtentukan ulang tersebut dengan memanggil ViewCompat.performAccessibilityAction().

Cara kerja prinsip ini untuk objek TriSwitch

Tidak seperti objek Switch biasa, mengetuk siklus objek TriSwitch akan mengalami siklus lewat 3 kemungkinan status. Oleh karena itu, tindakan aksesibilitas ACTION_CLICK yang terkait perlu diperbarui:

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

Menggunakan isyarat selain warna

Untuk membantu pengguna yang mengalami kekurangan daya penglihatan terhadap warna, gunakan isyarat selain warna untuk membedakan elemen UI dalam layar aplikasi Anda. Teknik ini dapat mencakup penggunaan berbagai bentuk atau ukuran, penyediaan pola teks atau visual, atau penambahan info berbasis audio atau sentuhan (info via sentuhan) untuk menandai perbedaan elemen.

Gambar 1 menunjukkan dua versi aktivitas. Versi pertama hanya menggunakan warna untuk membedakan antara dua kemungkinan tindakan dalam alur kerja. Versi kedua menggunakan praktik terbaik yang menyertakan bentuk dan teks selain warna untuk menandai perbedaan antara kedua opsi tersebut:

**Gambar 1**: Contoh pembuatan elemen UI yang hanya menggunakan warna (kiri) dan yang menggunakan warna, bentuk, serta teks (kanan)

Menjadikan konten media lebih mudah diakses

Jika Anda mengembangkan aplikasi yang menyertakan konten media, seperti klip video atau rekaman audio, coba dukung pengguna dengan berbagai jenis aksesibilitas yang diperlukan untuk memahami materi ini. Secara khusus, sebaiknya Anda melakukan hal-hal berikut:

Sertakan kontrol yang memungkinkan pengguna menjeda atau menghentikan media, mengubah volume, dan mengaktifkan atau menonaktifkan subtitel (teks).
Jika video menyajikan informasi yang penting untuk menyelesaikan alur kerja, berikan konten yang sama dalam format alternatif, seperti transkrip.

Referensi tambahan

Untuk mempelajari lebih lanjut cara menjadikan aplikasi lebih mudah diakses, lihat referensi tambahan berikut:

Codelab

Aksesibilitas Android Dasar

Postingan blog

Aksesibilitas: Apakah Anda Melayani Semua Pengguna Anda?

Prinsip-prinsip untuk meningkatkan aksesibilitas aplikasi

Elemen label

Elemen yang dapat diedit

Menyambungkan elemen yang salah satunya mendeskripsikan elemen lainnya

Elemen dalam koleksi

Kotlin

Java

Grup konten terkait

Label grup kustom

Grup bertingkat

Judul dalam teks

Judul panel aksesibilitas

Elemen dekoratif

Memperluas widget sistem

Memperluas dari hierarki class paling rendah

Menentukan peristiwa kustom

Cara kerja prinsip ini untuk objek TriSwitch

Kotlin

Java

Menggunakan isyarat selain warna

Menjadikan konten media lebih mudah diakses

Referensi tambahan

Codelab

Postingan blog