Jetpack Compose Erişebilirlik&UI Test

8 min readMay 31, 2023

Bu yazımızda Erişilebilirlik nedir? Jetpack Compose’da Erişilebilirlik nasıl kullanılır? Erişilebilirlik testi nasıl yazılır? gibi konulara değineceğiz.

Erişilebilirlik Nedir?

Erişilebilirlik, bir yazılımın veya dijital hizmetin, her türlü kullanıcının erişebilmesini ve etkili bir şekilde kullanabilmesini sağlama yeteneğidir. Bu, fiziksel, zihinsel veya duygusal engelleri olan kullanıcılar, yaşlı insanlar veya farklı dil veya kültürel arka planlara sahip insanlar gibi çeşitli kullanıcı gruplarını içerir.

Erişilebilirlik, yazılımın ve dijital hizmetin kullanılabilirliğini artırır ve kullanıcı deneyimini iyileştirir. Aşağıda, erişilebilirliğin önemli bazı yönlerini bulabilirsiniz:

Kapsayıcılık: Erişilebilir bir yazılım, tüm kullanıcılar için kullanılabilir olmasıyla kapsayıcılığı sağlar. Herkesin, yeteneklerine veya engellerine bakılmaksızın, bilgiye, ürünlere veya hizmetlere erişebilmesini sağlar.
Yasal Uyumluluk: Birçok ülkede, erişilebilirlik yasaları veya düzenlemeleri bulunmaktadır. Erişilebilir yazılım geliştirerek, bu yasal gereksinimlere uymak ve olası hukuki sorunları önlemek mümkün olur.
Kullanıcı Deneyimi: Erişilebilirlik, kullanıcıların yazılımı daha etkili ve verimli bir şekilde kullanabilmelerini sağlar. Engelleri olan kullanıcılar için yapılan düzenlemeler, yazılımın kullanıcı dostu arayüzlerini, okunabilirliği, navigasyonu ve etkileşimi iyileştirir.
İyi İtibar ve Müşteri Sadakati: Erişilebilir yazılım, kullanıcılara eşit fırsatlar sunar ve kullanıcıların ihtiyaçlarına duyarlılık gösterir. Bu da marka itibarını artırır ve kullanıcıların sadakatini sağlar.
Piyasa Fırsatları: Erişilebilirlik, yazılımın daha geniş bir kullanıcı tabanına hitap etmesini sağlar. Engelleri olan kullanıcıları hedef alan ürünler, büyük bir pazar potansiyeline sahip olabilir ve rekabet avantajı sağlayabilir.
Sosyal Sorumluluk: Erişilebilir yazılım geliştirmek, sosyal sorumluluk anlayışını yansıtır. Herkesin bilgiye erişimi ve dijital dünyaya katılımı için fırsat eşitliği sağlamak, toplumda daha adil ve kapsayıcı bir ortam oluşturur.

Erişilebilirlik, yazılım geliştirme sürecinin erken aşamalarında düşünülmesi gereken bir unsurdur. Kullanıcıların çeşitli ihtiyaçlarını anlamak ve erişilebilirlik gereksinimlerini karşılamak için uygun tasarım ve teknik çözümler uygulanmalıdır.

Jetpack Compose’da Erişilebilirlik

Jetpack Compose’ın erişilebilirlikle ilgili önemli özellikleri vardır. Bu özellikler arasında aşağıdakiler yer alabilir:

Ekran Okuyucu Desteği: Jetpack Compose, ekran okuyucuları ile uyumlu çalışabilen UI bileşenlerini destekler. Bu, görme engelli kullanıcıların uygulamanızdaki içeriği duyabilmesini sağlar.

Yüksek Kontrast Modu Desteği: Compose, yüksek kontrast modunu otomatik olarak algılayabilir ve uygulamanın bu modda daha iyi görünmesini sağlayabilir. Böylece düşük görme yeteneğine sahip kullanıcılar için daha iyi bir deneyim sunabilirsiniz.

Klavye Navigasyonu ve Odak Yönetimi: Compose, klavye ile gezinmeyi ve etkileşimi kolaylaştıran özelliklere sahiptir. Kullanıcılar, klavye ile bileşenler arasında gezinebilir ve etkileşim kurabilir. Odak yönetimi ile birlikte klavye desteği, erişilebilirliği artırır.

Metin Okunabilirliği ve Büyütme: Jetpack Compose, metinlerin okunabilirliğini iyileştirmek için esnek metin özellikleri sunar. Metin boyutunu, renkini ve kontrastını ayarlamak gibi düzenlemelerle, görme zorluğu olan kullanıcılar için daha iyi bir okuma deneyimi sağlayabilirsiniz.

Jetpack Compose Semantic Nedir?

