Ga naar hoofdinhoud
Logo Appt Light

Een toegankelijke app. Waar begin je?

Je app toegankelijk maken voor iedereen: waar begin je? Hieronder volgen de belangrijkste stappen die je helpen om je app bruikbaar te maken voor een zo groot mogelijke groep mensen, waaronder mensen met een beperking.

Testen voor toegankelijkheid met iemand die blind is

Het kan heel ingewikkeld lijken en zelfs intimiderend zijn als je je verdiept in de enorme hoeveelheid informatie over digitale toegankelijkheid. Hoe verwerk je al die richtlijnen, inzichten en codevoorbeelden in een app? Om je op weg te helpen hebben we de zes belangrijkste stappen voor je op een rij gezet.

  1. Gebruik een schermlezer!

  2. Bied tekstuele alternatieven.

  3. Maak duidelijk wat het doel is.

  4. Zorg dat tekst kan worden vergroot.

  5. Zorg voor voldoende contrast.

  6. Toon focus en zorg voor logische volgorde.

Hieronder volgt een uitgebreide toelichting per stap. Tot slot leggen we uit hoe je kunt testen of het werkt als bedoeld.

Let op! Deze lijst is niet uitputtend en zal je app niet volledig toegankelijk maken. Maar is bedoeld om door middel van een paar eenvoudige stappen een zo groot mogelijk verschil te maken.

1. Gebruik een schermlezer!

Om goed te kunnen testen of je app toegankelijk is loont het om te leren werken met een schermlezer

Een schermlezer wordt vooral gebruikt door mensen met een visuele beperking. Door je app hiervoor te optimaliseren zorg je er echter voor dat een veel grotere groep mensen gebruik kan maken van jouw app. Gebruikers van stem-, toetsenbord- en schakelbediening zullen hier ook baat bij hebben en je houdt automatisch rekening met heel veel succescriteria uit de WCAG.

Dit maakt de schermlezer het ideale middel om te testen voor toegankelijkheid. Maar het kan even wennen zijn. Het werkt allemaal net even anders dan je gewend bent. Met de ScreenReader app leer je alle gebaren en mogelijkheden al doende kennen.

2. Bied tekstuele alternatieven

Hebben alle knoppen een duidelijk label? Hebben o.a. iconen, afbeeldingen, grafieken een tekstueel alternatief?

Zorg dat er alternatieve tekst beschikbaar is voor alle inhoud zonder tekst. Dat zijn onder andere afbeeldingen, icoontjes en grafieken. Beschrijf wat er te zien is. Mensen die blind zijn laten deze beschrijving voorlezen via hun schermlezer. Alternatieve tekst kan ook handig zijn voor iedereen die twijfelt over de betekenis van de inhoud.

Dit doe je door een accessibility label in te stellen. Hoe je dat kunt doen voor jouw app zie je in het voorbeeld hieronder.

Op Android kun je gebruik maken van de contentDescription eigenschap om een toegankelijkheidslabel in te stellen.

Je kunt ook gebruik maken van diverse soorten Span voor meer controle over de uitspraak. Je kunt bijvoorbeeld een taal instellen met een LocaleSpan.

Daarnaast kun je labels aan elementen koppelen via de labelFor eigenschap.

// Set accessibility label
element.contentDescription = "Appt"

// Set accessibility label in Dutch language
val locale = Locale.forLanguageTag("nl-NL")
val localeSpan = LocaleSpan(locale)

val string = SpannableString("Appt")
string.setSpan(localeSpan, 0, string.length, Spanned.SPAN_INCLUSIVE_INCLUSIVE)

element.contentDescription = localeSpan

// Link visual label to field
textView.setLabelFor(R.id.editText)
Bijdragen

3. Maak duidelijk wat het doel is

Is het duidelijk welke actie er kan worden uitgevoerd? 

Stel een naam in. De naam wordt gebruikt ter identificatie. Door een naam in te stellen kunnen hulpmiddelen zoals stembediening gerichte acties uitvoeren.

Accessibility naam instellen

On Android, the contentDescription property is used as accessibility name.

element.contentDescription = "Appt"
Bijdragen

Stel een rol in. Bij de rol “knop” is het duidelijk dat er een actie plaatsvindt bij het activeren. Bij de rol “link” is het duidelijk dat je naar een andere locatie wordt verwezen. Door een rol in te stellen is het voor gebruikers van hulpmiddelen duidelijk wat ze kunnen doen.

Accessibility rol instellen

[NL] Op Android kun je handmatig een rol instellen via de setRoleDescription methode van AccessibilityNodeInfoCompat. Maar vaak is het beter om de setClassName methode te gebruiken om de rol van een bestaand element over te nemen. Stel bijvoorbeeld Button::class.java.name in als een element zich moet gedragen als een knop.

ViewCompat.setAccessibilityDelegate(
    element,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)

            // Custom
            info.roleDescription = "Custom role"

            // Button
            info.className = Button::class.java.name

            // Heading
            info.isHeading = true

            // Image
            info.className = ImageView::class.java.name
        }
    }
)

// Convenience method
ViewCompat.setAccessibilityHeading(view, true)
Bijdragen

Stel een waarde in. Bij een selectievakje is de waarde “geselecteerd” of “niet geselecteerd”. Bij een volumeregelaar kan de waarde “50%” zijn. Door een waarde in te stellen kan dit ook tekstueel aan hulpmiddelen worden doorgegeven.

Accessibility waarde instellen

Android has limited support to provide a dedicated accessibility value for assistive technologies. The AccessibilityNodeInfoCompat object contains a couple of methods, such as the setChecked method.

Unfortunately the desired value is often not available. If your desired value is not included, you can append it to the contentDescription attribute.

ViewCompat.setAccessibilityDelegate(
    element,
    object : AccessibilityDelegateCompat() {
        override fun onInitializeAccessibilityNodeInfo(
            host: View,
            info: AccessibilityNodeInfoCompat
        ) {
            super.onInitializeAccessibilityNodeInfo(host, info)
            info.isChecked = true
        }
    }
)

element.contentDescription = "Name (Value)"
Bijdragen

4. Zorg dat tekst kan worden vergroot

Is het mogelijk om tekst vergroot weer te geven? Blijft tekst leesbaar als het vergroot wordt weergegeven?

Zorg ervoor dat de tekst vergroot kan worden weergegeven. Via de systeeminstellingen kunnen gebruikers hun gewenste lettergrootte instellen. Tekst moet met deze lettergrootte in de app worden weergegeven. Dit is vooral belangrijk voor slechtziende gebruikers omdat ze de tekst anders minder goed of niet kunnen lezen. Tekst mag niet worden ingekort met puntjes.

Tekst schalen ondersteunen

Op Android kun je gebruik maken van Scale-independent Pixels om tekst herschaling te ondersteunen. Deze eenheid houdt rekening met de voorkeuren van de gebruiker bij het bepalen van de tekstgrootte. We raden je aan om de textSize in de styles vast te leggen zodat het overal hetzelfde is.

<style name="Widget.TextView">
    <item name="android:textSize">18sp</item>
</style>
Bijdragen

Zorg dat alle inhoud op het scherm ook bij het grootste lettertype te lezen blijft. Inhoud moet te lezen zijn zonder dat er gescrold hoeft te worden in twee richtingen. Doordat de tekst groter weergeven wordt kan het voorkomen dat andere elementen van het scherm vallen. Maak het mogelijk om deze elementen alsnog te bereiken.

Tekst afkapping voorkomen

On Android, you can avoid text truncation by removing all instances of android:maxLines from your app. You should also avoid using fixed values for any heights or widths and instead use wrap_content where possible.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Avoid text truncation" 
    android:maxLines="REMOVE" />
Bijdragen

5. Zorg voor voldoende contrast

Heeft tekst voldoende contrast ten opzichte van de achtergrond? Hebben elementen op het scherm voldoende contrast onderling en ten opzichte van de achtergrond?

Zorg dat de inhoud op het scherm een contrast van minimaal 3:1 heeft met de omliggende kleur. Denk hierbij aan grafische elementen zoals iconen, knoppen en invoervelden. Door deze verhouding aan te houden kunnen slechtziende en kleurenblinde gebruikers de inhoud goed onderscheiden. Daarnaast is een app hierdoor voor iedereen makkelijker te gebruiken, bijvoorbeeld buiten in de zon.

Zorg dat de contrastverhouding tussen de tekstkleur en achtergrondkleur minimaal 4,5:1 is. Voor dikgedrukte en grote tekst voldoet een verhouding van 3:1. Door deze verhoudingen aan te houden kunnen slechtziende en kleurenblinde gebruikers de tekst goed lezen. Daarnaast is een app hierdoor voor iedereen makkelijker te gebruiken, bijvoorbeeld buiten in de zon.

6. Toon focus en zorg voor logische volgorde

Is het duidelijk waar de focus zich bevindt? Is de volgorde waarin de focus zich verplaatst logisch?

Zorg dat het duidelijk is waar de focus van hulpmiddelen zich bevindt. Vaak wordt de focus weergeven door een kader om het element heen te plaatsen. Zorg ervoor dat de plaatsing van het kader klopt en dat de kleur duidelijk te zien is. Voor apps is het niet mogelijk om de de kleur van het kader aan te passen. Het is echter wel mogelijk om elementen een andere achtergrondkleur te geven wanneer ze focus hebben.

Accessibility focus indicator toevoegen

On Android, you can adjust colors when an element receives focus. However, it's not possible to change the focus indicator of assistive technologies. Users can adjust their preferences in the system settings of Android.

You can use a ColorStateList to change colors based on the element state. An element moves into the state_focused whenever it receives focus.

The code sample below shows how to change the background color of a button on focus.

<!-- selector.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/focused" android:state_focused="true" />
    <item android:drawable="@color/default" />
</selector>

<!-- layout.xml -->
<Button
    android:id="@+id/button"
    android:background="@drawable/selector">
</Button>
Bijdragen

Zorg dat hulpmiddelen een logische focus volgorde aanhouden bij het navigeren. De volgorde om door een scherm te navigeren is meestal van links naar rechts, van boven naar onder. Zorg dat de focus van hulpmiddelen gelijk is. 

Volgorde voor toetsenbord aanpassen

On Android, you can use several focus properties to modify the keyboard focus order.

<View
    android:id="@+id/notFocusable"
    android:focusable="false"/>

<EditText
    android:id="@+id/field1"
    android:focusable="true"
    android:nextFocusForward="@+id/field2"
    android:nextFocusDown="@+id/field3"
    android:nextFocusRight="@+id/field2"/>

<EditText
    android:id="@+id/field2"
    android:focusable="true"
    android:nextFocusForward="@+id/field3"
    android:nextFocusDown="@+id/field4"/>

<EditText
    android:id="@+id/field3"
    android:focusable="true"
    android:nextFocusForward="@+id/field4"/>

<EditText
    android:id="@+id/field4"
    android:focusable="true"/>
Bijdragen

Volgorde voor hulpmiddelen aanpassen

On Android, you can set the accessibility order in XML, or modify the accessibility order in code. You can use the android:accessibilityTraversalAfter and android:accessibilityTraversalBefore properties in XML. Or you can use the setAccessibilityTraversalBefore and setAccessibilityTraversalAfter methods in code.

header.setAccessibilityTraversalBefore(R.id.description)
list.setAccessibilityTraversalAfter(R.id.description)
Bijdragen

Accessibility focus verplaatsen

On Android, you can send an AccessibilityEvent of the type TYPE_VIEW_FOCUSED to move the focus of assistive technologies to a specific view. The view must be focusable for this event to take effect.

fun focus(view: View) {
    view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED)
}
Bijdragen

Testen

De meeste stappen kun je testen met de Accessibility Scanner app en Xcode's Accessibility Inspector. Ook contrast issues kun je hiermee automatisch detecteren. Je kunt ook een schermafbeelding maken van een app om de kleurcodes te bepalen en het contrast te berekenen. Dit kan bijvoorbeeld met de Contrast Checker van WebAIM.

Controleer daarnaast of het goed werkt door de schermlezer te gebruiken.

Om te testen of tekst schalen goed wordt ondersteund stel je een groot lettertype in. Dit kun je doen op een telefoon onder de toegankelijkheidsinstellingen.

Vragen?

Door deze stappen te volgen maak je je app voor een heel grote groep mensen toegankelijk. Mis je iets? Is er iets niet helemaal duidelijk? Laat het weten in het slack kanaal van Appt.

Feedback?

Laat 't ons weten!