iOS-toegankelijkheid: Aan de slag

Mensen van alle rangen en standen, van alle leeftijden en met verschillende achtergronden gebruiken smartphone-apps, ook mensen met een handicap. Als je je apps ontwerpt met toegankelijkheid in gedachten, helpt dat iedereen ze te gebruiken, ook mensen met een visuele, motorische, leer- of gehoorbeperking.

In deze iOS-toegankelijkheidstutorial transformeer je een bestaande app om hem toegankelijker te maken voor mensen met een visuele handicap. Daarbij leert u hoe u:

• VoiceOver gebruikt.
• Uw app controleert met de Accessibility Inspector.
• Uitbreiden van toegankelijkheidselementen met UIKit.
• Een betere gebruikerservaring bouwen voor mensen met een handicap.

Voor deze tutorial zijn Xcode 11.3 en Swift 5.1 vereist. Er wordt van uitgegaan dat u de basisbeginselen van Swift-ontwikkeling al kent. Als Swift nieuw voor u is, kunt u het beste eerst ons boek, Swift Apprentice, lezen.

Aan de slag

In deze tutorial werkt u met een reeds voltooide app genaamd Recept, die een lijst met recepten en hun moeilijkheidsgraden bevat. Ook kunt u de kwaliteit van de gerechten die u maakt beoordelen.

Download alles wat je nodig hebt om te beginnen met behulp van de Download Materialen knop aan de bovenkant of onderkant van de tutorial. Open Recipe.xcodeproj in de beginmap.

Voordat je de app op een apparaat kunt uitvoeren, moet je ondertekening configureren.

Om dit te doen, klik je op het Recipe-project in de navigator en selecteer je vervolgens het doel met dezelfde naam. Selecteer het tabblad Signing & Capabilities en zorg ervoor dat u Debug bovenaan selecteert. Kies ten slotte uw team in de vervolgkeuzelijst.

De Recept-app leren kennen

Nu kunt u de app bouwen en uitvoeren om vertrouwd te raken met de functies.

De hoofdcontroller is een tabelweergave van recepten met een afbeelding, een beschrijving en een moeilijkheidsgraad. Klik op een recept voor een grotere afbeelding met de ingrediënten en instructies van het recept.

Om het nog spannender te maken, kun je ook de items op de lijst afstrepen om er zeker van te zijn dat je alle benodigde ingrediënten hebt. Als je het lekker of niet lekker vindt, kun je de like/dislike emoji aanzetten.

Achter de schermen van de recepten-app

Wees een paar minuten vertrouwd met de code in het beginproject. Hier zijn enkele hoogtepunten:

• Main.storyboard bevat alle storyboard-scènes voor de app. Je zult zien dat alle UI componenten standaard UIKit controls en views zijn. Ze zijn al toegankelijk, wat je werk makkelijker maakt.
• RecipeListViewController.swift beheert de hoofdtabelweergave, die de lijst van alle beschikbare recepten weergeeft. Het gebruikt een array van Recipe objecten als de gegevens bron.
• Recipe.swift is het model object dat een recept voorstelt. Het bevat utility methoden voor het laden van een array van recepten die u zult gebruiken in de app.
• RecipeCell.swift is de cel voor het recept lijst van de root controller. Het toont de moeilijkheidsgraad van het recept, de naam en foto op basis van het doorgegeven Recipe model object.
• RecipeInstructionViewController.swift bevat de controller code voor de detailweergave, die een grote afbeelding van het gerecht toont, samen met de ingrediënten en kookinstructies. Het bevat een UISegmentedControl om te schakelen tussen ingrediënten en instructies in de tabelweergave, die InstructionViewModel gebruikt.
• InstructionViewModel.swift fungeert als de gegevensbron voor RecipeInstructionsViewController. Het bevat beschrijvingen voor ingrediënten en instructies, evenals statusinformatie voor de selectievakjes.
• InstructionCell.swift definieert een cel die een label en een selectievakje bevat voor gebruik in instructies en ingrediëntenlijsten. Wanneer u het vakje aanvinkt, wordt de tekst doorgestreept.

Nu u begrijpt hoe de app werkt, is het tijd om te overwegen hoe u deze toegankelijker kunt maken.

Waarom toegankelijkheid?

