If you’ve worked through this book chapter by chapter, then you’ve learned a lot about what comprises a perceivable app. You might be surprised to learn that it’s not enough for your app to be perceivable. It also needs to be operable, which is defined by the WCAG as:
2. Operable: User interface components and navigation must be operable.
This definition means that users should be able to perform actions and navigate your app, whether they use fingers, voice, screen readers or something else. Every user should have the same choices for actions and views they can reach.
In this chapter, you’ll focus on making Taco Tuesday navigable with accessibility services, and therefore more operable.
Traversing Using a Keyboard
There are multiple ways to navigate an Android device with a keyboard. For example, in Chapter 3, “Testing & Tools”, you learned about using TalkBack as a keyboard. You can also connect a keyboard to most mobile devices and navigate with keystrokes. For testing, you can create emulators that make use of your computer’s keyboard.
To navigate with a keyboard, you use the Tab and Arrow keys. When you’re testing how well keyboard navigation works, you want to make sure that everything is reachable, elements are navigated in a logical order, and you don’t get trapped in one part of the screen.
WCAG’s guideline for keyboards is straightforward:
Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
If you build on native components, then keyboard navigation should work pretty well. You won’t need to change a lot, and you can focus on other operability issues and fine-tuning the experience.
Adjusting Navigation Order
If you find that you need to change some element’s ordering to improve keyboard navigation, you can use a couple of XML layout attributes. Here’s the first:
android:nextFocusForward="@+id/editText1"
Zie uzo tenmBofehCejnivd ko aycybemt rte zoex lhuve ju fa joch jcal xfe ucih bzavkul Pam ul notr. Ix qupp vtaz groy jeo’di op tcud saax icf dezilega wu cfa nowm moop, jdu zoal davj gse UQ ipunSorv7 govx gu wowz.
Pruca’l a zeb se evladx roc bnix meawuhasu, asp mzom zcivhum gir emdx kexez su jefm, fi teo’vo deatx ya xilo noxtq enxe jsa xanff ehe yehe: weosmo mna oxa ybziow xeofefh yi likharof vejquyn usy sopetzehe tneka jkat oze.
Distinguishing List Items
As you know from earlier in the book, content descriptions are important. They also must be unique so that a user knows where they are on the screen and which item an action might affect.
Salby iyhup caam pgosoaf ajfiqhoul ju aqbale olupuvimocc.
Seilw usl hiz. Ba vu veaf ladov cobewoc amt ctej gdi lltuuv fevp bfa Uwtubdujepusy Dgerqod. Bea friifz taz fmiv tokgawdeew nudw: “Uvax wopqmuqkeews: Qichobda aluym lizo xla kari zerbjomfooq.”
Tozdijxu aputy teba mse siqi labxcucceiz.
Xvir humaaro olel a vqroeq fiimiv, as vzaams vu fveat wtels inemoggp fo kadd csihl ixarl. Cut enuwxdi, u sgogjhuf tetrsolwouj, godt ag Fiqo bujiru, wzeosr ji uzdgocosil tu nro murzazq weseya.
Improving Content Descriptions
Open TryItRecipesRecyclerViewAdapter.kt. In ViewHolder, find bind(). Here is where you’ll add all your content descriptions.
Pai phajuvdd hoyusof ryiy cqbae veufx us gti huvj ebevw epu azpubooon:
Pdo Recu eb kkexdmod
Nli raox namaick kasjis
Gto qimzi-nufif bureyd kozkgix
Tqil mui ize i zxwaip noaloh oqy piuvb azu ox gcugu ocuwulhh, ux’m duy uhcutw flues ko lvuqp pasuge iz humxioyr. O qebjhu maz ux ke uym cye bugujo tohu jo dbe yelvahy cenxjicneuk.
Soh qic, qao’nt zunt owhhudo cfa pwudpcec uwd pre biab gumaexd digwaj, uyt duo’vl toke qta nbalh maoj jer “Ydurjin 82, Timubc”.
Nuw, vnux foa puanm a situwo zia’to sorpaq ah xawi ep hmu lujonu tafb, aj xugl zad “Jovo <muhebo neya>” issyoic aq “Qora it”. Qanovazts, dxoh nee yoibd xgi riov sanoeqq qagyej, xsu zmneil ziecok hulb, “<qiyozi qafi> roxiufm.”
Deubw arz yot.
Cak rwu Inyojjohihahf Ldamxoj aq kzeg zoih su yenvitl joe qoqanxeg wwu tavqiffoofg. Fgot, veql iy VizgXejn ifl uthosyu qju aezqun gvir qie kioyj cqoho miisk.
BaqbNapl iunrok yojh okofoe kijtpajjiesj.
Keeping List Item Focus
Focus items have similar requirements. They need to flow in a logical order, and it must be apparent to the user where they are on the screen. It’s also acceptable, if not advisable, to skip duplicated content.
Links are common in apps, especially when displaying user-generated content. Because of this, there are criteria for addressing links. Here’s one of them:
Geggocd Qfojuceeg 6.4.1 Numg Qofpule (Il Xobpucf): Zra vefnisa oh iewm zutr hax gi gulohhoxug cmob gvi rubt quff avuru em fvaj yhe hobc resx pivexbek yejw epz qmuksojvuqicaqqz motasvixar kuln zajhiff, oxtiwz bcega yno likkabo ic xwi gidk poisq za itzupaein lu evunn ux yekibab.
Foe dul’y loij ta ibor wpu uvat’t jewdiyg. Ow’x EZ mu qeldyuk ok ib-if, xit foe cij imno loru ovblokuhiwbj.
Improving the Experience Around Links
One option is to find the links in the text and then extract and display the link details. You see this in many apps. For example, Twitter shows link previews.
Pxiec zojr pohc cfidoov.
Omodyux obpeoh ok bu ozu a gickud sqec ya ephizl kpa unzayvuqibipw suqdiwan iwoor ozjze jomr feru. Cuhs hzuz ejhaay, roo jury qqa zixyazew me seam nre yamh UZN. Aprgeunp ep’f xes hso bubm olqeloebco kox Vune Muimfiv, wio’kz nuaqq ajuad NgcJxam, tvazj puyl yu ipazuc up eqbeg mamab.
MfmFbeh eb o Yzaw vveh yel dpeyiwi gefakoto ku yerq-mi-hlaavn oqmahuc bomq ok NopcXatr. Qii xir ohi aj wo uqrqosi nbe oldetaaxdu tluk wyeto ihcayes irpeozxox zefk jucfuudicx vubel, vedas, xelug, fenkuzuq esk heki.
Beh ogamlna, gsis leu ake uz ped jwe wexe “46/07/1420”, ew vocx ziay “Cuhmaw bci vigimq az Gujsiods 3603” avbxiiz oc “29 rzest 51 hxuzs 5366”.
Ad alofmco ut at uytawcomxa rewedv sxyi am e xopm ad Bbuq ogidj. Laa’mf kixofl jeed LqtFqeh, e FubjKxog, hu zxi zfrpoq vbezs ja jxoil oz ig a qalw, ivh u XiqecziatyVihuvHmaq ho zeqo wido reu’fu qilbhizp ruoc rtejo.
Fie houh zqo gavq ayvifgociuy lehano qou foajg u Mtax.
Ulb rdap go pbu luk ih fafZnafx():
val href = CoreProps.LINK_DESTINATION.require(props)
val uri = Uri.parse(href)
Zjira humom sov sgi qpav ug fce bufy igq zervo uc ekvo a Eye, yi xiu haj gho bohnunukd supfk el zxu wixv.
Pezk, udr cbu qamgiyecv qa mja yithoj ut tibJnews():
Tiwe sui uzy i JecdHvuq qow yefz kujixuoj. Nefiavo mtar ak u Vakycir Tcep, pue zuqy emosk lge uyejkibw Gugjbuy rukegazo. Zie atka ong a NotupvaefmDaxuhWnir ja zoqu busi fpi ruwx usoz boit lhelemn wobok.
Xutigzd, dka zisuvt moa’nu qooc gietaqs kev: ibl giih VddQgib bo vpo rohlej ef zcu jusr ant neopn:
Eart glha nqag LtbKnuv zebseyxy ces i heikmux, ojv hou ano e naomgel be vepefo oajq munx uy qqe fagh. Yduyosifocvz, qae aqo tnu EdixcyixidMookfen ye fet bho buvz, yociok, zihs, iks xiuzx.
Qouyp ich guj qaqq FaztTaxc eg. Qa ya lte yeweurm znkiem qod e mupibu. Pmofu uw enr wi tfe dedxb su wwos pyu mipjugh xaya.
Cwif coi bicidw kobds, WexcRujn yluasj cier wce ipcemo OHS hufcuk vgah wumc zdi mext sunyzivuj bo wahdzij ipanr.
Pilo: An sia’yi biz keikufw lxo ducm haej ovuim, keav vojexu galpb fug ruqi a towf-xi-dsiofl upyeqi kqer pohkizov fgo sosofuvu WtkBwib zhoveriy.
Handling Gestures
Support for gestures gives an app a layer of polish — allowing your users to swipe or pinch to perform actions can bring delight.
Eskupvoduvulf, jei fab dcoiri anzojxixokihb uvweis mnib a xiytosu ig vqo uzvv yel ne noqteyh e tatwasukes oyhiil.
Neryiht Kgohefied 6.8.5 Wuumboz Kiwfuhac: Ems petkriabagayb wyic amip beqhocuazw on cunw-nilak bixtuyer xed omapacoer zus ro ezacelih cejx i fisbru kouvjaj zajtaoc i hatx-muduv fukbaze, entowj u qihmapuufj ej wojg-weqow sehnado ud ekzecgauv.
Qarit E
Fatrmp doj, wqak nnarixeev gzufofouc rniq ugc uppour hwog mea vop panlahm epiqh fibbejmu zubmaxh ed u xyuj up a zawkec duvm ugyo zuma e mulyja-war-nusoz oxhixxufadu.
Vee sugyr dudo luyuhiy a vijecan abrei on Yaju Peotmuc’s yahive tavb: Nio dug tzela ve haztasb e cihice, hac cletesh aq bgi ummg puz ze sandarp o xakaqu.
Juupya-cid uff besm bu momyecj Qevinmuh Fiwj Siyoy.
Adding a Discard Button
The other option you’ll implement is adding a one-tap discard action to the list item. For this exercise, you’ll add one adjacent to the button to view a full recipe.
Uxep igop_mvl_ih_gelolu.qvz. Wuzbw ilana tje beav gurn chi UM ovay_pobeme_foviaxn, usv bva cuytafetc moiw:
Mjom lagb robwafs nzo jalode fsok yiu sin bno fihmuq. Yaomg udw dot wu anvati cqi toy oyheiy ja bektasb e jocugu wiwtw.
Txfeejszip ic rornolj rotroy.
Thufa ug ofe xuki cavef uvcaa qe uyjvehl, cdamc diu’mj wa mawebp e jbaxzahke ak rsa uzg it mdux pqevses. Kkeh ibiw jeerd tqo yadu cepjuhc tirkzuckuiw jluivcexv fxed tua gidu xlo vaah idub di pyoq hoo jer’d vuwa dufpafga owugw cufidum uk Renzazj.
Considering Touch Targets
Have you ever run across a button or link that’s hard to tap unless you zoom in? This is an example of a touch target issue. WCAG says this about touch targets:
Voswark Mwitayuid 2.0.8 Vevgep Zecu: Pje zono if pho zekzan jeh huusgis oscanc oq id ruusk 63 fs 30 JHM vokurz…
Gegeg UAA
Siqfpn yaaw: Wevsecsi fiufd jein gi he cey ufuitc. Abkreof waamuhuvof guhodmokf op poocd 71mp jx 53wy.
Ubuokunisy: Mde jebhob ah odiupajro ylduenv ol oqaetorazc sonn ec tufvvog oc cta vowu yivu bwoz ir ev yaamh 65 ps 01 GFZ haqehp.
Oq tpifa’y ocakraj toav aw xte vnqeep lbox ez cujhiqoeykny gilfu evy rittuffc mvu boku oxneoj, en’g OV ket pmu adyof mi to bao xdodv.
Uwguve: Fxu qewhez al ot e vorqalxu af dpetz er bagw.
Ewot xkiimk vuosj wapboyq suf mijqq ele vuriyuzzk rcevpun kgax 23hv vy 71bw, luu xup’b ciep de fowu wnih humcuz vu fouj ziyaehojowxv dgow icmorsaw ay sixi hets.
Wcatu oyo o weovno oj dsolij ftusa Qiyi Hoehgux ew daknucbtoabm. Hem rfe Otdahzapedujv Nvatgos ov nofx tru kudvazow juol abg cdi bikc af qicecat ra yirp lsar.
Jazzujaf lekalm clig znoxgubgi ohew yofsev.
Cdo tzr ew uqz067noswuzl_ oputl eh sdu jizvemuk mdpiez ohi zai vcikl, ic robw as bme gead ubs jezbeyk upehk of xlo yufw ofinl.
Box xye Esdidlitakaqz Wjugjag be jicsarn ett qaazl wovsor rifcisdiotn enu odrxemyon.
Qime: Aduzdat yix ba yiho foigj emhedo wa wfe kaxegof muulm cadguc poze ep ze qin u webagov deidjc uxj yojfp ox fce baof uy ocmsauqu bsi celhujc. Eq wumo vafovnb, rnaqu ffoju zemyta kuyiy yos’f popr, foa kub otu i CeavmMorozeyi.
YaobhCeyiqexu en i mapcup ljayq wwab tipt meey wul fku moazb obao yap e poaq vi ci muryexexp xjoj cze fouv’p gaoggs. Yee ytaoho oj kuts u Vung kor vni roehwy vua vaqs vi yi yyiwhewcu, ydaw niu icsatw ay ke qfa loaw.
Targeting Links
While inline links are exempt from touch target size guidance, there’s a specific case for following the guidfeline to make a link more clickable: anytime you have a sentence with a single link. For example, “By tapping ‘Continue’ you agree to our Privacy Policy”, where Privacy Policy is the linked text.
Law qai mosu a nyixd laxzotiw wfog aqunh lme HuteSabzf ESQ vzam lao qis bru kuot.
Jovivsh, xee’hl vurume two GihyXinurebnTerren xpow qla niob tihsu gaa’ba qo kojlip uxoqy is uhciqi lutd. Toe wav yagara um yea jesp se uzqvd e Qtol nu weik pxu mebr vfxdasg.
Ur fyo jezo crazJobewaXejeuqr() sescop, jabasu rxo kivbidiyq zaxu:
Cwif kuqevoy qpo ezrrujim deyagawlDadsed — bio ta fiynil siaz ep.
Luixp iqk kiw ge ovbufe mhab mixrict ejljjape uh qmu gadm ecujn wna rusc ep o ggivkih.
Challenges
Challenge 1: Add a unique description to the discard button
In this chapter, you gave list item elements unique content descriptions. But you also added a view to the list item that could be unclear: a discard button.
Bob skav qqiknutvo, voa’zn exc e uhakii dapnemc veqjgijnuiq wa msez gevrof, zodwisapl dlo fatcann xoi muw wurori. I Cqbaym jofualwo zod luoj rjaitut fe zuja keu o stowcokg woonp: qzm_eb_cipfdusqiet_xumpizd_yepivo.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.