iOS-käyttöjärjestelmän saavutettavuus:

Älypuhelinsovelluksia käyttävät kaikenlaiset ihmiset, kaikenikäiset ja eri taustoista tulevat ihmiset, myös vammaiset. Sovellusten suunnittelu esteettömyys huomioiden auttaa kaikkia käyttämään niitä, myös ihmisiä, joilla on näkö-, liikunta-, oppimis- tai kuulovamma.

Tässä iOS:n esteettömyysoppaassa muutat olemassa olevan sovelluksen esteettömämmäksi näkövammaisille ihmisille. Prosessin aikana opit:

• Käytä VoiceOveria.
• Tarkista sovelluksesi Accessibility Inspectorilla.
• Toteuta esteettömyyselementit UIKitillä.
• Rakenna parempi käyttökokemus vammaisille.

Tämä opetusohjelma vaatii Xcode 11.3:n ja Swift 5.1:n. Se olettaa, että osaat jo Swift-kehityksen perusteet. Jos Swift on sinulle uusi, tutustu ensin kirjaamme Swift Apprentice.

Aloittaminen

Tässä opetusohjelmassa työskentelet jo valmiin sovelluksen nimeltä Recipe kanssa, joka sisältää luettelon resepteistä ja niiden vaikeustasoista. Sen avulla voit myös arvioida tekemiesi ruokien laatua.

Lataa kaikki, mitä tarvitset aloitusta varten, käyttämällä opetusohjelman ylä- tai alaosassa olevaa Lataa materiaalit -painiketta. Avaa Recipe.xcodeproj aloituskansiosta.

Ennen kuin voit käyttää sovellusta laitteessa, sinun on määritettävä allekirjoittaminen.

Tehdäksesi tämän napsauta Recipe-projektia navigaattorissa ja valitse sitten samanniminen kohde. Valitse Signing & Capabilities -välilehti ja varmista, että olet valinnut yläreunasta Debugin. Valitse lopuksi tiimisi pudotusvalikosta.

Reseptisovellukseen tutustuminen

Valmistele ja suorita nyt sovellus, jotta voit tutustua sen ominaisuuksiin.

Juuriohjain on taulukkonäkymä resepteistä, joka sisältää kuvan, kuvauksen ja vaikeusasteen. Klikkaamalla reseptiä saat isomman kuvan, jossa on reseptin ainekset ja ohjeet.

Jännittävyyden lisäämiseksi voit myös rastittaa listan kohteita varmistaaksesi, että sinulla on kaikki tarvittavat ainekset. Jos pidät tai vihaat tekemääsi ruokaa, voit vaihtaa tykkää/ei tykkää -hymiötä.

Reseptisovelluksen kulissien takana

Vietä muutama minuutti tutustumalla koodiin begin-projektissa. Tässä muutamia kohokohtia:

• Main.storyboard sisältää kaikki sovelluksen storyboard-kohtaukset. Huomaat, että kaikki UI-komponentit ovat tavallisia UIKit-ohjaimia ja näkymiä. Niihin pääsee jo käsiksi, mikä helpottaa työtäsi.
• RecipeListViewController.swift hallinnoi päätaulukkonäkymää, joka näyttää luettelon kaikista saatavilla olevista resepteistä. Se käyttää tietolähteenä Recipe-objektien joukkoa.
• Recipe.swift on malliobjekti, joka edustaa reseptiä. Se sisältää apumetodeja reseptimassan lataamiseen, joita käytetään koko sovelluksessa.
• RecipeCell.swift on juurikontrollerin reseptiluettelon solu. Se näyttää reseptin vaikeusasteen, nimen ja valokuvan välitetyn Recipe-malliobjektin perusteella.
• RecipeInstructionViewController.swift sisältää kontrollerikoodin yksityiskohtaista näkymää varten, joka näyttää suuren kuvan ruokalajista sekä sen ainesosat ja valmistusohjeet. Siinä on UISegmentedControl, jolla vaihdetaan ainesosien ja ohjeiden välillä taulukkonäkymässä, joka käyttää InstructionViewModel.
• InstructionViewModel.swift toimii RecipeInstructionsViewController:n tietolähteenä. Se sisältää ainesosien ja ohjeiden kuvaukset sekä valintaruutujen tilatiedot.
• InstructionCell.swift määrittelee solun, joka sisältää merkinnän ja valintaruudun käytettäväksi ohjeissa ja ainesosaluetteloissa. Kun valintaruutu ruksataan, se yliviivaa tekstin.

Nyt ymmärrät, miten sovellus toimii, on aika miettiä, miten siitä voidaan tehdä esteettömämpi.

Miksi esteettömyys?

Ennen kuin ryhdyt koodin kanssa työskentelemään, on tärkeää ymmärtää esteettömyyden edut.

• Suunnittelemalla sovelluksesi esteettömäksi on helpompi kirjoittaa toiminnallisia testejä, käytitpä sitten KIF-kehystä tai UI-testausta Xcodessa.
• Laajennat myös markkinoitasi ja käyttäjäkuntaasi tekemällä sovelluksestasi suuremman ryhmän käyttökelpoisen.
• Jos työskentelet jollekin valtion virastolle, sinun on toteutettava 508-vaatimustenmukaisuus, jonka mukaan minkä tahansa ohjelmiston tai teknologian on oltava kaikkien käyttäjien saatavilla.
• Toteuttamalla esteettömyyden sovelluksessasi osoitat, että olet halukas tekemään ylimääräisen kilometrin jokaisen käyttäjän hyväksi, ja se on hyvä asia.
• Tuntuu hyvältä tietää, että teet pienen, mutta tuntuvan eron jonkun elämässä! :]

Vakuutuitko? Sitten on aika tutustua VoiceOveriin, näkövammaisille tarkoitettuun saavutettavuustyökaluun.

VoiceOverin ottaminen käyttöön

iOS:n mukana tulee VoiceOver-näytönlukutyökalu, joka auttaa käyttäjiä toimimaan vuorovaikutuksessa ohjelmistojen kanssa ilman, että heidän tarvitsee nähdä näyttöä. Se on suunniteltu erityisesti henkilöille, joilla on näköongelmia.

VoiceOverin avulla näkövammaiset käyttäjät voivat kuulla ja olla vuorovaikutuksessa näytöllä näkyvän kanssa. VoiceOver reagoi eleisiin ja ilmoittaa käyttäjälle kuuluvasti, mitä näytöllä on tai mitä käyttäjä valitsee. Pohjimmiltaan VoiceOver on linkki käyttöliittymän ja käyttäjän kosketussyötteen välillä.

Nopein tapa käyttää VoiceOveria on avata iOS-laitteesi Asetukset-sovellus, valita Saavutettavuus ▸ Saavutettavuuspikavalinta ja sitten VoiceOver.

Tämä luo pikakuvakkeen, jotta voit kolmesti napauttaa fyysisen laitteen kotipainiketta – tai uudemmissa puhelimissa sivupainiketta – kytkeäksesi VoiceOverin päälle ja pois päältä.

Kun olet ottanut VoiceOverin käyttöön, on aika kokeilla sitä.

How to Use VoiceOver

VoiceOverin mukana tulee joitakin käteviä ele-esiasetuksia, jotka helpottavat sovelluksessa navigointia. Seuraavassa on joitakin yleisimpiä sovelluksen sisäisiä eleitä, joita voi käyttää VoiceOverin kanssa:

• Napauta yhdellä napautuksella mitä tahansa kohtaa näytöllä, niin VoiceOver lukee ääneen tunnistetiedot kohteen saavutettavuusominaisuuksista.
• Pyyhkäise kerran vasemmalle tai oikealle ja VoiceOver valitsee seuraavan näkyvän esteettömyyskohteen ja lukee sen ääneen. Oikeanpuoleiset pyyhkäisyliikkeet siirtyvät eteenpäin ja alaspäin, kun taas vasemmanpuoleiset pyyhkäisyliikkeet toimivat päinvastoin.
• Yhden pyyhkäisyn alaspäin voit tavata tarkennetun kohteen kirjain kirjaimelta.
• Kaksoisnapauta valitaksesi tarkennetun kohteen.
• Kolmen sormen pyyhkäisyliikkeellä vasempaan tai oikeaan voit navigoida sivunäkymässä eteen- tai taaksepäin.

