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ı onlar 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 kullanıcılara yardımcı olur. İçeriği sentezlenmiş bir sesle duyurur ve kullanıcının hareketlerine yanıt olarak uygulamada işlemler gerçekleştirir.
- Anahtar Erişimi: Hareket engelli kişilere yardımcı olur. Etkileşimli öğeleri vurgular ve kullanıcının bir düğmeye basması üzerine işlemler gerçekleştirir. Cihazın yalnızca bir veya iki düğme kullanılarak kontrol edilmesine olanak tanır.
Erişilebilirlik ihtiyaçları olan kullanıcıların uygulamanızı başarılı bir şekilde kullanabilmesi için uygulamanızın, Uygulamaları daha erişilebilir hale getirme başlıklı makalede açıklanan yönergelerden yararlanan ve 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 hizmeti kullanıcılarının uygulamanızdaki kritik kullanıcı akışlarını tamamlamasına olanak tanıyabilirsiniz.
- Yerleşik erişilebilirlik özelliklerini kullanma
- Oluşturma, varsayılan olarak birçok erişilebilirlik davranışı sunar. Bileşenlerinizi az 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 spesifik 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. Bunu yapmak için renklerin yanı sıra desenleri ve konumları kullanarak bu farklılıkları ifade edin.
- Medya içeriğini daha erişilebilir hale getirme
- Bu içerikleri tüketen kullanıcıların tamamen görsel veya işitsel ipuçlarına güvenmek zorunda kalmaması için uygulamanızın video ya da ses içeriklerine açıklamalar ekleyin.
Etiket öğeleri
Uygulamanızdaki her etkileşimli kullanıcı arayüzü öğesi için kullanıcılara faydalı ve açıklayıcı etiketler sağlamanız önemlidir. Her etiket, belirli bir öğenin anlamını (yani öğenin anlamı ve amacı) 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. Anlambilim hakkında daha fazla bilgi için Anlambilim başlıklı makaleyi inceleyin.
Aşağıdaki bölümlerde diğer etiketleme teknikleri açıklanmaktadır.
Düzenlenebilir öğeler
Metin alanları gibi düzenlenebilir öğeleri etiketlerken, bu öğede geçerli giriş örneği veren metin göstermek ve bu örnek metni ekran okuyuculara sunmak faydalıdır. Bu durumlarda, ipucu metni olarak da bilinen yer tutucu metin kullanabilirsiniz.
Aşağıdaki örnekte, TextField öğesinde ipucu metni sağlayan bir placeholder parametresi var.
val usernameState = rememberTextFieldState() TextField( state = usernameState, lineLimits = TextFieldLineLimits.SingleLine, placeholder = { Text("Enter Username") } )
Ayrıca, bir metin alanının, kullanıcıların giriş olarak ne girmesi gerektiğini açıklayan bir açıklama etiketine sahip olması da yaygın bir durumdur.
Aşağıdaki örnekte, TextField öğesinde erişilebilirlik açıklaması sağlayan bir label parametresi var.
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 öğeler
Bir koleksiyonun öğelerine etiket eklerken her etiket benzersiz olmalıdır. Bu sayede, sistemin erişilebilirlik hizmetleri bir etiketi duyururken tam olarak tek bir ekran öğesine başvurabilir. Bu yazışma, kullanıcıların kullanıcı arayüzünde dolaşırken veya odağı daha önce keşfettikleri bir öğeye taşırken bilgilendirilmesini sağlar.
Örneğin, LazyColumn veya LazyRow olduğunda, aşağıdaki snippet'te gösterildiği gibi her öğeye benzersiz bir collectionItemInfo atamak için semantics değiştiricisini kullanın:
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 istiyorsanız 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ı (ör. Column, Row veya Box) içinde 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 art arda 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 ayarını true olarak ayarlamak bu iç öğeleri gruplandırır. Böylece erişilebilirlik hizmetleri bunları tek bir birim olarak ele alabilir.
@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. İçerideki alt öğelere clickable veya focusable değiştiricileri eklemekten kaçının. Bunun yerine, değiştiricileri üst Row veya Column için uygulayın.
Erişilebilirlik hizmetleri, iç öğelerin açıklamalarını tek bir ifadeyle duyurduğundan, öğenin anlamını aktarmaya devam ederken her açıklamayı mümkün olduğunca kısa tutmak önemlidir.
Not: Genel olarak, bir grup için içerik açıklaması oluştururken alt öğelerinin metnini toplamaktan kaçının. Bu durumda grubun açıklaması hassas hale gelir ve bir alt öğenin metni değiştiğinde grubun açıklaması artık görünür metinle eşleşmeyebilir.
Liste veya ızgara bağlamında, ekran okuyucu bir liste ya da ızgara öğesinin alt metin düğümlerinin metnini birleştirebilir. Bu duyuruyu değiştirmemeniz önerilir.
Anlamsal 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 heading değiştiricisinde semantics ö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 hizmeti kullanıcıları, paragraflar veya kelimeler arasında gezinmek yerine başlıklar arasında gezinmeyi tercih edebilir. Bu esneklik, metinle gezinme deneyimini iyileştirir.
heading semantik özelliği hakkında daha fazla bilgi için Başlıklar başlıklı makaleyi inceleyin.
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 dostu başlıklar sağlayabilirsiniz. Erişilebilirlik amacıyla, bölme bir pencerenin görsel olarak farklı bir kısmı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 aralık veya görsel görünüm amacıyla kullanılıyorsa erişilebilirlik hizmetlerinin bu öğeyi yoksayabileceğini belirtmek için öğede uygun özellikleri ayarlayın.
Image veya Icon composable'ları için contentDescription = null'ı 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 geçmediğinden emin olmak için clearAndSetSemantics kullanın. clearAndSetSemantics, bir öğenin ve alt öğelerinin varsayılan anlamlarını tamamen siler. Bu, yeni ve birleştirilmiş bir erişilebilirlik öğesi tanımlamanıza olanak tanır. Bu yaklaşımı genellikle 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 geçmesini önlemek için üst öğede clearAndSetSemantics simgesini kullanarak bu alt öğelerin semantiğini temizleyebilirsiniz. Row Bu, erişilebilirlik hizmetlerine Row öğesinin tamamını geçilebilir bir açma/kapatma düğmesi olarak değerlendirmesini 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?") } }
Anlamları temizleme hakkında daha fazla bilgi için Anlamları temizleme ve ayarlama başlıklı makaleyi inceleyin.
Erişilebilirlik işlemleri ekleme
Erişilebilirlik hizmeti kullanıcılarının, uygulamanızdaki tüm kullanıcı akışlarını tamamlayabildiğinden emin olmanız önemlidir.
Özel composable'ınızın etkileşimi, uygulamanın durumunu açıkça belli 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 olanak tanıyorsa erişilebilirlik hizmetlerine işlemi sunarak bu kullanıcı akışlarını tamamlamak için alternatif bir yol sağlayabilirsiniz. Bu sayede TalkBack, Sesli Erişim veya Anahtar Erişimi kullanıcıları, normalde yalnızca hareketlerle kullanılabilen işlemleri gerçekleştirebilir.
Compose'da, CustomAccessibilityAction kullanarak semantics değiştiricisindeki customActions özelliği aracılığıyla özel erişilebilirlik işlemleri tanımlayabilirsiniz.
Örneğin, uygulamanızda kullanıcıların bir öğeyi kapatmak için kaydırmasına izin veriliyorsa bu işlevi özel bir erişilebilirlik işlemiyle kullanıma sunabilirsiniz:
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 getirin
Bir kullanıcı arayüzü öğesi, dokunup basılı tutma gibi işlemleri desteklediğinde TalkBack gibi bir erişilebilirlik hizmeti bunu "Uzun basmak için iki kez dokunup basılı tutun" şeklinde duyurur.
Bu genel duyuru, kullanıcıya dokunma ve basılı tutma işleminin ne yaptığı hakkında herhangi bir bağlam bilgisi vermiyor.
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şlemlere açıklama eklemek için kullanabileceğiniz yerleşik parametrelere (yani onClickLabel ve onLongClickLabel) sahiptir. Örneğin:
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 durumda TalkBack,"İçerik menüsünü aç" diye duyurarak kullanıcıların işlemin amacını anlamasına yardımcı olur.
Ayrıca, 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 ile Etkileşimli öğeler başlıklı makaleleri inceleyin.
Yerleşik erişilebilirlik özelliklerini kullanma
Uygulamanızın kullanıcı arayüzünü tasarlarken, halihazırda mevcut olan işlevleri yeniden uygulamaktan kaçınmak 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 semantics düzenleyicileriyle (ör. role ve stateDescription) 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ğine dikkat edin. Genellikle, halihazırda kullandığınız standart Compose API'leri (ör. clickable, toggleable veya selectable) yeterlidir. Çünkü bu API'ler, semantik ağacı sizin için otomatik olarak doldurur.
Ancak bazı bileşenler, standart değiştiricilerin sağladığından daha ayrıntılı bilgi gerektirir. Bu durumlarda, özel değiştiricileri (ör. triStateToggleable) arayın. Yoksa düşük seviyeli Modifier.semantics kullanarak anlamları açıkça belirtin.
Örneğin, üç durumu (Açık, Kapalı ve Belirsiz) olan bir TriStateSwitch anahtarını ele alalım.
Standart toggleable değiştirici iki durumu varsayarken triStateToggleable değiştirici üçüncü durumun karmaşıklığını ele alır. Erişilebilirlik Role (Switch) ve State ayarlarını otomatik olarak yapar. Bu sayede, erişilebilirlik hizmetleri doğru bilgiler 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 amacıyla ilgili tüm semantik özellikleri sağladığınızdan emin olun. Örneğin, bileşeniniz bir anahtar veya düğme gibi standart bir kontrolü taklit ediyorsa bu özellikler bileşenin rolünü (ör. Role.Switch veya Role.Button), stateDescription (ör. "Açık", "Kapalı", "İşaretli" veya "İşaretli değil") ve ilgili tüm işlem etiketlerini içerir. 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 renkten farklı ipuçları kullanın. Bu teknikler arasında farklı şekil veya boyutlar kullanmak, metin ya da görsel desenler sağlamak veya öğelerin farklılıklarını işaretlemek için ses ya da dokunma tabanlı (dokunsal) geri bildirim eklemek yer alabilir.
Şekil 1'de bir etkinliğin iki sürümü 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 renge ek olarak şekil ve metin ekleme en iyi uygulaması kullanılıyor:
Medya içeriğini daha erişilebilir hale getirme
Video klip veya ses kaydı gibi medya içerikleri 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 aşağıdakileri yapmayı deneyin:
- Kullanıcıların medyayı duraklatmasına veya durdurmasına, ses seviyesini değiştirmesine ve altyazıları (altyazılar) açıp kapatmasına olanak tanıyan kontroller ekleyin.
- Bir videoda iş akışının tamamlanması için hayati önem taşıyan bilgiler sunuluyorsa aynı içeriği alternatif bir biçimde (ör. transkript) sağlayın.
Ek kaynaklar
Uygulamanızı daha erişilebilir hale getirme hakkında daha fazla bilgi için aşağıdaki ek kaynaklara bakın: