Accesibilitatea iOS: Noțiuni introductive

Oameni din toate categoriile sociale, de toate vârstele și din medii diferite folosesc aplicații pentru smartphone-uri, inclusiv persoane cu dizabilități. Proiectarea aplicațiilor dvs. ținând cont de accesibilitate îi ajută pe toți să le folosească, inclusiv persoanele cu dizabilități de vedere, motorii, de învățare sau auditive.

În acest tutorial de accesibilitate iOS, veți transforma o aplicație existentă pentru a o face mai accesibilă pentru persoanele cu dizabilități vizuale. În acest proces, veți învăța cum să:

• Utilizați VoiceOver.
• Verificați-vă aplicația cu Inspectorul de accesibilitate.
• Implementați elementele de accesibilitate cu UIKit.
• Construiți o experiență de utilizare mai bună pentru persoanele cu dizabilități.

Acest tutorial necesită Xcode 11.3 și Swift 5.1. Presupune că știți deja elementele de bază ale dezvoltării Swift. Dacă sunteți nou în Swift, ar trebui să consultați mai întâi cartea noastră, Swift Apprentice.

Începem

În acest tutorial, veți lucra cu o aplicație deja finalizată, numită Rețetă, care conține o listă de rețete și nivelurile lor de dificultate. De asemenea, vă permite să evaluați calitatea preparatelor pe care le faceți.

Descărcați tot ce aveți nevoie pentru a începe utilizând butonul Download Materials din partea de sus sau de jos a tutorialului. Deschideți Recipe.xcodeproj în folderul begin.

Înainte de a putea rula aplicația pe un dispozitiv, trebuie să configurați semnarea.

Pentru a face acest lucru, faceți clic pe proiectul Rețetă în navigator, apoi selectați ținta cu același nume. Selectați fila Signing & Capabilities (Capacități de semnare), apoi asigurați-vă că ați selectat Debug (Depanare) în partea de sus. În cele din urmă, alegeți echipa dvs. din meniul derulant.

Cunoașterea aplicației Rețeta

Acum, construiți și rulați aplicația pentru a vă familiariza cu caracteristicile sale.

Controlerul rădăcină este o vizualizare tabelară a rețetelor care conține o imagine, o descriere și un rating de dificultate. Faceți clic pe o rețetă pentru o imagine mai mare cu ingredientele și instrucțiunile rețetei.

Pentru a face lucrurile mai interesante, puteți, de asemenea, să tăiați elementele de pe listă pentru a vă asigura că aveți toate ingredientele necesare. Dacă vă place sau nu vă place ceea ce ați făcut, puteți comuta emoji de tip like/dislike.

Behind the Scenes of the Recipe App

Pasați câteva minute pentru a vă familiariza cu codul din proiectul begin. Iată câteva repere:

• Main.storyboard conține toate scenele din storyboard pentru aplicație. Veți observa că toate componentele UI sunt controale și vizualizări UIKit standard. Acestea sunt deja accesibile, ceea ce vă ușurează munca.
• RecipeListViewController.swift gestionează vizualizarea tabelului rădăcină, care afișează lista tuturor rețetelor disponibile. Folosește o matrice de obiecte Recipe ca sursă de date.
• Recipe.swift este obiectul model care reprezintă o rețetă. Acesta conține metode de utilitate pentru încărcarea unui array de rețete pe care le veți utiliza în întreaga aplicație.
• RecipeCell.swift este celula pentru lista de rețete a controlerului rădăcină. Aceasta afișează nivelul de dificultate al rețetei, numele și fotografia pe baza obiectului model Recipe transmis.
• RecipeInstructionViewController.swift conține codul controlerului pentru vizualizarea detaliilor, care afișează o imagine mare a felului de mâncare împreună cu ingredientele și instrucțiunile de gătit. Acesta include un UISegmentedControl pentru a comuta între ingrediente și instrucțiuni în vizualizarea tabelului, care utilizează InstructionViewModel.
• InstructionViewModel.swift acționează ca sursă de date pentru RecipeInstructionsViewController. Acesta include descrieri pentru ingrediente și instrucțiuni, precum și informații de stare pentru căsuțele de bifat.
• InstructionCell.swift definește o celulă care conține o etichetă și o căsuță de bifat pentru utilizare în instrucțiunile și listele de ingrediente. Când bifați căsuța, aceasta taie textul.

Acum înțelegeți cum funcționează aplicația, este timpul să vă gândiți cum să o faceți mai accesibilă.

De ce accesibilitate?

Înainte de a începe cu codul, este important să înțelegeți beneficiile accesibilității.

• Proiectarea aplicației dvs. pentru accesibilitate facilitează scrierea testelor funcționale, indiferent dacă folosiți cadrul KIF sau Testarea UI în Xcode.
• De asemenea, vă veți lărgi piața și baza de utilizatori, făcând ca aplicația dvs. să poată fi utilizată de un grup mai mare.
• Dacă lucrați pentru orice agenție guvernamentală, vi se cere să implementați conformitatea 508, care stipulează că orice software sau tehnologie trebuie să fie accesibil tuturor utilizatorilor.
• Implementarea accesibilității în aplicația dvs. arată că sunteți dispus să faceți un efort suplimentar pentru fiecare utilizator, iar acesta este un lucru bun.
• Se simte bine să știți că faceți o diferență mică, dar vizibilă, în viața cuiva! :]

Convinși? Atunci este timpul să faceți cunoștință cu VoiceOver, un instrument de accesibilitate pentru persoanele cu dizabilități vizuale.

Activarea VoiceOver

iOS vine cu instrumentul de citire a ecranului VoiceOver, care îi ajută pe utilizatori să interacționeze cu software-ul fără a fi nevoie să vadă ecranul. Este conceput special pentru persoanele cu probleme de vedere.

VoiceOver permite utilizatorilor cu deficiențe de vedere să audă și să interacționeze cu ceea ce este vizibil pe ecran. VoiceOver răspunde la gesturi și comunică în mod audibil utilizatorului ceea ce se află pe ecran sau ceea ce selectează utilizatorul. În esență, VoiceOver este legătura dintre interfața de utilizare și introducerea tactilă a utilizatorului.

Cel mai rapid mod de a utiliza VoiceOver este să deschideți aplicația Setări de pe dispozitivul iOS, selectați Accesibilitate ▸ Accesibilitate scurtă, apoi selectați VoiceOver.

Aceasta creează o comandă rapidă astfel încât să puteți apăsa de trei ori pe butonul de pornire – sau pe butonul lateral, pentru telefoanele mai noi – pe un dispozitiv fizic pentru a activa și dezactiva VoiceOver.

Acum ați activat VoiceOver, este timpul să îl încercați.

Cum se utilizează VoiceOver

VoiceOver vine cu câteva presetări de gesturi utile care facilitează navigarea într-o aplicație. Iată câteva dintre cele mai comune gesturi din aplicație care pot fi utilizate cu VoiceOver:

• Atingeți cu o singură atingere oriunde pe ecran și VoiceOver va citi cu voce tare informațiile de identificare din atributele de accesibilitate ale elementului.
• O singură glisare spre stânga sau spre dreapta și VoiceOver va selecta următorul element de accesibilitate vizibil și îl va citi cu voce tare. Glisarea spre dreapta se deplasează înainte și în jos, în timp ce glisarea spre stânga face opusul.
• O singură glisare în jos pentru a scrie literă cu literă elementul focalizat.
• Atingeți de două ori pentru a selecta elementul focalizat.
• Glisați cu trei degete spre stânga sau spre dreapta pentru a naviga înainte sau înapoi în vizualizarea unei pagini.

Pentru lista completă a gesturilor VoiceOver, consultați Apple’s Learn VoiceOver gestures on iPhone. Așadar, acum știi cum funcționează VoiceOver – dar cum se comportă aplicația ta cu el? O veți testa în pasul următor.

Încercarea VoiceOver cu aplicația Rețeta

Construiți și rulați pe un dispozitiv fizic și faceți triplu clic pe butonul Home pentru a activa VoiceOver. Glisați spre stânga și spre dreapta pentru a naviga prin lista de rețete. VoiceOver citește elementele de sus-în-stânga până jos-dreapta. Începe cu numele antetului, urmat de numele fiecărei rețete și de numele imaginii asociate.

Dar există câteva probleme cu experiența VoiceOver:

1. Imaginea nu este o descriere utilă a vizualizărilor imaginii din fiecare celulă. Știți că o imagine este acolo, dar nu și ce este.
2. VoiceOver nu spune nimic despre nivelul de dificultate al fiecărei rețete, ceea ce face ca această caracteristică să fie inutilă pentru persoanele cu dizabilități vizuale.

Acum ați identificat zonele cu probleme, poate doriți să vă aruncați direct în rezolvarea lor. Dar înainte de a o face, trebuie să știți câte ceva despre cum funcționează caracteristicile de accesibilitate.

Atributele de accesibilitate

Atributele de accesibilitate sunt componentele de bază pe care trebuie să le implementați pentru a susține accesibilitatea. Aceste atribute îi furnizează lui VoiceOver informații despre elementele din aplicația dvs. astfel încât VoiceOver să poată citi cu voce tare aceste informații utilizatorilor dvs. Dacă nu sunt configurate corespunzător, VoiceOver nu va putea furniza detaliile necesare despre aplicația dumneavoastră.

Un atribut de accesibilitate are cinci proprietăți:

1. Label: O modalitate concisă de a identifica controlul sau vizualizarea. Câteva exemple sunt butonul Back și imaginea rețetei.
2. Trăsături: Acestea descriu starea, comportamentul sau utilizarea elementului. O trăsătură a unui buton ar putea fi este selectat, de exemplu.
3. Hint: Descrie acțiunea pe care o finalizează un element. De exemplu: Afișează detaliile rețetei.
4. Frame: Cadrul elementului în cadrul ecranului, în formatul unui CGRect. VoiceOver vorbește conținutul din CGRect.
5. Valoare: Valoarea unui element. De exemplu, cu o bară de progres sau un cursor, valoarea curentă ar putea fi: 5 din 100.

Majoritatea componentelor UIKit predefinesc aceste atribute pentru dumneavoastră; trebuie doar să furnizați detaliile pentru a îmbunătăți experiența utilizatorului. Dacă creați controale personalizate, va trebui să furnizați singuri majoritatea atributelor.

Acum știți de unde VoiceOver obține informațiile pe care le furnizează utilizatorilor, este timpul să cunoașteți un nou instrument care vă va ajuta să găsiți și să remediați punctele slabe de accesibilitate din aplicația dvs.: Inspectorul de accesibilitate.

Utilizarea Inspectorului de accesibilitate

Dacă modernizați o aplicație pentru a fi mai accesibilă, găsirea punctelor slabe necesită mult timp și este predispusă la erori. Din fericire, există un instrument care vă poate ajuta, numit Inspectorul de accesibilitate, care face următoarele:

• Se execută prin aplicația dvs. și găsește problemele comune de accesibilitate.
• Vă permite să verificați atributele de accesibilitate ale elementelor UI în modul Inspecție.
• Furnizează previzualizări live ale elementelor de accesibilitate fără a părăsi aplicația dvs. În primul rând, deschideți-l în meniul Xcode, navigând la Xcode ▸ Open Developer Tool ▸ Accessibility Inspector.

  

  Inspectorul ar trebui să arate cam așa:

  

  Sectorul de selectare a țintei vă permite să alegeți dispozitivul pe care doriți să îl inspectați. Acesta ar putea fi MacBook Pro, un dispozitiv iOS sau simulatorul dumneavoastră.

  Vizualizările în direct ale elementelor de accesibilitate vă permit să testați chiar în simulator. Deoarece previzualizările live sunt mai rapide decât ascultarea lui VoiceOver, acesta este locul în care veți face cea mai mare parte a muncii dvs. în timpul acestui tutorial de accesibilitate iOS.

  Construiți și rulați într-un simulator și modificați ținta Inspectorului de accesibilitate la simulatorul dvs.:

  

  Acum că aveți instrumentul deschis, puteți examina unele dintre cele mai utile caracteristici ale sale.

  Utilizarea indicatorului de inspecție

  Notă: La momentul scrierii acestui articol, Xcode 11.3, cea mai recentă versiune, are o eroare care vă împiedică să utilizați acest instrument în mod fiabil.

  Selectarea indicatorului de inspecție, care arată ca un vizor cu reticule în inspectorul UI, este similară cu activarea VoiceOver pe dispozitivul dumneavoastră. Atunci când activați pointerul, puteți să treceți deasupra oricărui element de interfață pentru a verifica atributele acestuia. Interacțiunea directă cu simulatorul prin apăsarea butoanelor va dezactiva Pointerul de inspecție.

  Panoul Inspection Detail (Detaliile inspecției) are tot ceea ce aveți nevoie pentru a examina și interacționa cu atributele de accesibilitate din aplicația dumneavoastră:

  • Basic: Afișează proprietățile atributelor pentru elementul evidențiat în mod curent.
  • Actions (Acțiuni): Vă permite să efectuați acțiuni precum apăsarea unui buton sau derularea vizualizării. Apăsarea butonului Perform (Efectuare) din acest panou va efectua acțiunea pe țintă.
  • Element: Afișează clasa, adresa și controlerul elementului curent. În momentul redactării acestui articol, nu funcționează în mod consecvent.
  • Ierarhie: Afișează ierarhia de vizualizare pentru element, facilitând înțelegerea vizualizărilor complexe.

  

  Utilizarea Quicklook pentru a verifica audio în Xcode

  Xcode 11 are o nouă caracteristică în panoul Inspection Detail, în cadrul secțiunii Quicklook din partea de sus, care vă permite să simulați în Xcode sunetul pe care l-ați auzi pe dispozitiv. Acest lucru înseamnă că puteți verifica ce aud utilizatorii dvs. atunci când folosesc aplicația dvs. fără a avea nevoie de un dispozitiv real.

  Presați butonul Play (Redare) în timp ce aplicația rulează într-un simulator, lăsați Inspectorul de accesibilitate să parcurgă ciclic aplicația și ascultați cum descrie fiecare element cu voce tare.

  Dacă preferați să treceți manual prin fiecare element, puteți fie să apăsați butonul Pause (Pauză), fie să apăsați butonul Audio din interiorul secțiunii Quicklook. Apăsați butoanele Înainte sau Înapoi pentru a trece prin fiecare componentă în ritmul dumneavoastră.

  

  Utilizarea acestei funcții este mai rapidă decât rularea aplicației pe un dispozitiv și utilizarea VoiceOver, în special în timpul dezvoltării. Ca întotdeauna, doriți, de asemenea, să vă testați aplicația, împreună cu toate caracteristicile sale de accesibilitate, pe dispozitive reale.

  Sublinierea problemelor cu Inspectorul de audit

  Una dintre cele mai utile caracteristici ale Inspectorului de audit este capacitatea sa de audit, care vă oferă avertismente cu privire la problemele de accesibilitate din cadrul aplicației dumneavoastră. Pentru a încerca această caracteristică, asigurați-vă că simulatorul este încă în funcțiune și că vă aflați pe lista de rețete. În inspector, faceți clic pe pictograma Audit și apoi pe Run audit (Executare audit).

  Veți vedea că inspectorul oferă mai multe avertismente, inclusiv faptul că unele dintre elementele dvs. nu au descriere.

  

  Când faceți clic pe un avertisment, Xcode evidențiază elementul aferent în simulator, precum și în partea de jos a ecranului de audit al inspectorului.

  În acest caz, vizualizările de imagine asociate cu celulele nu au nicio descriere. Acest lucru înseamnă că VoiceOver nu le va putea descrie cititorilor dumneavoastră.

  Click pe pictograma Suggest Fixes, care seamănă cu un semn de întrebare într-un cerc, pentru unul dintre avertismente, iar inspectorul va oferi sugestii despre cum să remediați problema. Veți acționa în funcție de aceste sugestii mai târziu.

  

  Click pe pictograma Ochi pentru a face o fotografie a aplicației. Acest lucru este util pentru orice persoană din domeniul asigurării calității care trebuie să creeze rapoarte de eroare precise.

  

  Există alte câteva setări de accesibilitate utile pe care le puteți găsi în inspector. În continuare, veți arunca o privire rapidă asupra acestor caracteristici.

  Setări suplimentare ale inspectorului

  Deși nu fac parte din domeniul de aplicare al acestui tutorial, este bine de știut că Inspectorul de accesibilitate vă permite, de asemenea, să testați următoarele setări de accesibilitate:

  1. Invertiți culorile
  2. Creșteți contrastul
  3. Reduceți transparența
  4. Reduceți mișcarea
  5. Modificați dimensiunea fontului

  Nu mai trebuie să folosiți aplicația Setări pentru a activa aceste caracteristici. Inspectorul de accesibilitate oferă în prezent doar aceste cinci opțiuni, dar Apple intenționează să adauge mai multe în viitor.

  

  Inspectorul de accesibilitate economisește timp atunci când vă testați aplicația. Nu uitați, totuși, că trebuie să testați în continuare VoiceOver manual pentru a încerca experiența reală a utilizatorului. Acest pas final vă ajută să depistați orice problemă pe care inspectorul o omite.

  Acum ați făcut un tur al caracteristicilor Inspectorului de accesibilitate, este timpul să vă apucați de lucru cu aplicația dvs.

  Făcând accesibilă aplicația de rețete

  Când v-ați testat aplicația pe dispozitivul dumneavoastră cu VoiceOver, ați observat că descrierile imaginilor nu erau foarte utile. Instrumentul de audit v-a arătat motivul: Vizualizarea imaginii nu avea o etichetă de accesibilitate. Veți remedia acest lucru acum.

  În Xcode, deschideți RecipeCell.swift și adăugați următorul cod în partea de jos a fișierului:

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

  Acest cod completează proprietățile de accesibilitate lipsă pe baza obiectului Recipe pentru celulă. Iată cum funcționează:

  1. accessibilityTraits preia o mască de trăsături care caracterizează elementul de accesibilitate. În acest caz, .image indică faptul că este o imagine.
  2. Se folosește accessibilityLabel pentru a descrie elementul în VoiceOver. Aici, este setat la recipe.photoDescription, care este un șir de caractere care descrie conținutul imaginii.

  Acum, doriți să aplicați acest lucru și la rețetele viitoare. Găsiți configureCell(_:) în clasa RecipeCell. Adăugați următoarea linie la sfârșitul metodei:

  applyAccessibility(recipe)

  De fiecare dată când creați o celulă, acest cod va aplica atributele de accesibilitate imaginii folosind proprietățile din obiectul rețetă.

  Constituiți și rulați pe dispozitivul dvs. și activați VoiceOver cu trei atingeri pe butonul Home. Testați lista de rețete pentru a vedea dacă descrierile imaginilor sunt mai semnificative.

  
  

  Mult mai bine! În loc să auziți doar „Imagine”, care nu oferea detalii specifice, acum auziți o descriere completă a imaginii. Utilizatorul poate acum să vizualizeze mâncarea, în loc să fie frustrat că nu știe ce este imaginea.

  Cu aplicația funcționând încă în simulator, rulați din nou Inspectorul de accesibilitate și navigați la lista de rețete. Asigurați-vă că ați șters toate avertismentele din inspector și atingeți Run Audit.

  

  WOOt – nu mai există avertismente de descriere! După ce ați reușit să adăugați cu succes descrieri la imagini, nucleul acestei vizualizări este acum complet accesibil.

  Acum, este timpul să faceți accesibil nivelul de dificultate al unei rețete.

  Transformarea etichetelor de dificultate

  În Inspectorul de accesibilitate, vedeți avertismente de text potențial inaccesibil, care vă spun că etichetele de dificultate sunt invizibile pentru un utilizator cu deficiențe de vedere. Pentru a le remedia, trebuie să faceți etichetele accesibile și să le actualizați proprietățile cu o descriere semnificativă.

  Pentru următorul pas, mergeți la RecipeCell.swift și adăugați următoarele la sfârșitul lui 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)"}

  Iată mai multe detalii despre ceea ce face acest cod:

  1. isAccessibilityElement este un indicator care face elementul vizibil pentru caracteristicile de accesibilitate atunci când true. Pentru majoritatea claselor UIKit, valoarea implicită este true, dar pentru UILabel este false.
  2. accessibilityTraits ajută la caracterizarea elementului de accesibilitate. Deoarece nu aveți nevoie de nicio interacțiune, setați-l să nu aibă nicio trăsătură.
  3. În continuare, îi cereți lui VoiceOver să identifice în mod concis intenția acestei etichete. Difficulty Level îi permite utilizatorului să știe exact cu ce are de-a face.
  4. VoiceOver va citi accessibilityValue ca parte a descrierii etichetei. Setarea nivelului de dificultate aici face ca acest element să fie mult mai util.

  Construiți și rulați aplicația dvs. pe un dispozitiv fizic, atingeți de trei ori butonul de pornire pentru a activa VoiceOver și glisați prin lista de rețete.

  
  

  În timp ce parcurgeți diferitele elemente de accesibilitate, VoiceOver citește o descriere completă a fiecărei celule, inclusiv nivelul de dificultate.

  Verificarea avertismentelor

  De fiecare dată când expuneți un nou element de accesibilitate, așa cum ați făcut aici cu nivelul de dificultate, ar trebui să rulați din nou auditul.

  Porniți Inspectorul de accesibilitate, dacă nu este deja în funcțiune. Rulați aplicația pe dispozitivul dvs. sau pe simulator și setați ținta inspectorului în mod corespunzător. Acum, selectați butonul de comutare a auditului și atingeți Run audit.

  

  Au apărut mai puține avertismente! Cele rămase se referă la faptul că etichetele nu acceptă text dinamic. Le veți remedia pe acestea în continuare.

  Facerea textului dinamic

  Auditorul vă avertizează că vă lipsește un pas important pentru ca aplicația dumneavoastră să fie utilizabilă de toată lumea: textul dinamic. Aceasta este o caracteristică importantă pentru accesibilitate, permițând utilizatorilor cu deficiențe parțiale de vedere să mărească dimensiunea fontului pentru lizibilitate. Fontul non-dinamic pe care îl folosește în prezent aplicația dvs. nu permite acest lucru.

  Click pe pictograma Fix Suggestions pentru a vedea ce recomandă auditorul:

  

  Acesta vă spune să utilizați un font preferat UIfont și să setați adjustsFontForContentSizeCategory la true. Veți face acest lucru acum.

  În RecipeCell.swift adăugați următorul cod în interiorul applyAccessibility(_:) chiar în partea de jos:

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

  Aceasta setează preferredFont la un stil body, ceea ce înseamnă că iOS va stiliza textul așa cum ar face-o cu corpul unui document. Specificul dimensiunii și al fontului depinde de setările de accesibilitate. adjustsFontForContentSizeCategory indică faptul că fontul trebuie să se actualizeze automat atunci când utilizatorul modifică dimensiunea conținutului textului.

  Testarea modului în care aplicația dvs. gestionează redimensionarea fonturilor este ușoară, datorită Inspectorului de accesibilitate.

  Construiți și rulați aplicația rețetă alături de Inspectorul de accesibilitate. Rulați din nou auditul și toate avertismentele dvs. ar trebui să dispară.

  

  Testarea altor opțiuni

  Navigați la comutatorul Settings (Setări) din inspector și experimentați cu unele dintre instrumente:

  1. Invert Colors (Inversare culori) pentru a previzualiza cum arată interfața dvs. cu această caracteristică de accesibilitate. Acest lucru este util pentru persoanele cu sensibilitate la lumină, vedere slabă și, în unele cazuri, daltonism.
  2. De asemenea, puteți testa în timp real modificările dinamice ale mărimii fontului în timp real pentru utilizatorii care preferă fonturi de dimensiuni mai mari.

  În timp ce vă testați aplicația, probabil că arată cam așa:

  

  Inspectorul face ca testarea cazurilor de accesibilitate să fie ușoară. De aici, vă puteți da seama că lista de rețete va funcționa bine pentru utilizatorii cu deficiențe de vedere.

  Transformarea ecranului detaliat de rețete

  Acum v-ați ocupat de lista de opțiuni de rețete, doriți să vedeți ce se întâmplă atunci când un utilizator face clic pe una dintre rețete. Rulați aplicația pe dispozitivul dumneavoastră, activați VoiceOver și priviți în jurul ecranului de detaliu. Sună cam așa:

  
  

  Există unele probleme cu interacțiunea VoiceOver în vizualizarea de detaliu:

  1. Butonul Săgeată stânga nu este o descriere excelentă pentru navigare. Cum ar putea ști utilizatorul ce face acest buton?
  2. Statele fețelor emoji sunt: ochi în formă de inimă și față confuză. Aceste explicații ar zăpăci orice utilizator!
  3. Când utilizatorul selectează o casetă de selectare, se citește pictogramă goală, ceea ce nu explică prea multe.

  În fiecare dintre aceste cazuri, este important să se explice ce înseamnă starea controlului, mai degrabă decât cum arată. Butonul Back este mai clar decât butonul Săgeată stânga. Like și Dislike explică succint emoticoanele. Veți face aceste două modificări în continuare.

  Pentru a modifica navigarea, deschideți RecipeInstructionsViewController.swift și adăugați următoarele la viewDidLoad, după assert(recipe != nil):

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

  În loc de butonul Săgeată stânga, VoiceOver spune acum butonul Înapoi.

  Acum, să trecem la emoji. În același fișier, înlocuiți conținutul lui isLikedFood(_:) cu următorul:

  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}

  Pentru ambele moduri Like și Dislike, ați adăugat un accessibilityLabel care este clar cu privire la ceea ce face butonul. De asemenea, ați setat accessibilityTraits pentru a-l identifica ca fiind un buton, astfel încât utilizatorul să știe cum poate interacționa cu el.

  Constituiți și rulați pe un dispozitiv și activați VoiceOver. Navigați în ecranul detaliat al rețetei folosind VoiceOver pentru a testa modificările aduse butoanelor din partea de sus a vizualizării.

  
  

  Acum, fiecare dintre aceste caracteristici are descrieri clare și scurte care ajută utilizatorul să înțeleagă intenția lor. Mult mai bine!

  Îmbunătățirea căsuțelor de verificare

  Ultima problemă este cu lista de verificare. Pentru fiecare căsuță de bifat, VoiceOver afirmă în prezent pictograma goală urmată de instrucțiunea rețetei. Acest lucru nu este deloc clar!

  Pentru a schimba acest lucru, deschideți InstructionCell.swift și căutați shouldStrikeThroughText(_:). Înlocuiți întreaga instrucțiune if strikeThrough cu următoarea:

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

  Iată ce face acest cod:

  1. Dezactivează accesibilitatea pentru butonul de bifare, astfel încât VoiceOver îl citește ca pe o singură unitate, în loc de două elemente de accesibilitate diferite.
  2. La accessibilityLabel pentru descriere se folosește acum șirul codificat în mod greșit "Completed" urmat de text. Acest lucru oferă toate informațiile necesare cu o singură vizită la etichetă.
  3. Ca și în cazul codului completat, dacă un utilizator marchează un element ca fiind necompletat, adăugați "Uncompleted" înainte de descrierea etichetei.

  Construiți și rulați din nou aplicația și vedeți cum sună. Va fi muzică pentru urechile utilizatorilor dvs. :]

  
  

  Unde să mergem de aici?

  Puteți descărca versiunea finalizată a proiectului folosind butonul Download Materials din partea de sus sau de jos a acestui tutorial.

  În acest tutorial de accesibilitate iOS, ați învățat despre VoiceOver. Ați efectuat o auditare manuală prin parcurgerea fiecărui element accesibil și testarea experienței utilizatorului pentru dumneavoastră. Apoi, ați utilizat Inspectorul de accesibilitate pentru a efectua audituri, pentru a examina valorile elementelor de accesibilitate și pentru a efectua modificări dinamice live pentru a inversa culorile sau a modifica dimensiunea fontului.

  Acum, aveți instrumentele necesare pentru a vă face aplicația mai accesibilă. Faptul că știți că veți avea un impact pozitiv asupra vieții cuiva este satisfăcător.

  Există o tonă de posibilități cu funcțiile de accesibilitate. Acest tutorial doar zgârie suprafața pentru a vă ajuta să începeți. Mai jos găsiți mai multe resurse pe care să le consultați:

  • Categorii de accesibilitate
  • Resurse de dezvoltare a accesibilității
  • Aplicarea accesibilității la vizualizările personalizate
  • Oferiți o experiență excepțională de accesibilitate
  • Inspector de accesibilitate

  Dacă aveți comentarii sau întrebări, vă rugăm să vă alăturați discuției de mai jos!

  Săptămânalul raywenderlich.com

  Săptămânalul raywenderlich.com este cel mai simplu mod de a fi la curent cu tot ceea ce trebuie să știți ca dezvoltator mobil.

  Obțineți un rezumat săptămânal al tutorialelor și cursurilor noastre și primiți ca bonus un curs gratuit de aprofundare prin e-mail!

  Nota medie

  4.8/5

  Adaugați o evaluare pentru acest conținut

  Autentificați-vă pentru a adăuga o evaluare

  10 evaluări