Hoe VoiceOver vriendelijker te maken in uw iOS-app

Met enkele wijzigingen tijdens de ontwikkeling, kunt u een betere VoiceOver-ervaring voor uw gebruikers creëren.

Sinds Apple ongeveer vijf jaar geleden voor het eerst toegankelijkheidsfuncties op iOS introduceerde, heeft het bedrijf deze functies uitgebreid naar apps van derden door een uitgebreide set toegankelijkheids-API's te maken. Deze API's bieden ontwikkelaars de mogelijkheid om ondersteunende applicaties te maken die een veel breder bereik van gebruikers bereiken.

Maar het toegankelijk maken van uw app is slechts een begin. U moet ook empathisch zijn voor de manier waarop een gebruiker mogelijk moet navigeren door de toegankelijkheidsinhoud in uw apps.

Denk vooral aan VoiceOver, over manieren om de navigatiebelasting te verminderen die toegankelijkheid kan toevoegen aan een ervaring. Houd er bovendien rekening mee hoe VoiceOver voor een gebruiker kan klinken als het de inhoud van het ene scherm naar het andere of een component naar het volgende aankondigt.

In deze zelfstudie laten we u zien hoe u uw toegankelijkheidsitems kunt groeperen in complexe weergaven. Dit vermindert de hoeveelheid elementen door het scherm te vegen en maakt het navigatieproces iets minder omslachtig voor gebruikers.

Voordat we aan de slag gaan, laten we ervoor zorgen dat u enkele basisprincipes kent.

Toegankelijkheidseigenschappen, leer ervan te houden

Toegankelijkheidseigenschappen zijn essentieel om uw inhoud beschikbaar te maken voor een bredere community. De toegankelijkheidseigenschappen waar we ons op zullen richten zijn: ToegankelijkheidElement, shouldGroup ToegankelijkheidKinderen, toegankelijkheidLabel en toegankelijkheidHint.

  • isAccessibilityElement: eenvoudig genoeg, toch? Deze waarde vertelt iOS of het een element is waartoe een ondersteunende toepassing toegang heeft.
  • shouldGroupAccessibilityChildren: dit geeft aan of VoiceOver de elementen van de ontvanger moet groeperen, ongeacht hun positie op het scherm (d.w.z. UICollectionView- en UITableView-cellen).
  • ibilityLabel: Dit is wat VoiceOver zal aankondigen voor een bepaald toegankelijkheidselement. Het is een beknopt label dat het toegankelijkheidselement identificeert.
  • ibilityHint: Meestal is dit een beschrijving van wat een bepaald toegankelijkheidselement is of kan doen. Bijvoorbeeld: "Dubbeltik om te bekijken" of "Knop".

VoiceOver inschakelen in uw Apple-product kan op twee manieren:

  • Handmatig: ga op uw apparaat naar Instellingen> Algemeen> Toegankelijkheid> VoiceOver en tik op VoiceOver naar de status Aan. Dat is gemakkelijk één keer te doen, maar deze stappen meerdere keren achter elkaar uitvoeren tijdens het testen wordt vervelend. Gelukkig is er een snelkoppeling!
  • VoiceOver-snelkoppeling: Ga op uw apparaat naar Instellingen> Algemeen> Toegankelijkheid> Toegankelijkheidsnelkoppeling en zorg ervoor dat VoiceOver is geselecteerd. Nu hoeft u alleen maar driemaal op de Home-knop te drukken om VoiceOver in of uit te schakelen. Geweldig toch ?!

Als je je afvraagt, werkt dit niet in de iOS-simulator. U moet uw toevoegingen voor toegankelijkheid op een fysiek apparaat testen.

Begrepen? Geweldig, laten we beginnen.

Toegankelijkheidsinhoud combineren in groepen

Zoals ik al eerder zei, kan het navigeren door toegankelijkheidselementen snel een omslachtige activiteit worden. Stel je voor dat je naar links en rechts moet vegen tussen elk label en elke afbeelding in een UICollectionViewController of UITableViewController. Niet leuk toch? Wat kunt u doen om dat een beetje draaglijker te maken?

Een manier om dit probleem op te lossen, is om elke cel in die gevallen als een enkel element te beschouwen. Stel je nu voor dat je naar links en rechts tussen elke cel kunt vegen, omdat de cel alle inhoud afleest en niet label voor label. Dat klopt, de rijke toegankelijkheids-API van Apple geeft ons de mogelijkheid om dit met een eenvoudige truc te doen.

Laten we eens kijken hoe we dit kunnen doen met een UICollectionView.

Stel eerst in uw code de toegankelijkheidseigenschappen in voor uw collectieweergave. Zie onderstaand voorbeeld.

// Toegankelijkheid
collectionView.isAccessibilityElement = false
collectionView.shouldGroupAccessibilityChildren = true