Jetpack Compose’da “semantik” terimi, UI bileşenlerinin kullanıcı arayüzünde ne anlama geldiğini ve nasıl etkileşime geçileceğini tanımlayan yapısal bilgileri ifade eder. Semantik bilgiler, erişilebilirlik, okunabilirlik ve anlaşılabilirlik gibi önemli faktörleri destekler.

Jetpack Compose, semantik bilgileri sağlamak için aşağıdaki yöntemleri kullanır:

Atama İşaretleri: UI bileşenlerine semantik anlam kazandıran atama işaretleri sağlar. Örneğin, bir Text bileşenine “label” olarak atanan bir metin, kullanıcının metni anlamasına ve doğru şekilde etkileşimde bulunmasına yardımcı olur.
Açıklama İşaretleri: UI bileşenlerine açıklama işaretleri ekleyebilirsiniz. Bu, kullanıcıların bileşenlerin nasıl kullanılacağı ve ne işe yaradığı hakkında daha fazla bilgi sahibi olmalarını sağlar. Örneğin, bir Buttton bileşenine açıklama işareti ekleyerek, kullanıcılara düğmenin işlevi hakkında daha fazla bilgi sunabilirsiniz.
Odak Yönetimi: Semantik bilgiler, odak yönetimiyle de ilişkilidir. Odak, klavye ile gezinme ve etkileşim kurma sürecindeki mevcut konumunu ifade eder. Jetpack Compose, odak yönetimini destekleyerek kullanıcının doğru şekilde etkileşimde bulunmasını sağlar.

Semantik bilgilerin sağlanması, erişilebilirlik açısından önemlidir çünkü kullanıcıların bir bileşeni ne şekilde kullanacaklarını ve ne tür bir etkileşim bekleneceğini anlamalarını sağlar. Aynı zamanda, okunabilirlik ve anlaşılabilirlik açısından da önemlidir, çünkü semantik bilgiler, uygulamanın kullanıcı arayüzünü daha anlaşılır ve kullanıcı dostu hale getirir.

Dokunma Boyutları

Bir kişinin tıklayabileceği, dokunabileceği veya etkileşime geçebileceği herhangi bir ekran öğesi, güvenilir etkileşim için yeterince büyük olmalıdır. Bu öğeleri boyutlandırırken, Materyal Tasarımı Erişilebilirlik Yönergelerini doğru bir şekilde takip etmek için minimum boyutu 48.dp olarak ayarlamamız önerilmektedir.

Material bileşenleri — Checkbox, RadioButton, Switch, Slider ve Surface gibi — bu minimum boyutu içeriden belirler, ancak sadece bileşen kullanıcı eylemlerini alabildiğinde. Örneğin, bir Checkbox’un onCheckedChange parametresi null olmayan bir değere ayarlandığında, genişlik ve yükseklik olarak en az 48dp’ye sahip olmak için padding ekleyecektir.

onCheckedChange parametresi null olarak ayarlandığında, padding dahil edilmez çünkü bileşen doğrudan etkileşime girilemez.

Switch, RadioButton veya Checkbox gibi seçim kontrollerini uygularken, genellikle tıklanabilir davranışı bir üst öğeye taşımamız gerekiyor, bileşenin tıklama geri çağırımını null olarak ayarlarsınız ve üst öğeye toggleable veya selectable modifier ekleriz.

Click Label Ekleme

Erişilebilirlik, uygulamaları herkesin kullanabilmesini sağlamak için önemli bir faktördür. Jetpack Compose, erişilebilirlik özelliklerini destekler ve bu özelliklerden biri de “click label”dir.

Click label, bir görüntü veya buton gibi tıklanabilir bir bileşene eklenen metin veya açıklamadır. Bu, görme engelli kullanıcıların veya ekran okuyucu kullanan kişilerin, bileşenin ne işe yaradığını veya ne olduğunu anlamasına yardımcı olur. Click label, ayrıca motor becerileri sınırlı olan kullanıcıların doğru bileşeni seçmelerine yardımcı olur.

Jetpack Compose’da click label eklemek için aşağıdaki adımları izleyebiliriz:

İlk olarak, tıklanabilir bir bileşen oluşturmanız gerekmektedir. Örneğin, bir Button oluşturalım

Şimdi, click label’ı düğmeye eklemek için semantics işlevini kullanabiliriz. semantics işlevi, erişilebilirlik özelliklerini ayarlamamıza olanak tanır. İşlevi düğmeye ekleyelim ve click label'ı belirtelim:

Yukarıdaki kodda, semantics işlevini kullanarak click label'ı "Bu düğmeye tıkla" olarak ayarladık.

Örnek olarak, Jetpack Compose ile bir resim görüntüleyen ve tıklanabilir bir bileşen ekleyen bir uygulama düşünelim:

Yukarıdaki kodda, Image bileşeni görüntülemek için kullanılırken contentDescription parametresi click label'ı temsil eder. "Resim açıklaması" click label olarak ayarlanmıştır.

Bu şekilde, Jetpack Compose ile click label ekleyerek erişilebilirlik özelliklerini sağlayabilirsiniz. Click label’lar, erişilebilirlik gereksinimlerini karşılamak ve kullanıcı deneyimini geliştirmek için önemli bir araçtır.

Görsel elementleri tanımlama

Image ve Icon bileşenlerinde erişilebilirlik özelliklerini ayarlamak için Jetpack Compose’in semantics işlevini kullanabiliriz. semantics işlevi, erişilebilirlik etiketlerini ve açıklamalarını belirlememizi sağlar. İşte Image ve Icon bileşenlerinde erişilebilirlik kodunu nasıl yazacağınızı gösteren örnekler:

Image bileşeni için erişilebilirlik kodu:

Yukarıdaki örnekte, modifier.semantics işlevini kullanarak erişilebilirlik özelliklerini ayarladık. contentDescription, resmin erişilebilirlik açıklamasını temsil eder. Burada "Resim açıklaması" click label olarak ayarlanmıştır.

Icon bileşeni için erişilebilirlik kodu:

Yukarıdaki örnekte, modifier.semantics işlevini kullanarak erişilebilirlik özelliklerini ayarladık. contentDescription, simgenin erişilebilirlik açıklamasını temsil eder. Burada "Onay simgesi" click label olarak ayarlanmıştır.

Erişilebilirlik özelliklerini ayarlamak için semantics işlevini kullanırken, contentDescription dışında diğer erişilebilirlik özelliklerini de ayarlayabilirsiniz. Örneğin, clickable olup olmadığını, enabled durumunu ve diğer erişilebilirlik etiketlerini belirleyebiliriz.

Öğeleri birleştirme

mergeDescendants parametresi, bir bileşenin alt bileşenlerinin erişilebilirlik özelliklerini birleştirmek için kullanılır. Varsayılan olarak, mergeDescendants parametresi false olarak ayarlıdır ve alt bileşenlerin erişilebilirlik özelliklerini birleştirmez. Ancak true olarak ayarlanırsa, alt bileşenlerin erişilebilirlik özellikleri ana bileşenin erişilebilirlik özellikleriyle birleştirilir.

Örneğin, bir Column bileşeni içindeki alt bileşenlerin erişilebilirlik özelliklerini birleştirmek için mergeDescendants parametresini kullanabiliriz:

Yukarıdaki örnekte, Column bileşeni içindeki Text ve Button bileşenlerinin erişilebilirlik özelliklerini birleştirmek için mergeDescendants parametresini true olarak ayarladık. Böylece, Column bileşenine erişildiğinde, hem Text bileşeninin hem de Button bileşeninin erişilebilirlik özellikleri uygulanır.

mergeDescendants parametresini kullanarak, bir bileşenin alt bileşenlerinin erişilebilirlik özelliklerini birleştirerek, daha iyi bir erişilebilirlik deneyimi sağlayabilirsiniz. Ancak, performans açısından dikkatli olmalı ve gerektiğinde bu parametreyi kullanmalısınız, çünkü tüm alt bileşenlerin erişilebilirlik özellikleri birleştirileceği için karmaşık bileşen hiyerarşilerinde performans etkisi olabilir.

Bir elementin state’ini tanımlama

Erişilebilirlik özelliği olarak, stateDescription parametresi, bir bileşenin durumunu açıklayan bir metin sağlar. Bu durum açıklaması, kullanıcılara bileşenin güncel durumu hakkında bilgi verir.

stateDescription parametresini semantics işlevi içinde ayarlayalım. Bu, bileşenin güncel durumunu açıklayan bir metin sağlar:

Yukarıdaki örnekte, stateDescription parametresini semantics işlevi içinde "Bu düğme tıklandığında bir işlem gerçekleştirir" olarak ayarladık. Bu, bileşenin durumunu açıklayan bir metindir ve kullanıcılara ne olduğunu belirtir.

stateDescription parametresini kullanarak bir bileşene erişilebilirlik özelliği ekleyerek, kullanıcıların bileşenin güncel durumu hakkında bilgi sahibi olmalarını sağlayabilirsiniz. Bu, erişilebilirlik gereksinimlerini karşılamak ve kullanıcı deneyimini geliştirmek için önemlidir.

Jetpack Compose’da Checkbox gibi state’i olan componentleri kullanırken semantic ile state hakkında bilgi verebiliriz:

Yukarıdaki örnekte, Checkbox bileşenine semantics işlevini ekledik ve mergeDescendants parametresini true olarak ayarladık. Böylece, Checkbox bileşenindeki erişilebilirlik özelliklerini ve alt bileşenlerini birleştirmiş olduk.

