Ondersteunt Dynamische Type

axe.configuration.optInToSupportsDynamicType = true

Waar We Op Controleren

Textelementen moeten de vereiste eigenschappen hebben om Dynamic Type te ondersteunen en zich aanpassen aan de apparaatbrede lettergroottevoorkeur van de gebruiker.

Deze regel handhaaft een Deque Best Practice. Je kunt deze regel uitschakelen via het Mobile Dashboard of door de regel te negeren in tests geschreven voor iOS.

Leer hoe je regels uitschakelt vanaf het Mobiele Dashboard.

Foutief Voorbeeld ❌

Textelementen gebruiken vaste lettertypen die niet reageren op de Dynamic Type-instelling van de gebruiker

Na het vergroten van de Dynamic Type-instelling naar de grootste grootte, de tekst remains unchanged — het groeit niet om de voorkeur van de gebruiker weer te geven

Correct Voorbeeld ✅

Textelementen gebruiken schaalbare lettertypen die reageren op de Dynamic Type-instelling van de gebruiker

Na het vergroten van de Dynamic Type-instelling naar de grootste grootte, de tekst scales up accordingly om overeen te komen met de apparaatvoorkeur van de gebruiker

In Één Oogopslag

• Deze regel heeft een Kritische impact voor gebruikers met een beperkt gezichtsvermogen die afhankelijk zijn van grotere tekst
• Textelementen moeten Dynamic Type ondersteunen zodat ze van grootte veranderen wanneer de gebruiker de apparaatlettergrootte aanpast

Impact op Gebruikers

Mensen met een beperkt gezichtsvermogen zijn het meest getroffen door tekst die niet kan schalen. Dynamic Type is een iOS-functie die gebruikers hun voorkeurslettergrootte apparaatbreed laat instellen, en het wordt verwacht dat apps die voorkeur respecteren. Wanneer textelementen Dynamic Type niet ondersteunen, moeten gebruikers die grotere tekst nodig hebben zich inspannen om inhoud te lezen die niet schaalt ongeacht hun instellingen.

Bevestig Ondersteuning voor Dynamic Type

1. Navigeer naar het scherm met tekst en observeer de huidige lettergrootte en lay-out
2. Vergroot de lettergrootte door de instelling voor Dynamische Type te wijzigen:
   • Bij gebruik van een simulator:
     1. Open Toegankelijkheidsinspecteur
     2. In de linkerbovenhoek van de inspecteur wijzig je het apparaat van je Mac naar de iOS-simulator
     3. Selecteer de Instellingen-knop in de rechterbovenhoek van de inspecteur
     4. Onder Lettergrootte, verplaats de schuifregelaar naar een grotere instelling
   • Bij gebruik van een iOS 13.0+ apparaat:
     1. Open Instellingen
     2. Selecteer Toegankelijkheid
     3. Selecteer Scherm & Tekstgrootte
     4. Selecteer Grotere Tekst
     5. Verplaats de schuifregelaar onderaan de pagina naar een grotere instelling
3. Ga terug naar je app en observeer het volgende op hetzelfde scherm:
   • Niet Toegankelijk: De tekst veranderde niet van grootte na het updaten van de Dynamic Type-instelling
   • Toegankelijk: De tekst veranderde wel van grootte

Los Problemen op

Om een probleem met Dynamic Type-ondersteuning op te lossen, configureer textelementen om schaalbare lettertypen te gebruiken die reageren op de Dynamic Type-instelling van de gebruiker.

UIKit

Stel adjustsFontForContentSizeCategory = true in op elk textelement zodat het wordt bijgewerkt wanneer de gebruiker zijn Dynamic Type-instelling wijzigt. Gebruik UIFont.preferredFont(forTextStyle:) voor systeemlettertypen, of UIFontMetrics om een aangepast lettertype relatief aan een tekststijl te schalen:

// System font — scales automatically to the user's Dynamic Type setting
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// Custom font — scaled relative to a text style using UIFontMetrics
let customFont = UIFont(name: "Georgia", size: 17)!
label.font = UIFontMetrics(forTextStyle: .body).scaledFont(for: customFont)
label.adjustsFontForContentSizeCategory = true

SwiftUI

In iOS 14 of hoger, kun je Dynamic Type op twee manieren ondersteunen:

• Bij gebruik van een aangepast lettertype, stel de eigenschap .font in op .custom(_:size:relativeTo:) om ervoor te zorgen dat lettertypen relatief schalen met de stijl van het textelement.
• Wanneer je een standaardlettertype naar grootte gebruikt, zal de tekst automatisch schalen. Echter, als er geen letterstijl is ingesteld, zullen textelementen niet schalen volgens hun stijl. Tekst die bijvoorbeeld als titel fungeert, zal anders schalen dan tekst die als loper fungeert. Voor de beste ervaring, specificeer de letterstijl zodat deze overeenkomt met het verwachte gedrag van het element. Door een modificeerder zoals .font(.system(.largeTitle, design: .rounded)) te gebruiken, kun je verwachten dat de tekst de grootste tekst op de pagina is en als een juiste titel dient.

React Native

Stel allowFontScaling={true} in op elk Text-element zodat het kan schalen naar de voorkeursinstellingen van de gebruiker:

<Text style={{ color: 'black', fontSize: 18 }} allowFontScaling={true}> This text allows font scaling. </Text>

Kan ik deze regel negeren?

Ondersteunt Dynamic Type heeft een kritische impact voor gebruikers met slecht zicht. Omdat dit een Best Practice-regel is, kan het worden uitgeschakeld vanaf het mobiele dashboard of onderdrukt in individuele tests. We raden echter sterk aan om Dynamic Type in uw app te ondersteunen in plaats van de regel breed te negeren. Leer meer over regels negeren.

Hulpmiddelen

Deque University Cursus Pagina's

• Succescriterium 1.4.4 - Tekstgrootte aanpassen (AA)
• 1.4.4 Tekstgrootte aanpassen (AA)

Opmerking: Volledige toegang tot Deque University-bronnen vereist een abonnement.

Andere Bronnen

• Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) 2.1, W3C Aanbeveling
  • Succescriterium 1.4.4 - Tekstgrootte aanpassen
• Apple Developer Documentatie
  • Lettertypen Automatisch Schalen
  • Dynamic Type in SwiftUI