Voordat u met de code aan de slag gaat, is het belangrijk om de voordelen van toegankelijkheid te begrijpen.

• Door uw app te ontwerpen voor toegankelijkheid wordt het eenvoudiger om functionele tests te schrijven, of u nu het KIF-framework of UI Testing in Xcode gebruikt.
• U verbreedt ook uw markt en gebruikersbasis door uw app bruikbaar te maken voor een grotere groep.
• Als je voor een overheidsinstantie werkt, ben je verplicht om 508-naleving te implementeren, waarin staat dat alle software of technologie toegankelijk moet zijn voor alle gebruikers.
• Het implementeren van toegankelijkheid in je app laat zien dat je bereid bent om een stap extra te zetten voor elke gebruiker, en dat is een goede zaak.
• Het voelt goed om te weten dat je een klein maar merkbaar verschil maakt in iemands leven!

Vertuigd? Dan is het tijd om kennis te maken met VoiceOver, een toegankelijkheidshulpmiddel voor mensen met een visuele handicap.

Het inschakelen van VoiceOver

iOS wordt geleverd met het schermleestoestel VoiceOver, dat gebruikers helpt met software te werken zonder het scherm te hoeven zien. Het is speciaal ontworpen voor mensen met zichtproblemen.

VoiceOver laat gebruikers met een visuele handicap horen en communiceren met wat er op het scherm zichtbaar is. VoiceOver reageert op gebaren en laat de gebruiker hoorbaar weten wat er op het scherm staat of wat de gebruiker selecteert. In wezen vormt VoiceOver de schakel tussen de UI en de aanraakinvoer van de gebruiker.

De snelste manier om VoiceOver te gebruiken, is door op je iOS-apparaat de app Instellingen te openen, Toegankelijkheid te selecteren ▸ Toegankelijkheidssnelkoppeling en vervolgens VoiceOver te selecteren.

Dit is een snelkoppeling waarmee je op een fysiek apparaat drie keer op de thuisknop kunt tikken – of op de zijknop, voor nieuwere telefoons – om VoiceOver in of uit te schakelen.

Nu je VoiceOver hebt ingeschakeld, is het tijd om het uit te proberen.

Hoe gebruik je VoiceOver

VoiceOver wordt geleverd met een aantal handige voorinstellingen voor gebaren, waarmee je gemakkelijk door een app kunt navigeren. Dit zijn enkele van de meest voorkomende in-app bewegingen die u met VoiceOver kunt gebruiken:

• Tik één keer op een willekeurige plek op het scherm en VoiceOver leest de informatie uit de toegankelijkheidskenmerken van het onderdeel hardop voor.
• Eén veeg naar links of rechts en VoiceOver selecteert het volgende zichtbare toegankelijkheidsitem en leest het hardop voor. Met een veegbeweging naar rechts gaat u vooruit en omlaag, met een veegbeweging naar links doet u het tegenovergestelde.
• Met een veegbeweging naar beneden spelt u het gefocuste item letter voor letter.
• Dubbeltik om het gefocuste item te selecteren.
• Door met drie vingers naar links of rechts te vegen navigeert u vooruit of achteruit in een paginaweergave.

Voor de volledige lijst met VoiceOver-bewegingen gaat u naar Apple’s ‘Leer VoiceOver-bewegingen op iPhone’. Nu weet je dus hoe VoiceOver werkt, maar hoe doet je app het in combinatie met VoiceOver? Dat ga je in de volgende stap testen.

StemOver uitproberen met de Recepten-app

Bouw en draai op een fysiek apparaat en klik drie keer op de thuisknop om VoiceOver in te schakelen. Veeg naar links en rechts om door de receptenlijst te navigeren. VoiceOver leest de elementen van linksboven naar rechtsonder. Het begint met de naam van de kop, gevolgd door de naam van elk recept en de naam van de bijbehorende afbeelding.

Maar er zijn een paar problemen met de VoiceOver-ervaring:

1. Beeld is geen behulpzame beschrijving van de beeldweergaven in elke cel. Je weet dat er een afbeelding is, maar niet wat het is.
2. VoiceOver zegt niets over de moeilijkheidsgraad van elk recept, waardoor deze functie nutteloos is voor mensen met een visuele handicap.

