Android çerçevesi, erişilebilirlik ihtiyaçları olan kullanıcılara yardımcı olmak için uygulamalardaki içerikleri kullanıcılara sunabilen ve uygulamaları kullanıcılar adına çalıştırabilen bir erişilebilirlik hizmeti oluşturmanıza olanak tanır.
Android, aşağıdakiler de dahil olmak üzere çeşitli sistem erişilebilirlik hizmetleri sunar:
- TalkBack: Az gören veya görme engelli kişilere yardımcı olur. İçeriği sentezlenmiş bir sesle duyurur ve kullanıcı hareketlerine yanıt olarak bir uygulamada işlemler gerçekleştirir.
- Anahtar Erişimi: Bedensel engelli kişilere yardımcı olur. Etkileşimli öğeleri vurgular ve kullanıcının bir düğmeye basmasına yanıt olarak işlem gerçekleştirir. Cihazın yalnızca bir veya iki düğme kullanılarak kontrol edilmesini sağlar.
Erişilebilirlik ihtiyaçları olan kullanıcıların uygulamanızı başarıyla kullanabilmesi için uygulamanızın, Uygulamaları daha erişilebilir hale getirme bölümünde açıklanan yönergelere dayalı olarak bu sayfada açıklanan en iyi uygulamalara uyması gerekir.
Aşağıdaki 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, uygulamanızdaki her etkileşimli ve anlamlı kullanıcı arayüzü öğesinin içeriğini ve amacını anlayabilmelidir.
- Erişilebilirlik işlemleri ekleme
- Erişilebilirlik işlemleri ekleyerek erişilebilirlik hizmetlerini kullananların uygulamanızdaki önemli kullanıcı işlemleri akışlarını tamamlamasını sağlayabilirsiniz.
- Yerleşik erişilebilirlik özelliklerini kullanma
- Compose, varsayılan olarak birçok erişilebilirlik davranışı sunar. Bileşenlerinizi çok az ek çalışmayla veya hiç ek çalışma yapmadan erişilebilir hale getirmek için önceden tanımlanmış erişilebilirlik davranışlarından yararlanın. Compose, varsayılan özelliklerin kapsamadığı daha özel erişilebilirlik gereksinimlerini desteklemenin yollarını da sunar.
- Renk dışında ipuçları kullanma
- Kullanıcılar, kullanıcı arayüzündeki öğe kategorilerini net bir şekilde ayırt edebilmelidir. Bunun için renklerin yanı sıra desenleri ve konumları kullanarak bu farklılıkları ifade edin.
- Medya içeriklerini daha erişilebilir hale getirme
- Uygulamanızın video veya ses içeriğine açıklamalar ekleyerek bu içeriği tüketen kullanıcıların tamamen görsel veya işitsel ipuçlarına güvenmek zorunda kalmamasını sağlayın.
Etiket öğeleri
Uygulamanızdaki her etkileşimli kullanıcı arayüzü öğesi için kullanıcılara faydalı ve açıklayıcı etiketler sunmanız önemlidir. Her etiket, belirli bir öğenin semantiğini, yani öğenin anlamını ve amacını açıklamalıdır. TalkBack gibi ekran okuyucular bu etiketleri kullanıcılara duyurabilir.
Çoğu durumda, Compose API'leri ve Material'da varsayılan erişilebilirlik desteği bulunur. Ancak bir kullanıcı arayüzü öğesinin semantik özelliklerini manuel olarak belirtmeniz gerekiyorsa semantics değiştiricisini ve contentDescription özelliğini kullanın. Anlamsal öğeler hakkında daha fazla bilgi için Anlamsal öğeler başlıklı makaleyi inceleyin.
Aşağıdaki bölümlerde diğer etiketleme tekniklerinden bazıları açıklanmaktadır.
Düzenlenebilir öğeler
Metin alanları gibi düzenlenebilir öğeleri etiketlerken, bu örnek metni ekran okuyucular için kullanılabilir hale getirmenin yanı sıra öğenin kendisinde geçerli bir giriş örneği veren metni göstermek de faydalıdır. Bu durumlarda, ipucu metni olarak da adlandırılan yer tutucu metni kullanabilirsiniz.
Aşağıdaki örnekte, TextField, ipucu metni sağlayan bir placeholder parametresine sahiptir.
val usernameState = rememberTextFieldState() TextField( state = usernameState, lineLimits = TextFieldLineLimits.SingleLine, placeholder = { Text("Enter Username") } )
Metin alanlarının, kullanıcıların girmesi gereken bilgileri açıklayan bir etiketi de olur.
Aşağıdaki örnekte, TextField öğesinin erişilebilirlik açıklaması sağlayan bir label parametresi vardır.
TextField( state = rememberTextFieldState(initialText = "Hello"), label = { Text("Label") } )
Metin ve kullanıcı girişi hakkında daha fazla bilgi için Metin alanlarını yapılandırma başlıklı makaleyi inceleyin.
Koleksiyondaki öğe sayısı
Bir koleksiyonun öğelerine etiket eklerken her etiket benzersiz olmalıdır. Bu sayede sistemin erişilebilirlik hizmetleri, bir etiketi duyururken tam olarak bir ekran öğesine başvurabilir. Bu eşleşme, kullanıcıların kullanıcı arayüzünde gezinirken veya odağı daha önce keşfettikleri bir öğeye taşırken bunu anlamalarını sağlar.
Örneğin, LazyColumn veya LazyRow varsa her öğeye benzersiz bir collectionItemInfo atamak için semantics değiştiricisini kullanın. Bu işlem aşağıdaki snippet'te gösterilmiştir:
MilkyWayList( modifier = Modifier .semantics { collectionInfo = CollectionInfo( rowCount = milkyWay.count(), columnCount = 1 ) } ) { milkyWay.forEachIndexed { index, text -> Text( text = text, modifier = Modifier.semantics { collectionItemInfo = CollectionItemInfo(index, 0, 0, 0) } ) } }
Listeler ve ızgaralar için semantik özellikler hakkında daha fazla bilgi edinmek isterseniz Liste ve öğe bilgileri başlıklı makaleyi inceleyin.
İlgili içerik grupları
Uygulamanızda doğal bir grup oluşturan birkaç kullanıcı arayüzü öğesi (ör. bir şarkının ayrıntıları veya bir mesajın özellikleri) gösteriliyorsa bu öğeleri bir üst kapsayıcıda (ör. Column, Row veya Box) düzenleyin. mergeDescendants değerini true olarak ayarlamak için üst kapsayıcının semantics değiştiricisini kullanın.
Bu sayede erişilebilirlik hizmetleri, iç öğelerin içerik açıklamalarını tek bir duyuruda arka arkaya sunabilir. İlgili öğeleri birleştirmek, yardımcı teknoloji kullanıcılarının ekrandaki bilgileri daha verimli bir şekilde keşfetmesine yardımcı olur.
Aşağıdaki snippet'te, Row composable'ı üst kapsayıcı görevi görür.
Row içinde, bir blog yayınının meta verilerini gösteren ilgili öğeler (yazarın avatarı, yazarın adı ve tahmini okuma süresi) bulunur.
mergeDescendants özelliğini true olarak ayarlamak bu iç öğeleri gruplandırır. Böylece erişilebilirlik hizmetleri bunları tek bir birim olarak değerlendirebilir.
@Composable private fun PostMetadata(metadata: Metadata) { // Merge elements below for accessibility purposes Row(modifier = Modifier.semantics(mergeDescendants = true) {}) { Image( imageVector = Icons.Filled.AccountCircle, contentDescription = null // decorative ) Column { Text(metadata.author.name) Text("${metadata.date} • ${metadata.readTimeMinutes} min read") } } }
Önceki örnekte olduğu gibi ilgili öğeleri gruplandırırken yalnızca üst kapsayıcıyı etkileşimli hale getirin. İç alt öğelere clickable veya focusable değiştiricileri eklemekten kaçının. Bunun yerine, değiştiricileri üst Row veya Column öğesine uygulayın.
Erişilebilirlik hizmetleri, iç öğelerin açıklamalarını tek bir ifadeyle duyurduğundan, her açıklamanın öğenin anlamını iletirken mümkün olduğunca kısa tutulması önemlidir.
Not: Genel olarak, bir grup için içerik açıklaması oluştururken alt öğelerinin metnini birleştirmekten kaçının. Bunu yapmak, grubun açıklamasını kırılgan hale getirir ve bir alt öğenin metni değiştiğinde grubun açıklaması artık görünür metinle eşleşmeyebilir.
Liste veya tablo bağlamında, ekran okuyucu bir liste veya tablo öğesinin alt metin düğümlerinin metnini birleştirebilir. Bu duyuruyu değiştirmemeniz önerilir.
Semantik öğeleri birleştirme hakkında daha fazla bilgi için Birleştirme ve temizleme başlıklı makaleyi inceleyin.
Metin içindeki başlıklar
Bazı uygulamalar, ekranda görünen metin gruplarını özetlemek için başlıkları kullanır. Belirli bir öğe başlığı temsil ediyorsa semantics değiştiricisinde heading özelliğini ayarlayarak erişilebilirlik hizmetleri için amacını belirtebilirsiniz.
@Composable private fun Subsection(text: String) { Text( text = text, style = MaterialTheme.typography.headlineSmall, modifier = Modifier.semantics { heading() } ) }
Erişilebilirlik hizmetlerinin kullanıcıları, paragraflar veya kelimeler arasında gezinmek yerine başlıklar arasında gezinmeyi seçebilir. Bu esneklik, metinde gezinme deneyimini iyileştirir.
heading semantik özelliği hakkında daha fazla bilgi için Başlıklar bölümüne bakın.
Erişilebilirlik bölmesi başlıkları
Android 9 (API düzeyi 28) ve sonraki sürümlerde, ekranın bölmeleri için erişilebilirlik açısından uygun başlıklar sağlayabilirsiniz. Erişilebilirlik açısından, bölme bir pencerenin görsel olarak farklı bir bölümüdür.
Erişilebilirlik hizmetlerinin bir bölmenin pencere benzeri davranışını anlaması için uygulamanızın bölmelerine açıklayıcı başlıklar verin. Erişilebilirlik hizmetleri, bir bölmenin görünümü veya içeriği değiştiğinde kullanıcılara daha ayrıntılı bilgi sağlayabilir.
ShareSheet( message = "Choose how to share this photo", modifier = Modifier .fillMaxWidth() .align(Alignment.TopCenter) .semantics { paneTitle = "New bottom sheet" } )
paneTitle semantik özelliği hakkında daha fazla bilgi için Pencere benzeri bileşenler başlıklı makaleyi inceleyin.
Dekoratif öğeler
Kullanıcı arayüzünüzdeki bir öğe yalnızca görsel boşluk veya görsel görünüm amaçlıysa erişilebilirlik hizmetlerinin bu öğeyi yoksayabileceğini belirtmek için öğede uygun özellikleri ayarlayın.
Image veya Icon bileşenleri için contentDescription = null değerini ayarlayın. Bağlam veya işlevsellik sağlamayan diğer tamamen dekoratif öğeler için hideFromAccessibility kullanabilirsiniz. Bu semantik özellik, erişilebilirlik hizmetlerine öğeyi yoksaymasını söyler.
Etkileşimli bir composable, dekoratif ve etkileşimli olmayan alt öğeler içeriyorsa erişilebilirlik hizmetlerinin bu öğeleri taramadığından emin olmak için clearAndSetSemantics kullanın. clearAndSetSemantics özelliğinin, bir öğenin ve alt öğelerinin varsayılan semantiğini tamamen sildiğini unutmayın. Bu sayede yeni ve birleştirilmiş bir
erişilebilirlik öğesi tanımlayabilirsiniz. Normalde bu yaklaşımı karmaşık özel bileşenler için kullanırsınız.
Aşağıdaki örnekte, Icon ve Text özel bir açma/kapatma düğmesinin içindeki dekoratif alt öğelerdir. Erişilebilirlik hizmetlerinin bu alt öğeleri tek tek taramasını önlemek için üst öğe Row üzerinde clearAndSetSemantics kullanarak alt öğelerin semantiğini temizleyebilirsiniz. Bu, erişilebilirlik hizmetlerine tüm Row öğesini geçiş yapılabilir bir açma/kapatma düğmesi olarak ele almasını söyler:
// Developer might intend this to be a toggleable. // Using `clearAndSetSemantics`, on the Row, a clickable modifier is applied, // a custom description is set, and a Role is applied. @Composable fun FavoriteToggle() { val checked = remember { mutableStateOf(true) } Row( modifier = Modifier .toggleable( value = checked.value, onValueChange = { checked.value = it } ) .clearAndSetSemantics { stateDescription = if (checked.value) "Favorited" else "Not favorited" toggleableState = ToggleableState(checked.value) role = Role.Switch }, ) { Icon( imageVector = Icons.Default.Favorite, contentDescription = null // not needed here ) Text("Favorite?") } }
Anlamsal öğeleri temizleme hakkında daha fazla bilgi için Anlamsal öğeleri temizleme ve ayarlama başlıklı makaleyi inceleyin.
Erişilebilirlik işlemleri ekleme
Erişilebilirlik hizmetlerini kullanan kişilerin, uygulamanızdaki tüm kullanıcı işlemleri akışlarını tamamlayabilmesi önemlidir.
Özel composable'ınızın etkileşimi, uygulamanın durumunu belirgin olmayan bir şekilde değiştiriyorsa Modifier.clickable veya Modifier.combinedClickable içinde onClickLabel ya da onLongClickLabel gibi parametreleri kullanarak standart dokunma işlemleri için açıklayıcı etiketler sağlayın.
Standart dokunma hareketleriyle eşlenemeyen karmaşık etkileşimler için customActions kullanın.
Örneğin, uygulamanız kullanıcıların bir öğeyi başka bir konuma sürüklemesine veya listedeki bir öğeyi kaydırmasına izin veriyorsa işlemi erişilebilirlik hizmetlerine sunarak bu kullanıcı işlemleri akışlarını tamamlamanın alternatif bir yolunu sağlayabilirsiniz. Bu sayede TalkBack, Sesli Erişim veya Anahtar Erişimi kullanıcıları, normalde yalnızca hareketlerle gerçekleştirilebilecek işlemleri yapabilir.
Compose'da, semantics değiştiricisindeki customActions özelliği aracılığıyla CustomAccessibilityAction kullanarak özel erişilebilirlik işlemleri tanımlayabilirsiniz.
Örneğin, uygulamanız kullanıcıların bir öğeyi kaydırarak kapatmasına izin veriyorsa bu işlevi özel bir erişilebilirlik işlemi aracılığıyla gösterebilirsiniz:
SwipeToDismissBox( modifier = Modifier.semantics { // Represents the swipe to dismiss for accessibility customActions = listOf( CustomAccessibilityAction( label = "Remove article from list", action = { removeArticle() true } ) ) }, state = rememberSwipeToDismissBoxState(), backgroundContent = {} ) { ArticleListItem() }
Özel erişilebilirlik işlemi uygulandığında kullanıcılar, işlemler menüsünden işleme erişebilir.
Özel işlemler hakkında daha fazla bilgi için Özel işlemler başlıklı makaleyi inceleyin.
Kullanılabilir işlemleri anlaşılır hale getirme
Bir kullanıcı arayüzü öğesi, dokunup basılı tutma gibi işlemleri desteklediğinde TalkBack gibi bir erişilebilirlik hizmeti, bu işlemi "Uzun basmak için iki kez dokunup basılı tutun" şeklinde duyurur.
Bu genel duyuru, kullanıcıya dokunup basılı tutma işleminin ne yaptığıyla ilgili herhangi bir bağlam sunmaz.
Bu duyuruyu daha faydalı hale getirmek için işlemle ilgili anlamlı bir açıklama belirtin.
Compose'da, clickable ve combinedClickable gibi standart etkileşim değiştiriciler, işlemlerle ilgili açıklamalar sağlamak için kullanabileceğiniz yerleşik parametrelere (onClickLabel ve onLongClickLabel) sahiptir. Aşağıdaki örnekte bu durum gösterilmektedir:
var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) } val haptics = LocalHapticFeedback.current LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) { items(photos, { it.id }) { photo -> ImageItem( photo, Modifier .combinedClickable( onClick = { activePhotoId = photo.id }, onLongClick = { haptics.performHapticFeedback(HapticFeedbackType.LongPress) contextMenuPhotoId = photo.id }, onLongClickLabel = stringResource(R.string.open_context_menu) ) ) } } if (contextMenuPhotoId != null) { PhotoActionsSheet( photo = photos.first { it.id == contextMenuPhotoId }, onDismissSheet = { contextMenuPhotoId = null } ) }
Bu sayede TalkBack,"Bağlam menüsünü aç" ifadesini duyurarak kullanıcıların işlemin amacını anlamasına yardımcı olur.
Etiketi doğrudan semantics değiştiricisinde de belirtebilirsiniz.
Dokunma ve tıklama işlemlerine yanıt verme hakkında daha fazla bilgi için Dokunma ve basma ve Etkileşimli öğeler başlıklı makaleleri inceleyin.
Yerleşik erişilebilirlik özelliklerini kullanma
Uygulamanızın kullanıcı arayüzünü tasarlarken, mevcut işlevleri yeniden uygulamak zorunda kalmamak için yerleşik erişilebilirlik özelliklerinden yararlanın. Material, Compose UI ve Foundation API'leri, varsayılan olarak birçok erişilebilir uygulamayı uygular ve sunar.
Jetpack Compose'da erişilebilir kullanıcı arayüzleri oluşturmak için Button, Switch ve Checkbox gibi yerleşik composable'ları kullanın. Bu bileşenler, uygulamalarınızı daha erişilebilir hale getirmek için kullanabileceğiniz role ve stateDescription gibi semantics değiştiricilerle birlikte gelir.
Özel bileşenlere semantik uygulama
Özel bileşen oluştururken bu bileşenin rolünü yerine getirmek için ne tür bir erişilebilirlik desteği gerektirdiğini göz önünde bulundurun. Genellikle, halihazırda kullandığınız standart Compose API'leri (ör. clickable, toggleable veya selectable), semantik ağacını sizin için otomatik olarak doldurduğundan yeterlidir.
Ancak bazı bileşenler, standart değiştiricilerin sağladığından daha spesifik bilgiler gerektirir. Bu durumlarda, özel değiştiricileri (ör. triStateToggleable) arayın veya yoksa düşük seviyeli Modifier.semantics kullanarak semantiği açıkça sağlayın.
Örneğin, üç durumu (Açık, Kapalı ve Belirsiz) olan bir anahtar olan TriStateSwitch öğesini ele alalım.
Standart bir toggleable değiştirici iki durum varsayarken triStateToggleable değiştirici, üçüncü durumun karmaşıklığını yönetir. Erişilebilirlik Role (Switch) ve State otomatik olarak ayarlanır. Bu sayede erişilebilirlik hizmetleri doğru bilgileri alır ve semantiği manuel olarak tanımlamanız gerekmez.
Aşağıdaki kod snippet'inde, bu yaklaşımı kullanan bir TriStateSwitch gösterilmektedir:
@Composable fun TriStateSwitch( state: ToggleableState, onClick: () -> Unit, modifier: Modifier = Modifier ) { // A real implementation would include custom drawing for the switch. // This example uses a Box to demonstrate the semantics. Box( modifier = modifier .size(width = 64.dp, height = 40.dp) // triStateToggleable handles the semantics (Role and State) // automatically, so explicit Modifier.semantics is not needed here. .triStateToggleable( state = state, onClick = onClick, role = Role.Switch ) // Add visual feedback based on the state .background( when (state) { ToggleableState.On -> Color.Green ToggleableState.Off -> Color.Gray ToggleableState.Indeterminate -> Color.Yellow } ) ) } // Usage within another composable: var state by remember { mutableStateOf(ToggleableState.Off) } TriStateSwitch( state = state, onClick = { state = when (state) { ToggleableState.Off -> ToggleableState.Indeterminate ToggleableState.Indeterminate -> ToggleableState.On ToggleableState.On -> ToggleableState.Off } } )
Özel bir bileşen oluştururken erişilebilirlik için tüm alakalı semantik özellikleri sağladığınızdan emin olun. Örneğin, bileşeniniz anahtar veya düğme gibi standart bir kontrolü taklit ediyorsa bu özellikler arasında bileşenin rolü (ör. Role.Switch veya Role.Button), stateDescription (ör. "Açık", "Kapalı", "İşaretli" veya "İşaretli değil") ve ilgili işlem etiketleri yer alır. Daha fazla bilgi için Özel bileşenler başlıklı makaleyi inceleyin.
Renk dışında ipuçları kullanma
Renk körlüğü olan kullanıcılara yardımcı olmak için uygulamanızın ekranlarındaki kullanıcı arayüzü öğelerini ayırt etmek amacıyla renk dışında ipuçları kullanın. Bu teknikler arasında farklı şekiller veya boyutlar kullanma, metin ya da görsel desenler sağlama veya öğelerin farklılıklarını belirtmek için ses ya da dokunma tabanlı (dokunsal) geri bildirim ekleme yer alabilir.
Şekil 1'de bir etkinliğin iki versiyonu gösterilmektedir. Bir sürümde, iş akışındaki iki olası işlem arasında ayrım yapmak için yalnızca renk kullanılır. Diğer sürümde, iki seçenek arasındaki farkları vurgulamak için renklerin yanı sıra şekiller ve metinler de kullanılmıştır. Bu, en iyi uygulamalardan biridir:
Medya içeriğini daha erişilebilir hale getirme
Video klip veya ses kaydı gibi medya içeriği barındıran bir uygulama geliştiriyorsanız farklı türde erişilebilirlik ihtiyaçları olan kullanıcıların materyali anlamasına yardımcı olmaya çalışın. Özellikle şunları yapmaya çalışın:
- Kullanıcıların medyayı duraklatmasına veya durdurmasına, ses seviyesini değiştirmesine ve altyazıları açıp kapatmasına olanak tanıyan kontroller ekleyin.
- Bir video, iş akışını tamamlamak için hayati önem taşıyan bilgiler sunuyorsa aynı içeriği transkript gibi alternatif bir biçimde sağlayın.
Ek kaynaklar
Uygulamanızı daha erişilebilir hale getirme hakkında daha fazla bilgi için aşağıdaki ek kaynaklara göz atın: