Succescriterium 1.4.4 – Schaalbare tekst

Zorg ervoor dat de tekst vergroot kan worden weergegeven. Via de systeeminstellingen geven gebruikers hun voorkeur aan voor de lettergrootte. 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.

Impact

Veel visueel beperkte en oudere gebruikers die slechter zien hebben in hun systeem vaak de lettergrootte aangepast. Als jouw app deze niet overneemt zorgt dit voor minder gebruiksgemak.

Controleren

Wordt tekst groter weergeven wanneer je een groter lettertype hebt ingesteld?

Dit kan visueel getest worden, zet hiervoor groot lettertype aan.

Oplossing

Op Android kun je gebruik maken van Scale-independent Pixels. Deze eenheid zorgt er voor dat de voorkeuren van de gebruiker mee worden genomen bij het bepalen van de lettergrootte. We raden aan om de textSize in de styles te definiëren zodat het overal gelijk is.

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

Op iOS kun je gebruik maken van Dynamic Font Size. Door gebruik te maken van deze functie wordt de lettergrootte aangepast aan de wensen van de gebruiker. Als je een eigen lettertype gebruikt, kun je de scaledFont methode uit UIFontMetrics gebruiken om de lettergrootte te berekenen.

import UIKit

extension UIFont {
    
    static func sourceSansPro(weight: UIFont.Weight, size: CGFloat, style: TextStyle, scaled: Bool = true) -> UIFont {
        if UIAccessibility.isBoldTextEnabled {
            return font(name: "SourceSansPro-Bold", size: size, style: style, scaled: scaled)
        }
        
        switch weight {
            case .regular:
                return font(name: "SourceSansPro-Regular", size: size, style: style, scaled: scaled)
            case .semibold:
                return font(name: "SourceSansPro-SemiBold", size: size, style: style, scaled: scaled)
            case .bold:
                return font(name: "SourceSansPro-Bold", size: size, style: style, scaled: scaled)
            default:
                fatalError("Font weight \(weight) not supported")
        }
    }

    private static func font(name: String, size: CGFloat, style: TextStyle, scaled: Bool) -> UIFont {
        guard let font = UIFont(name: name, size: size) else {
            fatalError("Font \(name) does not exist")
        }
        guard scaled else {
            return font
        }
        return UIFontMetrics(forTextStyle: style).scaledFont(for: font)
    }
}

Referenties

Meer succescriteria