Täydellisen luettelon VoiceOver-eleistä löydät Applen oppimasta VoiceOver-eleistä iPhonessa. Nyt siis tiedät, miten VoiceOver toimii – mutta miten sovelluksesi toimii sen kanssa? Testaat sitä seuraavassa vaiheessa.

VoiceOverin kokeileminen reseptisovelluksella

Kehitä ja suorita fyysisellä laitteella ja ota VoiceOver käyttöön kolminkertaisella napsautuksella kotipainiketta. Selaa reseptiluetteloa pyyhkäisemällä vasemmalle ja oikealle. VoiceOver lukee elementit ylävasemmalta alhaalta oikealle. Se alkaa otsikon nimellä, jota seuraa kunkin reseptin nimi ja siihen liittyvän kuvan nimi.

Mutta VoiceOver-kokemuksessa on muutamia ongelmia:

1. Kuva ei ole hyödyllinen kuvaus kuvanäkymistä kussakin solussa. Tiedät, että kuva on siellä, mutta et mikä se on.
2. VoiceOver ei kerro mitään kunkin reseptin vaikeustasosta, mikä tekee tästä ominaisuudesta käyttökelvottoman näkövammaisille.

Nyt kun olet tunnistanut ongelmakohdat, voit ehkä sukeltaa heti niiden korjaamiseen. Mutta ennen sitä sinun on tiedettävä hieman siitä, miten saavutettavuusominaisuudet toimivat.

Accessibility-attribuutit

Accessibility-attribuutit ovat ydinkomponentteja, jotka sinun on toteutettava tukeaksesi saavutettavuutta. Nämä attribuutit toimittavat VoiceOverille tietoja sovelluksesi elementeistä, jotta VoiceOver voi lukea nämä tiedot ääneen käyttäjille. Jos niitä ei ole määritetty oikein, VoiceOver ei pysty antamaan tarvittavia tietoja sovelluksestasi.

Saavutettavuusattribuutilla on viisi ominaisuutta:

1. Label: Tiivis tapa tunnistaa ohjain tai näkymä. Esimerkkejä ovat Takaisin-painike ja reseptin kuva.
2. Piirteet: Nämä kuvaavat elementin tilaa, käyttäytymistä tai käyttöä. Painikkeen ominaisuus voi olla esimerkiksi on valittu.
3. Vihje: Kuvaa toiminnon, jonka elementti suorittaa. Esim: Näyttää reseptin tiedot.
4. Kehys: Elementin kehys näytössä, muodossa CGRect. VoiceOver puhuu CGRect:n sisällön.
5. Arvo: Elementin arvo. Esimerkiksi edistymispalkin tai liukusäätimen tämänhetkinen arvo voi olla: 5 100:sta.

Useimmat UIKit-komponentit esiasettavat nämä attribuutit puolestasi; sinun tarvitsee vain toimittaa yksityiskohdat käyttäjäkokemuksen parantamiseksi. Jos luot mukautettuja ohjaimia, joudut toimittamaan suurimman osan attribuuteista itse.

Nyt tiedät, mistä VoiceOver saa käyttäjille tarjoamansa tiedot, on aika tutustua uuteen työkaluun, joka auttaa sinua löytämään ja korjaamaan sovelluksen saavutettavuuden heikkoudet: Accessibility Inspector.

Using the Accessibility Inspector

Jos olet jälkikäteen muokkaamassa sovellusta esteettömämmäksi, heikkouksien löytäminen on aikaa vievää ja virhealtista. Onneksi apuna on työkalu nimeltä Accessibility Inspector, joka tekee seuraavaa:

• Käy läpi sovelluksesi ja etsii yleisiä esteettömyysongelmia.
• Mahdollistaa käyttöliittymäelementtien esteettömyysominaisuuksien tarkistamisen tarkastustilassa.
• Tarjoaa esteettömyyselementtien reaaliaikaisen esikatselun poistumatta sovelluksestasi.
• Tukee kaikkia alustoja, mukaan lukien macOS, iOS, watchOS ja tvOS.

Ennen kuin käytät Saavutettavuustarkastajaa resepteissä, tutustu työkaluun. Avaa se ensin Xcode-valikosta siirtymällä kohtaan Xcode ▸ Open Developer Tool ▸ Accessibility Inspector.

Tarkastimen pitäisi näyttää jotakuinkin tältä:

Kohteen valintaruudun avulla voit valita, minkälaista laitetta haluat tarkastella. Tämä voi olla MacBook Pro, iOS-laite tai simulaattori.

Esteettömyyselementtien elävän esikatselun avulla voit testata suoraan simulaattorissa. Koska live-esikatselut ovat nopeampia kuin VoiceOverin kuuntelu, teet suurimman osan työstäsi tässä iOS-saavutettavuusoppaassa.

Rakenna ja suorita simulaattorissa ja vaihda Accessibility Inspectorin kohde simulaattoriin:

Nyt kun työkalu on avattu, voit tutustua joihinkin hyödyllisimpiin ominaisuuksiin.

Tarkastusosoittimen käyttäminen

Tarkastusosoittimen valitseminen, joka näyttää verkkokalvon tähtäimeltä Tarkkailijan käyttöliittymässä, muistuttaa VoiceOverin ottamista käyttöön laitteellasi. Kun otat osoittimen käyttöön, voit viedä hiiren osoittimen minkä tahansa käyttöliittymäelementin päälle tarkistaaksesi sen attribuutit. Vuorovaikutus simulaattorin kanssa suoraan painikkeiden painalluksilla poistaa Inspection Pointerin käytöstä.

Inspection Detail -ruudussa on kaikki, mitä tarvitset sovelluksen esteettömyysattribuuttien tarkasteluun ja vuorovaikutukseen niiden kanssa:

• Basic: Näyttää parhaillaan korostetun elementin attribuuttiominaisuudet.
• Actions: Mahdollistaa toimintojen suorittamisen, kuten painikkeen napauttamisen tai näkymän vierittämisen. Tämän ruudun Suorita-painikkeen painaminen suorittaa toiminnon kohteelle.
• Elementti: Näyttää nykyisen elementin luokan, osoitteen ja ohjaimen. Tätä kirjoitettaessa se ei toimi johdonmukaisesti.
• Hierarkia: Näyttää elementin näkymähierarkian, mikä helpottaa monimutkaisten näkymien ymmärtämistä.

Pikakatselun käyttäminen äänen tarkistamiseen Xcodessa

Xcode 11:ssä on tarkastuksen yksityiskohdat -ruudussa, ylhäällä olevassa Pikakatselu-osiossa, uusi toiminto, jonka avulla voit simuloida Xcodessa ääntä, jonka kuulisit laitteessa. Tämä tarkoittaa, että voit tarkistaa, mitä käyttäjät kuulevat käyttäessään sovellustasi ilman, että tarvitset todellista laitetta.

Paina Play-painiketta, kun sovellus on käynnissä simulaattorissa, anna Accessibility Inspectorin käydä sovelluksen läpi ja kuuntele, kun se kuvaa jokaisen elementin ääneen.

Jos haluat mieluummin käydä jokaisen elementin läpi manuaalisesti, voit joko painaa Pause-painiketta tai painaa Audio-painiketta Quicklook-osiossa. Paina Eteenpäin- tai Takaisin-painikkeita astuaksesi kunkin elementin läpi omaan tahtiisi.

Tämän ominaisuuden käyttäminen on nopeampaa kuin sovelluksen ajaminen laitteella ja VoiceOverin käyttäminen, erityisesti kehitystyön aikana. Kuten aina, haluat testata sovelluksesi kaikkine saavutettavuusominaisuuksineen myös oikeilla laitteilla.

Ongelmien korostaminen Tarkastusosoittimen avulla

Yksi Tarkastusosoittimen hyödyllisimmistä ominaisuuksista on sen tarkastusominaisuus, joka antaa varoituksia sovelluksen saavutettavuusongelmista. Jos haluat kokeilla tätä ominaisuutta, varmista, että simulaattori on edelleen käynnissä ja olet reseptiluettelossa. Napsauta Inspectorissa Audit-kuvaketta ja sitten Suorita audit.

Näet, että tarkastaja antaa useita varoituksia, muun muassa siitä, että joistakin elementeistäsi puuttuu kuvaus.

Kun napsautat varoitusta, Xcode korostaa siihen liittyvää elementtiä sekä simulaattorissa että tarkastajan Audit-näytön alaosassa.

Tällöin soluihin liittyvillä kuvanäkymillä ei ole kuvausta. Tämä tarkoittaa, että VoiceOver ei pysty kuvaamaan niitä lukijoille.

Napsauta jonkin varoituksen kohdalla Suggest Fixes -kuvaketta, joka näyttää ympyrän sisällä olevalta kysymysmerkiltä, ja tarkastaja tarjoaa ehdotuksia ongelman korjaamiseksi. Toimit näiden ehdotusten mukaan myöhemmin.

Klikkaa Silmä-kuvaketta ottaaksesi sovelluksesta tilannekuvan. Tämä on hyödyllistä kaikille laadunvarmistuksessa työskenteleville, joiden on laadittava tarkkoja vikailmoituksia.

Tarkastajasta löytyy muutama muukin hyödyllinen saavutettavuusasetus. Seuraavaksi tutustut nopeasti näihin ominaisuuksiin.

Tarkkailijan lisäasetukset

Vaikka ne eivät kuulu tämän opetusohjelman piiriin, on hyvä tietää, että Esteettömyystarkkailijan avulla voit testata myös seuraavia esteettömyysasetuksia:

1. Värien kääntäminen
2. Kontrastin lisääminen
3. Läpinäkyvyyden vähentäminen
4. Liikkeen vähentäminen
5. Kirjasinkoon muuttaminen

Tämän ominaisuuden ottaminen käyttöön ei enää edellytä Asetukset-sovelluksen käyttöä. Esteettömyystarkastaja tarjoaa tällä hetkellä vain nämä viisi vaihtoehtoa, mutta Apple aikoo lisätä niitä lisää tulevaisuudessa.

Esteettömyystarkastaja säästää aikaa sovelluksen testaamisessa. Muista kuitenkin, että VoiceOveria kannattaa silti testata manuaalisesti todellisen käyttökokemuksen kokeilemiseksi. Tämä viimeinen vaihe auttaa sinua havaitsemaan kaikki ongelmat, jotka tarkastajalta jäävät huomaamatta.

Nyt kun olet tutustunut Accessibility Inspectorin ominaisuuksiin, on aika ryhtyä työstämään sovellustasi.

Reseptisovelluksen tekeminen saavutettavaksi

Kun testasit sovellustasi laitteellasi VoiceOverin avulla, huomasit, että kuvien kuvaukset eivät olleet kovin hyödyllisiä. Auditointityökalu osoitti sinulle syyn siihen: Kuvanäkymässä ei ollut saavutettavuusmerkintää. Korjaat tämän nyt.

Avaa Xcodessa tiedosto RecipeCell.swift ja lisää tiedoston alareunaan seuraava koodi:

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

Tämä koodi täyttää puuttuvat saavutettavuusominaisuudet solun Recipe-olion perusteella. Näin se toimii:

1. accessibilityTraits ottaa maskin piirteistä, jotka luonnehtivat saavutettavuuselementtiä. Tässä tapauksessa .image osoittaa, että kyseessä on kuva.
2. Käytät accessibilityLabel kuvaamaan elementtiä VoiceOverissa. Tässä se asetetaan recipe.photoDescription:ksi, joka on merkkijono, joka kuvaa kuvan sisältöä.