Nu je de probleemgebieden hebt geïdentificeerd, wil je er misschien meteen induiken om ze te repareren. Maar voordat u dat doet, moet u eerst een beetje weten hoe toegankelijkheidskenmerken werken.

Toegankelijkheidsattributen

Toegankelijkheidsattributen zijn de kerncomponenten die u moet implementeren om toegankelijkheid te ondersteunen. Deze attributen voorzien VoiceOver van informatie over elementen in je app, zodat VoiceOver die informatie hardop aan je gebruikers kan voorlezen. Als ze niet goed zijn geconfigureerd, kan VoiceOver niet de benodigde gegevens over je app leveren.

Een toegankelijkheidsattribuut heeft vijf eigenschappen:

1. Label: Een beknopte manier om het besturingselement of de weergave te identificeren. Enkele voorbeelden zijn Terug-knop en Recept-afbeelding.
2. Eigenschappen: Deze beschrijven de toestand, het gedrag of het gebruik van het element. Een knop trait zou bijvoorbeeld kunnen zijn is geselecteerd.
3. Hint: Beschrijft de actie die een element voltooit. Bijvoorbeeld: Toont het recept detail.
4. Frame: Het kader van het element binnen het scherm, in de opmaak van een CGRect. VoiceOver spreekt de inhoud van de CGRect uit.
5. Waarde: De waarde van een element. Bij een voortgangsbalk of een schuifregelaar zou de huidige waarde bijvoorbeeld kunnen luiden: 5 op 100.

De meeste UIKit-componenten stellen deze attributen vooraf voor u in; u hoeft alleen de details aan te leveren om de gebruikerservaring te verbeteren. Als je aangepaste besturingselementen maakt, moet je de meeste attributen zelf leveren.

Nu je weet hoe VoiceOver aan de informatie komt die het gebruikers biedt, is het tijd om kennis te maken met een nieuw hulpmiddel waarmee je zwakke plekken in je app kunt vinden en verhelpen: de Accessibility Inspector.

Toepassing van de Accessibility Inspector

Als je een app aanpast om hem toegankelijker te maken, is het vinden van zwakke plekken tijdrovend en foutgevoelig. Gelukkig is er een hulpmiddel, genaamd Accessibility Inspector, dat het volgende doet:

• Doorloopt uw app en vindt veelvoorkomende toegankelijkheidsproblemen.
• Laat u de toegankelijkheidsattributen van UI-elementen in Inspectiemodus controleren.
• Geeft live previews van toegankelijkheidselementen zonder je app te verlaten.
• Ondersteunt alle platforms, waaronder macOS, iOS, watchOS en tvOS.

Voordat je de Accessibility Inspector op Recepten gebruikt, bekijk je eerst de tool. Open het eerst in het Xcode-menu door te navigeren naar Xcode ▸ Open Developer Tool ▸ Accessibility Inspector.

De inspector zou er ongeveer zo uit moeten zien:

Met de doelkiezer kunt u kiezen welk apparaat u wilt inspecteren. Dit kan uw MacBook Pro, een iOS-apparaat of uw simulator zijn.

Met live-voorbeelden van toegankelijkheidselementen kun je direct in de simulator testen. Omdat live-previews sneller zijn dan het beluisteren van VoiceOver, zul je hier het grootste deel van je werk doen tijdens deze iOS-tutorial over toegankelijkheid.

Bouwen en uitvoeren in een simulator, en het doel van de Accessibility Inspector wijzigen in je simulator:

Nu je het hulpprogramma hebt geopend, kun je een aantal van de nuttigste functies bekijken.

De inspectiewijzer gebruiken

Het selecteren van de inspectiewijzer, die eruitziet als een dradenkruis in de UI van de inspecteur, is vergelijkbaar met het inschakelen van VoiceOver op uw apparaat. Wanneer u de aanwijzer activeert, kunt u met de muis over elk UI-element gaan om de attributen te controleren. Als u rechtstreeks met de simulator reageert door op een knop te drukken, wordt de inspectiewijzer gedeactiveerd.

Inspectie-detailpaneel heeft alles wat u nodig hebt om de toegankelijkheidsattributen in uw app te bekijken en ermee te interageren:

• Basis: toont de attribuuteigenschappen voor het momenteel gemarkeerde element.
• Acties: Hiermee kunt u acties uitvoeren, zoals het tikken op een knop of het scrollen van de weergave. Door in dit deelvenster op de knop Uitvoeren te drukken, wordt de actie op het doel uitgevoerd.
• Element: Toont de klasse, het adres en de controller van het huidige element. Vanaf het moment dat ik dit schrijf, werkt het niet consistent.
• Hiërarchie: Toont de weergavehiërarchie voor het element, waardoor complexe weergaven gemakkelijker te begrijpen zijn.

Gebruik Quicklook om audio in Xcode te controleren

Xcode 11 heeft een nieuwe functie in het deelvenster Inspectiedetails, binnen het gedeelte Quicklook bovenaan, waarmee u in Xcode de audio kunt simuleren die u op uw apparaat zou horen. Dit betekent dat u kunt controleren wat uw gebruikers horen als ze uw app gebruiken, zonder dat u een echt apparaat nodig hebt.

Druk op de knop Afspelen terwijl de app in een simulator draait, laat de toegankelijkheidsinspecteur door de app lopen en luister hoe elk element hardop wordt beschreven.

Als je liever elk element handmatig doorloopt, kun je op de knop Pauze drukken of op de knop Audio in de sectie Quicklook. Druk op de knoppen Vooruit of Terug om elk element in uw eigen tempo te doorlopen.

Het gebruik van deze functie is sneller dan het uitvoeren van uw app op een apparaat en het gebruik van VoiceOver, met name tijdens de ontwikkeling. Zoals altijd moet u uw app met alle toegankelijkheidskenmerken ook op echte apparaten testen.

Herkennen van problemen met de Inspector Audit

Een van de nuttigste functies van de Inspector Audit is de auditfunctie, waarmee u wordt gewaarschuwd voor toegankelijkheidsproblemen in uw app. Om deze functie uit te proberen, zorg ervoor dat de simulator nog steeds draait en dat u in de receptenlijst staat. Klik in de inspector op het Audit icoon en vervolgens op Audit uitvoeren.

U zult zien dat de inspector verschillende waarschuwingen geeft, waaronder dat sommige van uw elementen een beschrijving missen.

Wanneer u op een waarschuwing klikt, markeert Xcode het gerelateerde element in de simulator en onderaan het inspector-auditscherm.

In dit geval hebben de beeldweergaven die aan de cellen zijn gekoppeld geen beschrijving. Dit betekent dat VoiceOver niet in staat is ze aan uw lezers te beschrijven.

Klik op het pictogram Oplossingen voorstellen, dat eruitziet als een vraagteken in een cirkel, voor een van de waarschuwingen en de inspecteur zal suggesties doen over hoe het probleem kan worden opgelost. U kunt deze suggesties later opvolgen.

Klik op het Oog-pictogram om een momentopname van de app te maken. Dit is handig voor iedereen in de kwaliteitsborging die nauwkeurige foutrapporten moet maken.

Er zijn nog een paar handige toegankelijkheidsinstellingen die u in de inspector kunt vinden. Hierna worden deze functies kort besproken.

Aanvullende instellingen van de Inspector

Hoewel ze buiten het bestek van deze tutorial vallen, is het goed om te weten dat u met de toegankelijkheidsinspector ook de volgende toegankelijkheidsinstellingen kunt testen:

1. Inverteer kleuren
2. Verhoog contrast
3. Verminder transparantie
4. Verminder beweging
5. Verander lettergrootte

U hoeft de Instellingen app niet meer te gebruiken om deze functies in te schakelen. De toegankelijkheidsinspector biedt momenteel alleen deze vijf opties, maar Apple is van plan om er in de toekomst meer toe te voegen.

De toegankelijkheidsinspector bespaart tijd bij het testen van uw app. Vergeet echter niet dat u VoiceOver nog steeds handmatig moet testen om de daadwerkelijke gebruikerservaring uit te proberen. Met deze laatste stap kunt u eventuele problemen opsporen die de inspector over het hoofd ziet.

Nu u een rondleiding hebt gehad door de functies van de toegankelijkheidsinspector, is het tijd om aan de slag te gaan met uw app.

De recept-app toegankelijk maken

Toen u uw app met VoiceOver op uw apparaat testte, merkte u dat de beschrijvingen van de afbeeldingen niet erg nuttig waren. De audithulp toonde u de reden waarom: De afbeeldingsweergave had geen toegankelijkheidslabel. U gaat dit nu oplossen.

In Xcode opent u RecipeCell.swift en voegt u de volgende code toe aan de onderkant van het bestand:

// MARK: Accessibilityextension RecipeCell { func applyAccessibility(_ recipe: Recipe) { // 1 foodImageView.accessibilityTraits = .image // 2 foodImageView.accessibilityLabel = recipe.photoDescription }}

Deze code vult de ontbrekende toegankelijkheidseigenschappen in op basis van het Recipe-object voor de cel. Hier is hoe het werkt:

1. accessibilityTraits neemt een masker van eigenschappen die het toegankelijkheidselement karakteriseren. In dit geval geeft .image aan dat het om een afbeelding gaat.
2. U gebruikt accessibilityLabel om het element in VoiceOver te beschrijven. Hier is dat recipe.photoDescription, een tekenreeks die de inhoud van de afbeelding beschrijft.

Nu wil je dit ook toepassen op toekomstige recepten. Zoek configureCell(_:) in de RecipeCell klasse. Voeg de volgende regel toe aan het eind van de methode:

applyAccessibility(recipe)

Elke keer dat je een cel maakt, past deze code de toegankelijkheidsattributen toe op de afbeelding met behulp van eigenschappen in het receptobject.

Bouw en draai op je apparaat en schakel VoiceOver in met drie keer tikken op de home-knop. Test de receptenlijst om te zien of de beeldbeschrijvingen zinvoller zijn.

Veel beter! In plaats van alleen “Afbeelding” te horen, wat geen specifieke details gaf, hoort u nu een volledige beschrijving van de afbeelding. De gebruiker kan nu het voedsel visualiseren in plaats van gefrustreerd te raken omdat hij niet weet wat de afbeelding is.

Terwijl de app nog steeds in de simulator draait, voert u de toegankelijkheidsinspector opnieuw uit en navigeert u naar de lijst met recepten. Wis alle waarschuwingen in de inspector en tik op Audit uitvoeren.

WOOt – geen waarschuwingen meer over beschrijvingen! Nadat u met succes beschrijvingen aan de afbeeldingen hebt toegevoegd, is de kern van deze weergave nu volledig toegankelijk.

Nu is het tijd om de moeilijkheidsgraad van een recept toegankelijk te maken.

De moeilijkheidsgraadlabels omvormen

In de toegankelijkheidsinspector ziet u mogelijk ontoegankelijke tekstwaarschuwingen, die u vertellen dat de moeilijkheidsgraadlabels onzichtbaar zijn voor een gebruiker met een visuele beperking. Om dit te verhelpen, moet u de labels toegankelijk maken en hun eigenschappen bijwerken met een zinvolle beschrijving.

Voor uw volgende stap gaat u naar RecipeCell.swift en voegt u het volgende toe aan het einde van applyAccessibility(_:):

// 1difficultyLabel.isAccessibilityElement = true// 2difficultyLabel.accessibilityTraits = .none// 3difficultyLabel.accessibilityLabel = "Difficulty Level"// 4switch recipe.difficulty {case .unknown: difficultyLabel.accessibilityValue = "Unknown"case .rating(let value): difficultyLabel.accessibilityValue = "\(value)"}

Hier volgt wat meer informatie over wat deze code doet:

1. isAccessibilityElement is een vlag die het item zichtbaar maakt voor toegankelijkheidsfuncties wanneer true. Voor de meeste UIKit-klassen is de standaard true, maar voor UILabel is dat false.
2. accessibilityTraits helpt bij het karakteriseren van het toegankelijkheidselement. Omdat u geen interacties nodig hebt, stelt u in dat het geen eigenschappen heeft.
3. Naar aanleiding hiervan laat u VoiceOver beknopt de bedoeling van dit label aangeven. Difficulty Level laat de gebruiker precies weten waar hij mee te maken heeft.
4. VoiceOver leest de accessibilityValue als onderdeel van de labelbeschrijving. Door hier de moeilijkheidsgraad in te stellen, wordt dit element veel nuttiger.

Bouw en draai je app op een fysiek apparaat, tik drie keer op de homeknop om VoiceOver in te schakelen en veeg door de receptenlijst.

Terwijl je door de verschillende toegankelijkheidselementen bladert, leest VoiceOver een volledige beschrijving van elke cel voor, inclusief de moeilijkheidsgraad.

Controle op waarschuwingen

Telkens wanneer u een nieuw toegankelijkheidselement blootlegt, zoals u hier hebt gedaan met de moeilijkheidsgraad, moet u de controle opnieuw uitvoeren.

Start de toegankelijkheidsinspector, als deze nog niet actief is. Start de app op uw apparaat of op de simulator en stel het doel van de inspector overeenkomstig in. Selecteer nu de knop voor controle en tik op Controle uitvoeren.

Er zijn minder waarschuwingen verschenen! De resterende waarschuwingen gaan over labels die geen dynamische tekst ondersteunen. Die zult u nu repareren.

De tekst dynamisch maken

De auditor waarschuwt u dat u een belangrijke stap mist om uw app voor iedereen bruikbaar te maken: dynamische tekst. Dit is een belangrijke functie voor toegankelijkheid, waarmee gebruikers met een gedeeltelijk gezichtsvermogen de lettergrootte kunnen vergroten voor leesbaarheid. Het niet-dynamische lettertype dat uw app momenteel gebruikt, staat dit niet toe.

Klik op het pictogram Suggesties verhelpen om te zien wat de controleur aanbeveelt:

Het vertelt u om een UIfont-voorkeurslettertype te gebruiken en adjustsFontForContentSizeCategory op true in te stellen. Dat gaat u nu doen.

In RecipeCell.swift voegt u de volgende code toe in applyAccessibility(_:) helemaal onderaan:

dishNameLabel.font = .preferredFont(forTextStyle: .body)dishNameLabel.adjustsFontForContentSizeCategory = truedifficultyLabel.font = .preferredFont(forTextStyle: .body)difficultyLabel.adjustsFontForContentSizeCategory = true

Dit stelt de preferredFont in op een body stijl, wat betekent dat iOS de tekst op dezelfde manier stijlt als de body van een document. De details van de grootte en het lettertype zijn afhankelijk van de toegankelijkheidsinstellingen. adjustsFontForContentSizeCategory geeft aan dat het lettertype automatisch moet worden aangepast wanneer de gebruiker de grootte van de tekstinhoud wijzigt.

Het testen van hoe uw app omgaat met het wijzigen van de grootte van lettertypen is eenvoudig, dankzij de Accessibility Inspector.

Bouw en voer het recept app samen met de Accessibility Inspector. Voer de controle opnieuw uit en alle waarschuwingen zouden verdwenen moeten zijn.

Andere opties testen

Navig naar de Instellingen-knop in de inspector en experimenteer met enkele hulpmiddelen:

1. Kleuren omkeren om te bekijken hoe uw interface eruitziet met deze toegankelijkheidsfunctie. Dit is handig voor mensen met licht gevoeligheden, slecht zicht en in sommige gevallen, kleurenblindheid.
2. U kunt ook dynamische veranderingen in lettergrootte in real-time testen voor gebruikers die de voorkeur geven aan grotere lettergroottes.

Als u uw app test, ziet die er waarschijnlijk ongeveer zo uit:

De inspector maakt het testen van toegankelijkheidsgevallen eenvoudig. Hieruit kun je afleiden dat de receptenlijst goed zal werken voor gebruikers met een visuele handicap.

Het receptdetailscherm omvormen

Nu je de lijst met receptopties onder handen hebt genomen, wil je zien wat er gebeurt als een gebruiker op een van de recepten klikt. Start de app op uw toestel, schakel VoiceOver in en kijk rond in het detailscherm. Het klinkt ongeveer als volgt:

Er zijn enkele problemen met de VoiceOver-interactie in de detailweergave:

1. De knop met de linkerpijl is geen goede beschrijving voor de navigatie. Hoe kan de gebruiker weten wat de knop doet?
2. De emoji gezichtjes zijn: hartvormige ogen en verward gezicht. Deze verklaringen zouden elke gebruiker in verwarring brengen!
3. Als de gebruiker een selectievakje selecteert, staat er lege pictogram, wat niet veel verklaart.

In elk van deze gevallen is het belangrijk uit te leggen wat de status van het besturingselement betekent, in plaats van hoe het eruit ziet. De knop Terug is duidelijker dan de knop Pijl naar links. Like en Dislike leggen de emoji’s beknopt uit. Deze twee wijzigingen breng je als volgt aan.

Om de navigatie te veranderen, open je RecipeInstructionsViewController.swift en voeg je het volgende toe aan viewDidLoad, na assert(recipe != nil):

backButton.accessibilityLabel = "back"backButton.accessibilityTraits = .button

In plaats van Pijl-links-knop, zegt VoiceOver nu Terug-knop.

Nu verder met de emoji’s. Vervang in hetzelfde bestand de inhoud van isLikedFood(_:) door het volgende:

if liked { likeButton.setTitle("😍", for: .normal) likeButton.accessibilityLabel = "Like" likeButton.accessibilityTraits = .button didLikeFood = true} else { likeButton.setTitle("😖", for: .normal) likeButton.accessibilityLabel = "Dislike" likeButton.accessibilityTraits = .button didLikeFood = false}

Voor zowel de Like- als de Dislike-modus heb je een accessibilityLabel toegevoegd die duidelijk maakt wat de knop doet. U hebt ook accessibilityTraits ingesteld om het als een knop te identificeren, zodat de gebruiker weet hoe hij ermee kan interageren.

Bouw en voer uit op een apparaat en schakel VoiceOver in. Navigeer met VoiceOver naar het detailscherm van het recept en test de wijzigingen aan de knoppen bovenin de weergave.

Nu heeft elk van deze functies een duidelijke, korte beschrijving die de gebruiker helpt de bedoeling ervan te begrijpen. Veel beter!

Verbeter de aankruisvakjes

Het laatste probleem betreft de checklist. Voor elk hokje zegt VoiceOver momenteel pictogram leeg, gevolgd door de receptinstructie. Dat is helemaal niet duidelijk!

Om dit te veranderen, open InstructionCell.swift en zoek naar shouldStrikeThroughText(_:). Vervang het hele if strikeThrough statement door het volgende:

// 1checkmarkButton.isAccessibilityElement = falseif strikeThrough { // 2 descriptionLabel.accessibilityLabel = "Completed: \(text)" attributeString.addAttribute( NSAttributedString.Key.strikethroughStyle, value: 2, range: NSRange(text.startIndex..., in: text))} else { // 3 descriptionLabel.accessibilityLabel = "Uncompleted: \(text)"}

Dit is wat deze code doet:

1. Uitschakelen toegankelijkheid voor vinkje-knop zodat VoiceOver het leest als één eenheid in plaats van twee verschillende toegankelijkheids-elementen.
2. De accessibilityLabel voor de beschrijving gebruikt nu de hard-coded string "Completed" gevolgd door de tekst. Dit biedt alle benodigde info met een enkel bezoek aan het label.
3. Zoals bij de voltooide code, als een gebruiker een item als niet voltooid markeert, voegt u "Uncompleted" toe vóór de labelbeschrijving.

Bouw en draai de app opnieuw en kijk hoe het klinkt. Het zal je gebruikers als muziek in de oren klinken.

Waarheen nu?

Je kunt de voltooide versie van het project downloaden met de knop Download Materialen boven of onder aan deze tutorial.

In deze iOS-toegankelijkheid tutorial heb je geleerd over VoiceOver. Je hebt een handmatige controle uitgevoerd door door elk toegankelijk element te scrollen en de gebruikerservaring zelf te testen. Daarna heb je de toegankelijkheidsinspector gebruikt om audits uit te voeren, de waarden van toegankelijkheidselementen te bekijken en live dynamische wijzigingen door te voeren om kleuren om te keren of de lettergrootte te wijzigen.

Nu beschik je over de benodigde tools om je app toegankelijker te maken. De wetenschap dat je een positieve impact hebt op iemands leven is lonend.

Er zijn een heleboel mogelijkheden met toegankelijkheidsfuncties. Deze tutorial is slechts een tipje van de sluier om je op weg te helpen. Hieronder vindt u meer bronnen om te bekijken:

• Categorieën van toegankelijkheid
• Bronnen voor de ontwikkeling van toegankelijkheid
• Toepassing van toegankelijkheid op aangepaste weergaven
• Werk aan een uitzonderlijke toegankelijkheidservaring
• Toegankelijkheidsinspecteur

Als u opmerkingen of vragen heeft, discussieer dan hieronder mee!