stateDescription parametresini if koşuluyla kontrol ederek, isChecked durumuna bağlı olarak durum açıklamasını ayarladık. Eğer isChecked true ise, durum açıklaması "Seçildi" olarak ayarlanır, aksi takdirde "Seçilmedi" olarak ayarlanır.

Bu şekilde, erişilebilirlik özelliği olarak, kullanıcılara Checkbox bileşeninin güncel durumunu açıklayan bir metin sağlanır. Bu sayede, ekran okuyucu kullanan veya görme engelli kullanıcılar bileşenin durumunu anlayabilir ve etkileşimlerini yönetebilir.

Başlık Tanımlama

Jetpack Compose’da bir Text bileşenini bir başlık (header) olarak tanımlamak için semantics işlevini kullanabilirsiniz. Bu, erişilebilirlik açısından önemlidir çünkü başlıklar, belgenin veya sayfanın yapısını ve hiyerarşisini anlamak için kullanıcıların yardımcı teknolojileri tarafından kullanılabilir.

Aşağıdaki gibi bir örnek kullanarak Text bileşenini bir başlık olarak tanımlayabilirsiniz:

Yukarıdaki örnekte, semantics işlevini Modifier üzerinde kullanarak heading işlevini çağırdık. Bu, Text bileşenini bir başlık olarak tanımlar.

Başlık olarak tanımlanan Text bileşeni, ekran okuyucu kullanan veya görme engelli kullanıcılar için belgenin veya sayfanın başlığını vurgulamak ve anlamak için kullanılabilir. Ayrıca, bazı yardımcı teknolojilerde kullanıcılara belge veya sayfa yapısını anlamak için kolaylık sağlar.

Bu şekilde, Text bileşenini bir başlık olarak tanımlayarak erişilebilirlik açısından önemli bilgileri kullanıcılara aktarabilirsiniz.

Erişilebilirlik Testi

Jetpack Compose’da bir Button bileşeninin labelini ve onClick işlevinin erişilebilirlik testini yazmak için semantics işlevini ve TestTag'i kullanabilirsiniz. İşte bir örnek:

Yukarıdaki örnekte, Button bileşenimizi oluşturduk.

Aşağıda, bir Button bileşeninin erişilebilirlik testini ComposeTestRule kullanarak nasıl yapabileceğinizi gösteren doğru bir örnek verilmiştir:

Yukarıdaki örnekte, composeTestRule kullanarak bir erişilebilirlik testi oluşturulmuştur. onNode işlevini kullanarak Button bileşenini bulup performClick() işlevini çağırarak tıklama işlemini gerçekleştirebilirsiniz. hasText işlevi ile butonun metnini doğrulayabilirsiniz.

Bu şekilde, Jetpack Compose’da bir Button bileşeninin erişilebilirlik testini doğru bir şekilde yapabilirsiniz.

Bir Başka Örnek — TextField

Rrişilebilirlik özelliklerini kullandığınız bir bileşenin örneği olarak bir TextField bileşenini ele alalım. Bu bileşenin bir erişilebilirlik testini de yazabiliriz.

Öncelikle, TextField bileşenine label ve value özelliklerini ekleyelim ve semantics işlevini kullanarak erişilebilirlik özelliklerini ayarlayalım:

Yukarıdaki örnekte, TextField bileşeni bir metin girişi alanını temsil etmektedir. label özelliği, metin girişi alanının etiketini belirtir ve value ile onValueChange özellikleri metin girişinin değerini ve değer değişikliklerini yönetir.

semantics işlevini kullanarak erişilebilirlik özelliklerini belirttik. testTag, bileşeni testlerde bulmak ve erişmek için kullanılabilir bir tanımlayıcıdır. contentDescription, bileşenin içeriğini açıklayan bir metin sağlar.

Şimdi, bu bileşenin erişilebilirlik testini yazalım:

Yukarıdaki örnekte, erişilebilirlik testini onNodeWithTag işlevini kullanarak gerçekleştiriyoruz. Daha sonra semantics.value ile TextField bileşeninin değerini ve findContentDescription().value ile içeriğin açıklamasını alıyoruz.

Son olarak, doğrulamaları yaparak bileşenin erişilebilirlik özelliklerini kontrol ediyoruz. textFieldValue.value ile semantics.valueyi ve "Ad" etiketini doğruluyoruz.

Bu şekilde, Jetpack Compose’da erişilebilirlik özelliklerini kullanarak TextField bileşeninin erişilebilirlik testini yapabilirsiniz.

Önemli konu olan erişilebilirlik için yazım bu kadardı. Umarım faydalı bir yazı olmuştur. Bir sonraki yazıda görüşmek üzere.