Nyt haluat soveltaa tätä myös tuleviin resepteihin. Etsi configureCell(_:) luokasta RecipeCell. Lisää metodin loppuun seuraava rivi:

applyAccessibility(recipe)

Joka kerta, kun luot solun, tämä koodi soveltaa saavutettavuusattribuutteja kuvaan reseptiobjektin ominaisuuksien avulla.

Kehitä ja suorita laitteellasi ja ota VoiceOver käyttöön kolmella napautuksella kotipainiketta. Testaa reseptiluetteloa nähdäksesi, ovatko kuvien kuvaukset mielekkäämpiä.

Paljon parempi! Sen sijaan, että kuulisit vain ”Kuva”, joka ei antanut mitään tarkempia tietoja, kuulet nyt täydellisen kuvauksen kuvasta. Käyttäjä voi nyt visualisoida ruoan sen sijaan, että hän turhautuisi siihen, ettei tiedä, mikä kuva on.

Sovelluksen ollessa edelleen käynnissä simulaattorissa, suorita Accessibility Inspector uudelleen ja siirry reseptiluetteloon. Varmista, että poistat kaikki varoitukset tarkastajasta ja napauta Suorita tarkastus.

WOOt – ei enää kuvausvaroituksia! Kun kuvausten lisääminen kuviin on onnistunut, tämän näkymän ydin on nyt täysin esteetön.

Nyt on aika tehdä reseptin vaikeusaste esteettömäksi.

Neuvon vaikeusasteen merkintöjen muokkaaminen

Saavutettavuustarkastuksessa näet mahdollisesti esteettömän tekstin varoitukset, jotka kertovat, että vaikeusasteen merkinnät ovat näkymättömissä käyttäjälle, jolla on näkövamma. Korjataksesi nämä ongelmat sinun täytyy tehdä merkinnöistä saavutettavia ja päivittää niiden ominaisuudet mielekkäälle kuvaukselle.

Seuraavaksi siirry RecipeCell.swift-tiedostoon ja lisää applyAccessibility(_:)-kohdan loppuun seuraava:

// 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)"}

Tässä on lisätietoja siitä, mitä tämä koodi tekee:

1. isAccessibilityElement on lippu, joka tekee kohteen näkyväksi esteettömyysominaisuuksille, kun true. Useimmissa UIKit-luokissa oletusarvo on true, mutta UILabelissa se on false.
2. accessibilityTraits auttaa luonnehtimaan saavutettavuuselementtiä. Koska et tarvitse mitään vuorovaikutusta, asetat sille, että sillä ei ole piirteitä.
3. Seuraavaksi annat VoiceOverin määritellä ytimekkäästi tämän labelin tarkoituksen. Difficulty Level antaa käyttäjän tietää tarkalleen, mistä on kyse.
4. VoiceOver lukee accessibilityValue osana etiketin kuvausta. Vaikeustason asettaminen tähän tekee tästä elementistä paljon hyödyllisemmän.

Rakenna ja suorita sovellus fyysisellä laitteella, ota VoiceOver käyttöön kolmesti napauttamalla kotipainiketta ja pyyhkäise reseptiluettelon läpi.

Kun selaat eri esteettömyyselementtejä, VoiceOver lukee jokaisen solun täydellisen kuvauksen, mukaan lukien vaikeustason.

Varoitusten tarkistaminen

Joka kerta, kun paljastat uuden esteettömyyselementin, kuten teit tässä vaikeustason kohdalla, tarkistus kannattaa suorittaa uudelleen.

Käynnistä Esteettömyystarkastaja, jos se ei ole vielä käynnissä. Suorita sovellus laitteellasi tai simulaattorissa ja aseta tarkastajan kohde sen mukaisesti. Valitse nyt tarkastuksen vaihtopainike ja napauta Suorita tarkastus.

Varoituksia tuli vähemmän! Jäljelle jääneet koskevat tarroja, jotka eivät tue dynaamista tekstiä. Korjaat ne seuraavaksi.

Tekstin tekeminen dynaamiseksi

Tarkastaja varoittaa sinua siitä, että sinulta puuttuu tärkeä vaihe, jotta sovelluksestasi tulisi kaikkien käyttämä: dynaaminen teksti. Tämä on esteettömyyden kannalta tärkeä ominaisuus, jonka avulla käyttäjät, joilla on osittainen näkövamma, voivat suurentaa fonttikokoa luettavuuden parantamiseksi. Sovelluksesi tällä hetkellä käyttämä ei-dynaaminen fontti ei mahdollista tätä.

Klikkaa Korjausehdotukset-kuvaketta nähdäksesi, mitä tarkastaja suosittelee:

Se kehottaa sinua käyttämään UIfont-edullisinta fonttia ja asettamaan adjustsFontForContentSizeCategory arvoksi true. Teet tämän nyt.

RecipeCell.swift-tiedostossa lisää seuraava koodi applyAccessibility(_:):n sisälle aivan alareunaan:

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

Tämä asettaa preferredFont:n body-tyyliksi, mikä tarkoittaa, että iOS tyylittelee tekstin samalla tavalla kuin asiakirjan rungon. Koon ja fontin yksityiskohdat riippuvat saavutettavuusasetuksista. adjustsFontForContentSizeCategory osoittaa, että fontin pitäisi päivittyä automaattisesti, kun käyttäjä muuttaa tekstisisällön kokoa.

Testaus siitä, miten sovelluksesi käsittelee fonttien koon muuttamista, on helppoa Accessibility Inspectorin ansiosta.

Rakenna ja suorita reseptisovellus yhdessä Accessibility Inspectorin kanssa. Suorita tarkastus uudelleen, ja kaikkien varoitusten pitäisi olla poissa.

Joidenkin muiden vaihtoehtojen testaaminen

Navigoi Tarkkailijan Asetukset-vaihtoehtoon ja kokeile joitakin työkaluja:

1. Käännä värit esikatsellaksesi, miltä käyttöliittymässäsi näyttää tämä esteettömyysominaisuus. Tämä on hyödyllistä henkilöille, joilla on valoherkkyys, huono näkö ja joissakin tapauksissa värisokeus.
2. Voit myös testata dynaamisia fonttikokomuutoksia reaaliajassa niille käyttäjille, jotka suosivat suurempia fonttikokoja.

Kun testaat sovellustasi, se näyttää luultavasti pitkälti tältä:

Tarkkailijan avulla esteettömyystapausten testaaminen on helppoa. Tästä voi päätellä, että reseptiluettelo toimii hyvin näkövammaisille käyttäjille.

Reseptin yksityiskohtaisen näytön muokkaaminen

Nyt kun olet huolehtinut reseptivaihtoehtojen luettelosta, haluat nähdä, mitä tapahtuu, kun käyttäjä napsauttaa jotakin reseptiä. Käynnistä sovellus laitteellasi, ota VoiceOver käyttöön ja katsele yksityiskohtaista näkymää. Se kuulostaa jotakuinkin tältä:

Tietonäkymässä on joitakin VoiceOverin vuorovaikutukseen liittyviä ongelmia:

1. Vasen nuolipainike ei ole hyvä kuvaus navigointiin. Mistä käyttäjä tietäisi, mitä painike tekee?
2. Emoji-kasvojen tilat ovat: sydämen muotoiset silmät ja hämmentyneet kasvot. Nuo selitykset hämmentäisivät ketä tahansa käyttäjää!
3. Kun käyttäjä valitsee valintaruudun, siinä lukee kuvake tyhjä, mikä ei selitä paljoakaan.

Kussakin näistä tapauksista on tärkeää selittää, mitä hallintalaitteen tila tarkoittaa, eikä sitä, miltä se näyttää. Takaisin-painike on selkeämpi kuin Vasen nuoli -painike. Tykkää ja Ei tykkää selittää ytimekkäästi emojit. Seuraavaksi teet nämä kaksi muutosta.

