Ondersteunt Dynamische Type

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Zorg ervoor dat textelementen schalen naar de voorkeurslettergrootte van de gebruiker

Not for use with personal data

WCAG 2.0 - 1.4.4 AA Impact - Critical

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.

note

De regel Supports Dynamic Type wordt nu standaard uitgevoerd en de eigenschap optInToSupportsDynamicType is verouderd. Als u eerder voor deze regel had gekozen, verwijder dan de eigenschap uit uw code.

Foutief Voorbeeld ❌

A screen with body text displayed at the default font size. A callout indicates Dynamic Type is set to the largest size, but the text remains unchanged.

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 ✅

A screen with body text that has scaled up after increasing the Dynamic Type setting to the largest size.

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
  • Deze regel draait op Apple's XCUI Accessibility Audit API, dat iOS 17.0 of later vereist.
  • Supports Dynamic Type wordt alleen uitgevoerd tijdens gerichte tests en zal geen resultaten opleveren met Auto Scan.

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?

Supports Dynamic Type heeft een kritische impact voor gebruikers met een visuele beperking, en we raden sterk aan om alle gevonden problemen op te lossen. In zeldzame gevallen kan het acceptabel zijn om deze regel te negeren - bijvoorbeeld als de tekst functioneert als een logo of merkwoordmerk, waarbij de presentatie zelf essentieel is en niet verwacht wordt dat deze wordt aangepast. Meer informatie over regels negeren.

Hulpmiddelen

Deque University Cursus Pagina's

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

Andere Bronnen