Kuinka tehdä VoiceOver ystävällisemmäksi iOS-sovelluksessasi

Muutamalla kehittämisen aikana tehdyllä muutoksella voit luoda paremman VoiceOver-kokemuksen käyttäjillesi.

Koska Apple esitteli ensin esteettömyysominaisuudet iOS: lle noin viisi vuotta sitten, yritys on laajentanut näitä ominaisuuksia kolmansien osapuolien sovelluksiin luomalla monipuolisen pääsyn sovellusliittymiin. Nämä sovellusliittymät antavat kehittäjille mahdollisuuden luoda avustavia sovelluksia, jotka tavoittavat paljon laajemman joukon käyttäjiä.

Mutta sovelluksesi tekeminen käytettäväksi on vain alku. Sinun tulee myös olla empattista tapaan, jolla käyttäjä saattaa joutua navigoimaan sovellustesi esteettömyyssisältöön.

Ensisijaisesti VoiceOverista miettiä tapoja vähentää navigointikuormaa, jonka saavutettavuus voi lisätä kokemukseen. Muista lisäksi, kuinka VoiceOver voi kuulostaa käyttäjälle ilmoittaessaan sisällön näytöltä toiselle tai yhdestä komponentista seuraavaan.

Tässä opetusohjelmassa osoitamme sinulle, kuinka ryhmitellä esteettömyyskohteet monimutkaisissa näkymissä. Tämä vähentää näytön elementtien läpi pyyhkäisemisen määrää ja tekee navigointiprosessista käyttäjille hieman hankalampaa.

Varmista ennen aloittamista, että sinulla on joitain perusteita alhaalla.

Esteettömyysominaisuudet, opi rakastamaan heitä

Esteettömyysominaisuudet ovat välttämättömiä sisällön saattamisessa laajemman yhteisön saataville. Esteettömyysominaisuudet, joihin keskitymme tässä ovat iscaccessibilityElement, ifGroupAccessibilityChildren, accessLabel ja accessHint.

  • isAccessibilityElement: Tarpeeksi yksinkertainen, eikö niin? Tämä arvo kertoo iOS: lle, onko avusteinen sovellus päässyt elementtiin vai ei.
  • shouldGroupAccessibilityChildren: Tämä ilmaisee, pitäisikö VoiceOver ryhmitellä vastaanottimen lapsina olevat elementit riippumatta niiden sijainnista näytöllä (ts. UICollectionView ja UITableView solut).
  • saavutettavuusLabel: Tämän VoiceOver ilmoittaa tietylle esteettömyyselementille. Se on tiivis etiketti, joka tunnistaa esteettömyystekijän.
  • saavutettavuusvihje: Yleensä tämä on kuvaus siitä, mitä tietty saavutettavuuselementti on tai voi tehdä. Esimerkiksi “Kaksoisnapauta katsoaksesi” tai “Painike”.

VoiceOverin ottaminen käyttöön Apple-tuotteessasi voidaan tehdä kahdella tavalla:

  • Manuaalisesti: siirry laitteellasi kohtaan Asetukset> Yleinen> Esteettömyys> VoiceOver ja napauta VoiceOver päälle -tilaan. Se on helppo tehdä kerran, mutta näiden vaiheiden suorittaminen useita kertoja peräkkäin testin aikana on työlästä. Onneksi siellä on pikakuvake!
  • VoiceOver-pikakuvake: Siirry laitteellasi Asetukset> Yleiset> Esteettömyys> Esteettömyysvalinta ja varmista, että VoiceOver on valittu. Nyt kaikki, mitä sinun on tehtävä VoiceOverin kytkemiseksi päälle tai pois päältä, on kolme kertaa kosketa Koti-painiketta. Hienoa, eikö ?!

Jos epäilet, että tämä ei toimi iOS-simulaattorissa. Sinun on testattava saavutettavuutesi lisäykset fyysisellä laitteella.

Sain sen? Hienoa, aloitetaan.

Esteettömyyssisällön yhdistäminen ryhmiin

Kuten aiemmin mainitsin, esteettömyys elementtien selaamisesta voi tulla nopeasti hankalaa toimintaa. Kuvittele, että sinun on pyyhkäistävä vasemmalle ja oikealle jokaisen UICollectionViewController- tai UITableViewController-otsikon sisältämän tarran ja kuvan välillä. Ei hauskaa, eikö niin? Mitä voit tehdä, jotta siitä tulisi hieman siedettävämpi?

Yksi tapa, jolla haluan ratkaista tämän ongelman, on ajatella jokainen solu niissä tapauksissa yhtenä elementtinä. Kuvittele nyt, jos voisit pyyhkäistä vasemmalle ja oikealle kunkin solun välillä, kun solu lukee kaiken sen sisällön eikä merkinnän mukaan. Totta, Applen rikas pääsysovellusliittymä antaa meille mahdollisuuden tehdä tämä yksinkertaisella tempulla.

Katsotaanpa kuinka voimme tehdä tämän UICollectionView-ohjelmalla.

Aseta ensin koodisi sisällä pääsyominaisuudet kokoelmanäkymään. Katso alla oleva esimerkki.

// Saavutettavuus
collectionView.isAccessibilityElement = väärä
collectionView.shouldGroupAccessibilityChildren = true

Tässä kerromme avustavalle sovellukselle, että se toimii kuten kokoelmanäkymää ei ole. Sitä ei siis valita, koska käyttäjä siirtyy vanhemmanäkymänsä läpi, kun VoiceOver on käytössä. Tiedän, että tämä näyttää olevan intuitiivinen, mutta älä huoli. Seuraava asia, jonka teemme, on asettaa jokainen elementti kokoelmanäkymässä esteettömyyselementiksi.

Tässä esimerkissä käytämme pääsyä UICollectionViewCell-sovellukseen, joka näyttää musiikkialbumin tiedot. Jokaisella solulla on kuva, albumin nimi ja esittäjän nimi.

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

Ensin konfiguroimme solumme:

viimeinen func-määritys (cellWithModel-malli: Albumi) {
    jos anna artworkName = model.artworkName {
        imageView.image = UIImage (nimeltään: artworkName)
    }
    artistLabel.text = model.artist? .name
    titleLabel.text = malli.title
    applyAccessibility ()
}

Käytä sitten esteettömyysominaisuuksia jokaisessa UICollectionViewCell:

lopullinen func applyAccessibility () {
    isAccessibilityElement = totta
    ibilityLabel = “\ (titleLabel.text!) \ (artistLabel.text!)”
    ibilityHint = “Kaksoisnapauta pelataksesi.”
    imageView.isAccessibilityElement = false;
    artistLabel.isAccessibilityElement = false;
    titleLabel.isAccessibilityElement = false;
}

Kuten näette, kukin solu on asetettu esteettömyyselementiksi, joka puolestaan ​​lisää sen pääsyä helpottavien esineiden luetteloon vanhemmuusnäkymää varten. Tämä tarkoittaa, että kun käyttäjä selaa kokoelmanäkymän kohteita, jokaisella elementillä on mahdollisuus kuvata sen sisältöä.

Sitten lisäsimme otsikonLabel-tekstin lisäksi myös artistLabel-tekstin solun saavutettavuusLabel-ominaisuuteen. Tällä tavalla, kun VoiceOver puhuu käyttäjälle, he kuulevat albumisolumme molempien tarrojen sisällön yhden tai toisen sijaan. Ja tietysti asetamme saavutettavuusHint-ominaisuuden, jotta käyttäjät tietävät, mitä tapahtuu, kun he suorittavat kaksoisnapautustoiminnon. Muista, että saavutettavuusvihjeitä puhutaan aina lyhyen tauon jälkeen, kun elementin saavutettavuuskaapeli on luettu. Et kuule sitä heti.

Viimeiseksi asetamme albumisolussa jokaisen alaelementin isAccessibilityElement-arvon vääriksi. Tietysti solun asettaminen esteettömyyselementiksi tekee oletuksena sen, että lapset eivät pääse esteettömiin elementteihin.

Katsotaanpa nyt, kun kaikki käy, miten se toimii. Tämä video osoittaa, mitä tapahtuisi, jos emme suorittaisi kaikkia yllä olevia vaiheita, ja osoittaa sitten esimerkin, jossa sovelimme esteettömyysominaisuuksiamme.

Ryhmitetyt soluelementit eivät kuulu vain paremmin VoiceOverin lukemana, vaan ne vähentävät navigointia.

Helppokäyttöisen UICollectionViewCellin tekeminen kuulostaa ihmiselämältä

Huomaan paljon aikaa kehittäjien törmäävän esteettömyyteen sovellustensa sisällä. Tämä voi johtua useista tekijöistä, mutta saavutettavuusLabel-ominaisuuden sisältö tarvitsee yleensä vain pienen rakkauden kosketuksen.

Edellisessä esimerkissä siitä, kuinka asetamme albumisolumme saavutettavuusLabel, huomaat, että se lukee suoraan sisällön läpi joissakin tapauksissa melko nopeasti. Mutta entä jos kirjoittaisimme etikettejämme samalla tavalla kuin miten puhumme? Pilkun tai jopa konjunktion lisääminen voi auttaa tarran ääntä kuulostamaan yleisöäsi paremmin luomalla taukoja VoiceOver-sanelmaan

Tässä on yksinkertainen esimerkki pelkän pilkun lisäämisestä albumin solujen pääsylinjaan.

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

Se on hieno, mutta tehokas. Katso tämä lyhyt video kuullaksesi mitä eroa tällä voi olla. Videon vasemmalla puolella olevat solut eivät sisällä pilkuja, kun taas oikealla puolella olevat solut tekevät.

Työskentele saavutettavuuden kanssa mielessä

Apple on ottanut ensimmäisen askeleen ja tarjonnut kehittäjille mahdollisuuden luoda avustettuja sovelluksia. Jatka tätä työtä lisäämällä saavutettavuus kehitystyönkulkuihin. Se on helpompaa kuin luulet ja sovelluksesi käyttäjät kiittävät sinua siitä!

Tilaa BPXL Craft ja seuraa Black Pixel Twitterissä saadaksesi lisää näkemyksiä suunnittelusta ja kehityksestä.

Black Pixel on luova digitaalisten tuotteiden toimisto. Lisätietoja osoitteessa blackpixel.com.