Vaihtaaksesi navigointia, avaa RecipeInstructionsViewController.swift ja lisää viewDidLoad:iin assert(recipe != nil) jälkeen seuraava:

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

Vasemman nuolipainikkeen sijaan VoiceOver sanoo nyt Takaisin-painiketta.

Jatketaan nyt emojien kanssa. Korvaa samassa tiedostossa isLikedFood(_:):n sisältö seuraavalla:

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}

Sekä Like- että Dislike-tiloihin olet lisännyt accessibilityLabel:n, joka kertoo selvästi, mitä painike tekee. Olet myös asettanut accessibilityTraits tunnistamaan sen painikkeeksi, jotta käyttäjä tietää, miten hän voi olla vuorovaikutuksessa sen kanssa.

Kehitä ja suorita laitteessa ja ota VoiceOver käyttöön. Siirry yksityiskohtaiseen reseptinäyttöön VoiceOverin avulla testataksesi näkymän yläosassa oleviin painikkeisiin tekemiäsi muutoksia.

Nyt jokaisella näistä toiminnoista on selkeät, lyhyet kuvaukset, jotka auttavat käyttäjää ymmärtämään niiden tarkoituksen. Paljon parempi!

Valintaruutujen parantaminen

Viimeinen ongelma liittyy valintalistaan. Jokaisen valintaruudun kohdalla VoiceOver ilmoittaa tällä hetkellä kuvakkeen tyhjäksi ja sen jälkeen reseptiohjeen. Se ei ole lainkaan selvää!

Voidaksesi muuttaa tämän, avaa InstructionCell.swift ja etsi shouldStrikeThroughText(_:). Korvaa koko if strikeThrough-lauseke seuraavalla:

// 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)"}

Tämä koodi tekee seuraavaa:

1. Kytkee pois päältä esteettömyyden valintamerkkipainikkeesta, jotta VoiceOver lukee sen yhtenä yksikkönä eikä kahtena eri esteettömyyselementtinä.
2. Kuvauksen accessibilityLabel:ssä käytetään nyt kovakoodattua merkkijonoa "Completed", jota seuraa teksti. Tämä antaa kaikki tarvittavat tiedot yhdellä käyntikerralla etiketissä.
3. Kuten valmiissa koodissa, jos käyttäjä merkitsee kohteen keskeneräiseksi, lisäät "Uncompleted" ennen etiketin kuvausta.

Rakenna ja suorita sovellus uudelleen ja katso, miltä se kuulostaa. Se on musiikkia käyttäjiesi korville. :]

Missä mennään tästä eteenpäin?

Voit ladata projektin valmiin version tämän ohjeen ylä- tai alareunassa olevasta Lataa materiaalit -painikkeesta.

Tässä iOS:n esteettömyysohjeessa opit VoiceOverista. Suoritit manuaalisen auditoinnin selaamalla jokaisen esteettömän elementin läpi ja testaamalla käyttäjäkokemusta itse. Sitten käytit Saavutettavuustarkastajaa suorittaaksesi tarkastuksia, tarkastellaksesi saavutettavuuselementtien arvoja ja tehdessäsi dynaamisia live-muutoksia kääntäessäsi värejä tai muuttaaksesi fonttikokoa.

Nyt sinulla on tarvittavat työkalut, joilla voit tehdä sovelluksestasi saavutettavamman. Tieto siitä, että sinulla on positiivinen vaikutus jonkun elämään, on palkitsevaa.

Esteettömyysominaisuuksilla on valtavasti mahdollisuuksia. Tämä opetusohjelma raapaisee vain pintaa, jotta pääset alkuun. Alla on lisää resursseja, joihin kannattaa tutustua:

• Saavutettavuuden luokat
• Saavutettavuuden kehittämisen resurssit
• Saavutettavuuden soveltaminen mukautettuihin näkymiin
• Toimita poikkeuksellinen esteettömyyskokemus
• Saavutettavuustarkastaja

Jos sinulla on kommentteja tai kysyttävää, osallistu keskusteluun alla!