Hier vertellen we de ondersteunende toepassing om te doen alsof de collectieweergave er niet is. Het wordt dus niet geselecteerd als een gebruiker door de bovenliggende weergave veegt wanneer VoiceOver is ingeschakeld. Ik weet dat dit contra-intuïtief lijkt, maar maak je geen zorgen. Het volgende dat we zullen doen, is elk element in die collectieweergave instellen als een toegankelijkheidselement.

In dit voorbeeld passen we de toegankelijkheid toe op een UICollectionViewCell die informatie weergeeft voor een muziekalbum. Elke cel heeft een afbeelding, albumtitel en artiestennaam.

@IBOutlet var imageView: UIImageView!
@IBOutlet var titleLabel: UILabel!
@IBOutlet var artistLabel: UILabel!

Eerst zullen we onze cel configureren:

laatste func configure (cellWithModel model: Album) {
    if let artworkName = model.artworkName {
        imageView.image = UIImage (genaamd: artworkName)
    }
    artistLabel.text = model.artist? .name
    titleLabel.text = model.title
    applyAccessibility ()
}

Pas vervolgens de toegankelijkheidseigenschappen toe op elke UICollectionViewCell:

laatste functie applyAccessibility () {
    isAccessibilityElement = true
    ibilityLabel = “\ (titleLabel.text!) \ (artistLabel.text!)”
    ibilityHint = "Dubbeltik om te spelen."
    imageView.isAccessibilityElement = false;
    artistLabel.isAccessibilityElement = false;
    titleLabel.isAccessibilityElement = false;
}

Zoals u kunt zien, is elke cel ingesteld als een toegankelijkheidselement dat het op zijn beurt toevoegt aan de lijst met toegankelijkheidsitems voor de bovenliggende weergave. Dit betekent dat als een gebruiker door de items van de collectieweergave bladert, elk element de mogelijkheid krijgt om de inhoud te beschrijven.

Vervolgens hebben we niet alleen de titleLabel-tekst, maar ook de artistLabel-tekst toegevoegd aan de eigenschapibilityLabel van de cel. Op deze manier horen VoiceOver de gebruiker de inhoud van beide labels in onze albumcel in plaats van alleen de ene of de andere. En natuurlijk stellen we de eigenschapibilityHint in, zodat gebruikers weten wat er zal gebeuren als ze de dubbeltikactie uitvoeren. Houd er rekening mee dat toegankelijkheidstips altijd worden gesproken na een korte pauze nadat het toegankelijkheidslabel van een element is gelezen. Je hoort het niet meteen.

Ten slotte stellen we in onze albumcel de waarde van de toegankelijkheid van elk element in op false. Natuurlijk maakt het instellen van een cel als een toegankelijkheidselement de onderliggende elementen standaard niet-toegankelijkheidselementen.

Oef, nu na dat alles, laten we eens kijken hoe het werkt. Deze video laat zien wat er zou gebeuren als we niet alle bovenstaande stappen hadden uitgevoerd en toont vervolgens een voorbeeld waarin we onze toegankelijkheidseigenschappen hebben toegepast.

Gegroepeerde celelementen klinken niet alleen beter als ze worden gelezen door VoiceOver, ze verminderen de navigatie.

Toegankelijke UICollectionViewCells klinken als een mens

Vaak merk ik dat ontwikkelaars de toegankelijkheid binnen hun apps haasten. Dit kan te wijten zijn aan een aantal factoren, maar de inhoud van de eigenschapibilityLabel heeft meestal slechts een klein beetje liefde nodig.

In het vorige voorbeeld van hoe we het toegankelijkheidslabel van onze albumcel instellen, zult u merken dat deze in sommige gevallen vrij snel de inhoud leest. Maar wat als we onze labels zouden schrijven zoals we praten? Door een komma of zelfs een voegwoord toe te voegen, kunt u het label een beetje beter laten klinken voor uw publiek door pauzes te maken in het dictaat van VoiceOver

Hier is een eenvoudig voorbeeld van het toevoegen van een komma aan het toegankelijkheidslabel voor onze albumcellen.

ibilityLabel = “\ (titleLabel.text!), \ (artistLabel.text!)”

Het is subtiel maar effectief. Bekijk deze korte video om te horen wat een verschil dit kan maken. In de video bevatten cellen aan de linkerkant geen komma's, terwijl de cellen aan de rechterkant dat wel doen.

Werk met toegankelijkheid in gedachten

Apple heeft de eerste stap gezet en ontwikkelaars de mogelijkheid geboden om ondersteunde applicaties te maken. Ga door met het toevoegen van toegankelijkheid aan uw ontwikkelingsworkflows. Het is eenvoudiger dan u denkt en de gebruikers van uw app zullen u hiervoor bedanken!

Abonneer je op BPXL Craft en volg Black Pixel op Twitter voor meer informatie over ontwerp en ontwikkeling.

Black Pixel is een creatief bureau voor digitale producten. Meer informatie op blackpixel.com.