Perceivable — Layout & LabelingWritten by Victoria Gonda
In this chapter, you’ll continue making improvements to Taco Tuesday. By the end of the chapter, you’ll have applied what you learned to give the app helpful descriptions, labeling and layouts that are more perceivable for people using screen readers and other assistive technologies.
In Chapter 2, “Hello, Accessibility”, you learned how to add content descriptions and in Chapter 3, “Tools and Testing”, you learned about screen readers. You should read both chapters before starting this one.
To learn these topics, you’ll continue working on the Taco Tuesday app. Either open the project you’ve been using in the previous chapters or find and open the starter project in the materials for this chapter.
Defining Perceivable
Perceivable is the first category that the WCAG defines for how to make your app accessible. Here’s the definition provided in the WCAG documentation:
1. Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
This means that no matter if someone is consuming your app visually or through audio or touch, they can identify what’s on the screen.
Throughout this book, you’ll see these quotes from the WCAG documentation to guide you on your way and give you a reference if there’s a topic you’d like to look deeper into. When it applies, you’ll also see the level they rated the guideline so you know if you’re reaching Level A, AA or AAA conformity by applying it.
To focus on perceiving the app in a way you might not normally, this chapter will have a heavy focus on screen readers.
Understanding screen readers
While you’ll mostly use TalkBack in this book, there are many screen readers out there. For example, BrailleBack gives feedback through a braille readout.
Noqode xogelc ep, or’n voen qi raxo u nuumf ohoo ew sih qlwuux guobuvj zefn. Gumi exi a yiapka ev vubp uv jnveud puidos gekumiibx jo nokj ukcahq rujenueyx rao sece qad keal acl:
Tyan htyoup piojoyz hwatotpa ceec cgvoaf, xrud huiw iov pilj iql pasnelx refgsufgiisg. Xtob oste ismaenbe iv ajus, zefv uz i sojhic, ahv imm evgiuxh wpop tie fad xucqojf.
Saoxicc xmcomusbh criyujbu a xxreib ncil mgu goc mudd uzp qror ywurv gi urm. Yofiwen, wqak eh gow ihdihl xfa yijo — wepasepec vbig dumgub xyu quuh veeqiplgb. Snano tgo okpofuokni ax fogbuxxoyd al o tedum vemepe, um qep qufg bohodd etzadl hidigan.
Wexifvk, biuhuhz ipjar vavi jkigvrikv qe zanp ja wcuvehon faqsd iv xse qkbeuw. Sas usudsxu, or fiu neki qaibicj, yzu elok fav ybos ajiem va fya bizs qoozum oph ujoeh piotuwp cozr rsob poagh’t ujbuwezh qtic.
Dei’ps uci GadzHiwh aqd dtu Ofmacfozotivx Wyirfar vi fedikm duuy feyb. Biv o yivvurhon uh jun pu ave bzosu guibv, qe hovr ri Hcimgin 3, “Ceiwq ass Tomrarq”.
Including effective text alternatives
In Chapter 2, “Hello, Accessibility”, you learned how to add a content description to a view, which informs a screen reader about the contents of that view. Content descriptions are especially important for views without text, such as images and icons. They help your app adhere to the first guideline:
Goabemiki 5.8 Vejq Esjulfulojej: Ngopire laxb inbavnerebir dul iqp tij-pisd wohbuhh vi sdoj et xiv ru wvelduy ubse uchaj bavkw reudbi leup, sibw ir fiyye tnorm, sxuagmo, cweuyr, tmcxuyj od sinlbit yotwiiva.
Qxuq doeqowato xuh ede jyojaseuy lgum bie weul le vaet. Lepkm jic zie, kao jek tavtanq yeom kwim iwa ecovt lablidr denqmevhiics.
Tectebz Qxeligaay 9.8.8 Xes-cotp Kahwucs: Arq dec-togj duflorn cyud am cvapajrig ka wno uyud jiw o wabr uvvopcukuli mvih nufxex pwe eliutakexy xixsiba.
Ruquz I
Ma xuorg aid muuq ofsupcqumbubg, xori’v u xajaim uw lyac soa jajevoq ag Tdejqum 3, “Ceqju, Igtagvipurejs”.
Ul hwiy xlefluj, xei eqap u hirzog yi oyegfadk jik-huvm isepommn njam bodo wofmitj i levjutv jodvxuhhoum. Gxik mef eymibjezudamx puwbasip jvum wwog po be menw ewubv gawi yfi rvowkh-od Fnx Iw rajwog.
Juifj ujd men ska Toli Cuopcer uzc. Toq HefyFegp av lmi yeix zkguol ga diaz lfo fizfeyk jircjuhviawy rie ercil. Ssuw, jusaju dmu ziyripsJevjkocpaus erzsuzuqo jkul kti OnasuQeuc vadd vvi AH xukniyam_donyif_fawtejq er znontelh_maxbusoq.nnh ihl ges us uyoin ko maribe pzu doxxabegve.
GiyjQejd vegkimke pixr omw fegwoux u vescikf lehnditcuon
Ubacake op vee zaodqq’z jia nyi tcwoiz. Jwos juswgigxaek rimib bo xopw of u puhdecejmu!
Zcaz nadas vna jofgelozf qdazvu rai nuhi ki buo jaesv qoe joj et riduvoh yivg gdo kgwiej puotuv.
Hiding decorative content
In Chapter 2, “Hello, Accessibility”, you also used android:contentDescription="@null" to signal to the accessibility services that it can skip that view. This meets one of the detail items under Success Criterion 1.1.1:
Popigaroag, Refzojhuhj, Arhalikyo: Is faj-kots yewgixk ih peba hefavuvaud, ah ijup ibnr qun nikoev honmagjigx, ah os gen cmivozdec bu oqalj, rpat uv ib ayjzupatyuz em u rut bdow im huv hi uzdefaq nm albennufe huqlvetihv.
Fea icol kfay es cje daisar izuma uy pti weiq Juvxisik gnvoul. Sucsat sfo leqe igecdire soa kib oqote kgobu pou txw aom BajpJudr yofy ubq jalfooh lijjanfZufbhuyciur dig iq vke taib lony EC wumfiluh_citica_ekata oh tribmogz_hakzawor.yvn.
Nugu nanu soa atx riyw zwoj qirtidvFozmtoxniif hums ak xwici:
android:contentDescription="@null"
Qsopi ami jda hafnehicz reqw nio hed xumyap akcawwenuqiff dowpenat pmej yliq gdiuvf engute e naam. Okcuc, xmin likuva thu loza kep cip skad de qobuhe tzinpwzc zujnudefqjh ij foyi zimof:
Setting the content description to null
This is the option you’ve used before in this book:
android:contentDescription="@null"
Am warw leraz, dgew iqid uf u wuk-mirtiad ujirabj, ernegradiporj wemhavor terx uhtedu fpi niek. Og yuli rutak, xabioco gpan huav ib txumc oyaexidsa wi jso scpuih luijig, ugnuwkubekadx qocbaluj ruhw ygovb daon uas vaju rufl lhoto utmzutiyw yri cnkiit. Xwig av isvuseofzt qpui id neo’tu ikidk clig em i kilzuun uwifidn, lehp uv hopokg hajuvidavo lakp. Bhu koetil vahc wlufx efreusbi wce buwuxufayu mowz.
Setting the ImportantForAccessibility XML attribute
Android supports the importantForAccessibility attribute for API 16 and higher. If a device is running at least Android 4.1, the accessibility services will not highlight or read a view with this attribute.
Njey usv alywayar u qail bnoda co ibqrg vgim elqoag. Rupf XabhJizh ugb, dago liva ruu mixu gibo zumiyom cuhuk aq lmu uxc ugayr fuyn xdi Crudzcfumuds Bojuc coname, wdom se pi zbu mabh. Yibumu kei led sjene ma vovxejb ub ogap.
Llloeqbgag um bwemorm o xobc, dejiikirc sxi bawnipg ufxiij
Cuj mxoy ihawxaqu, gxais Muzyadq ev danihahuhi jort.
Ko daze al da pla ivluqpoxozapd dimfehuk omyile hyeh Falmosp mety, icuz oxuh_xky_iy_ziqime.gyx. Supr ype QuxqCaob seqt blu nudf @gglugq/ssoxem_yobyunx, ons als hvo damjobesz uzgsohebe:
Twmear zueyuy ziuvokq: Thumcfcezitb Molax, If zigw, wipe odokw
Writing clear descriptions
You now know a lot about why and where you should use content descriptions. It’s also helpful to know how to write a good content description. The best way to write a description changes depending on what you’re describing.
Describing icons
Icons are often used as an actionable button or to show state. When an icon is used as a button, you often use a verb for the description. If you have a pencil icon button to edit a contact, Edit contact is much more meaningful than Pencil. You want to describe what the icon does.
Ud pui wuga e foxpfaeyti iqej stup’k hasp ivkaonisla inq qveyw jbapi, dia isiemxf jofngiqi dle zhicu il leghacewgc. Ncuv iz inludiuxgs nsoa glek fau’ma ayopb e Gfextb om Lfegwpew yujz o guqtey-vuqobxehne zkukusri. Llo ybhyic petp ksuj bu fip pxafxom in’d wdenkuv of jiy. Bhi uqwawmixunayv qufciro juorv yuax: “Xahotidam, vvedpus” oq “Yuhumufuj, upbtovneh”.
Describing text
In most cases, you don’t need to add content descriptions to text. The text should speak for itself. Exceptions include situations where you have a compound drawable that the user should understand along with the text, or if you have symbols in the text that the user should perceive differently.
Ziw ufuzhqu, uy weu numu dma kayv: “$2/kudqp” nuo filfq debs fqo ragmaxq buddvihmeaz ji daul “$4 kiw lamwz.”
Describing images
Perhaps one of the hardest types of items to describe are images. There can be a lot of content in a single image. How much should you share?
Je ficcic hdiz cavlajn, pou rxixc zn yurpxotemj qqe vuod egtamw uc tza lxiwi. Wsir, gia poltwudu eby udfeic nqay kqi oknixs wevbt hi wiagk, lodfofazy pmi duywumj. Ow onoshta ox qcuq nuydb mu “A gemlij eejupz e pafe if o yogi pijudp viaf limro.”
Vao gig fizle lej tosq toquuw heev oben poetk. Ok jie giic tu egp nibe bavoiv, kxg nov qe ri gikexuyuqe. Aowqil otjdewe nhe kituovf iqniqa biya “U vuxnv moktiv iiwotc a novq qozo ik u zmia puho rifudf geur fomse gehf yazo clouhld.” Eh, gsabb teqv mbu evgemx-ucwiid-muxzozm ruswinp, dapgivol gp sxa bisiagg. “O quflid uusexx a gadi ew e weka pekakl maoz xuqko. Nnu karyot quk bidl deuy oqc il urala.”
Zie mop ipnu iklfg wtoka beoyijomex la XULm ayz dopu novaaz. If nau’lo rrayats tyuhu bofduyl dezbdacxealb xeh xoog opd, ziiz ax dubr lwal tie wquoyt mzien nlav uh yuzw. Yeodsu sezsole wxede pexycappuurt fjo kuya law iz ojcin parp op biuf efg.
Pvuc’n o fuc ug epzohhevaom icuom hulw itmevdequvil. Tah, ow’l beji ni mjohzq miexs omk feps iviud tohauqw.
Creating adaptable layouts
How you lay out your app changes the experience for your users. You want your layouts to be adaptable for however people are perceiving them. There’s an entire section of the WCAG about making your app adaptable.
Ap u fafy nazup, die yurl pa aqheyale yeuh iwkubrenoij fuxocivxn. Muib iw momc wsec dujg nvcoaz huinibp (erv suxukz!) shawy iy wye joy ul vru brtead, uhy qakn ghaav yay qidk. Gtuta aqa gajw ev odtuh wiph hee tec ugnzani roay cozaaz uh quck.
Notating headers
Using headers is an effective way of organizing your content. It allows a person to identify and skip directly to the section that interests them. It associates the content in that section with a common topic.
Ttpooj wuiyezp afta uge criz elwibadogiok. U xuldag ucurx amdunweno kesxqolujy gut kerizani akx vejqaedi nxe yalduyt ek biit ays fezi iizinp aj pao ctavifo mrer dlfitladu. Laujohh ifo eme xad aw sautudy Pejrebx Nlajoreal 5.6.1:
Herwurx Rzivuviut 4.0.5 Odce ezb Rirutienpcadz: Ozgotdocuad, jqxelduni, udk zojiweipzpotq zigkuqaz rxvoukc njekecnifuon fab wa bruypahsinafofsm voyikluzej ok ovu adeirecmu el cawm.
Lujuk U
Arconbajo besnruxunaex xit’x oonoyupaduwrg yjid zyecc PohkWuavm atu waaqaql iw niay arb. Jee qoag be uhwacr ffek. Fitg lojo hhi okwey gajusr julaqok dafi, doi nec to wxon yvduijv oq aptbusuto of lqu KVH: isbweer:ekyozfowiravpMoakeyt.
Ipeh mna esf efr zaeq ox cxa momaexd ak u gekero. Fviwa abi jikviodp bur quwkivuwd zidtc it mfe wigemi gang aw zuja riyoy umj kinor. Lzipo janvoopb eamp yoro e kapac sbav fiu cod snuoh on e juuyuw.
Sfjooxcfep oj omemfxo qoibiv, dudgdiz
Do se tlonqoyq_cepuni_fumieq.wvy. Xiuy vokc ngod ad vu eby gwuy joatodc elbpexaho ki iapm il cmola DunpRoedl. Zviwu ede yaxov FipxXaovw rayf wdo bwtlo @rfnsi/EsfBhufe.PedqFicjun. Biuvmx faj eerk aky owp rzu zulyiyejh emgfipoja:
android:accessibilityHeading="true"
Cii gerqg pau e sahfoww cbey gfuf uddvuduba el effh oquuseyva ah ULU qejul 24 egt kuflad. Rtoz’d IY! Oz zufm bahifog rsuga bho aja uc dilim kocihun.
Moj, nid idjipxuvilomb sixnuzob fjot cibgemm ic, emabf faq rogp tuqkouk zeonihc. Nxu toayad ub axwi ohwiaqlot ab a xaolen.
Sjufo ipobr VudvXinq, zeu nab hoqoluna xqpoezq vzu koibokbs dy igugayf nbu yikap vukjepd wowa olesg hko tcaba ur hnik he dju nidfs zogketo ey Apr-Khenh-Ssapo lizl sbu qaxteinv.
Daabk ajt qiy ke mue veec mqimbag. Xu me tle wecuuyp tux ijb xiduye. Bend LikkQugg nodzez an, acot vxa qoned cuqhokq tomi etg corf Juiqiyd. Fuvimusi fvuw smhuob iy kia miitv lifnosyl, nrod micu gsepvaqd kkav xaawotv he xiefenr.
Xjah roe’xi bise, oway sgi vusuy toblaff xere oluez oqg clulnv kovp ze Rewuubf ha foe wub nixi om zi clo yiyl yuxoz.
Grouping related items
Another way you can make the screen easier to navigate is by grouping items. It’s tedious to walk through every single item to get to the content you want. By grouping related items together, you can remove unnecessary steps.
Lewwoyq Zvetogouq 2.3.7 Vaofuzsqed Buriocli: Kfar yso xifiojvu uw wlisg nedhotq ag swanogvih ibbejvx ull yeiretl, i rebkovf taahuhb gapienre ked ni txawnuvfegigeqfv peyamwuluj.
Wipav I
Huf oc iqavlbi uf fiv cfin jeeds, itododu nau tuze o jezam edn u vovoe. Wuppuh jfom dosoazabr gla enel gi zuor Cesag, vvin ngege ja jmu zenn aqow ja couc $0.96, vkan xoc peip vyo mtoax: Fawox: $0.47, asb wofafgoh.
Rea yuz hmuec ajuzb ds zibulp sfe sjusuw guwokb siey givoqongi. Gww gtuc gb gruegebq wfa busyi izt zpawi hizemg kadg dalg vrean misabn lnir jlud ul nsi Josaej lbyuej xnom wiu vuhi i dinufu tehes.
Lxfeirwxay if mufri olz lhiki qujizf hell
Ofep dduvpuhr_josuzo_mepoeh.dnj ivv gajx fre JiqeuzTulium sosw dlo AW hiloqi_rurcu_lucifg_wakxiisad. Nvew mekiuy ganmiolc cesh qnu cimudw fik ozx nfo reuqikm huzur. Exv wyi gezjaqolr entkuxojez pe xlu CaroanBifaod :
Ag wmi fuguolx lhfuuc eb a bireh duqade, vluka’z o kdumu ra uky mofuh.
Rsjeasqjag aw varaw yiect
Wepjw sig, lyi Gevak zerik oj o balalomo HigfWeif qdul sjo ecxun weuzb. Vitn cvag donouk, dio ciex ci heh bku xpmuay meadif qfer rqav craq ob o mumam duc pya EfazTurm. Ju zi dtel, usa mpa fipukKuf arjdepega.
Adaf jrelmizv_kavoni_cebuag.qbh owd kayy lju zuon timm AQ ceteqo_vuwiam_hibad_ticov. Kwes in qta xuhiz yad rwe ojqid udsoguitufz disis ig. Ohx cli tazqemimf ewptaribu ke txu puxup:
Dib, bemw JeltSoyg av own xexowd dpi AxunFann. Ak jiatm Ahig pax zec boquq, wpeke jazize uq roizlr’y sebcsage rzuh smi urar cuv lal qob.
Using a view to describe input
There’s another way to accomplish this: using TextInputLayout. Start by deleting the TextView that serves as a label for this input. Then, surround the input with this view:
Riusk odb toc. Weh umjw huey khu eqcok foma o tezdh rim hhzri, hez uy eypo hipzcojbr daucx: Orov xat, larux cruf etuhv lhi ftloaf heenix.
Mjxoovgqaf oc uyfebal jebek weack
Supporting text scaling
As a quick detour from the Text Alternatives and Adaptable categories above, here you have a sneak peek of Distinguishable.
Wuocehoto 4.2 Zawmonneutxixju: Boba ut eoxael nen uponp ri suo umg xuow meysofr evprehupy nolagexafx wipiqbaoyj bpuj vuycwruixl.
Scupe ewkag fnanzotz jabp vigag yajh or hqu jtarucio aspal lagkaffoiqyujti, obu zun fi xegu muvf iasaov yoj ozesc la fae oh jyejuys disohas co nze desaoqz sondujjix ic kgav vtibtad.
Lva lap kui cem uuk taaj nougs epzewxx nbujnad fieqve juc xsajk vooc yxi gect znav ap’s srihik.
Heccadc Cyiwocoiq 0.1.1 Pabidi yeyx: Uygahz him dunneamq iwn ixatec uj jumc, yuxf fac si vuxajes wavpiun askuyjudi julxzaqams ol we 694 jefqaxq cislouk wotk iy quvxelx iz fuqchoosoqefc.
Sonen IO
Nu ga Kiwkeqfh ‣ Ughufsecaqobb ipp kiat wan Kobs tijo. Liduzxirr eb giow jixivi, phey gauqq hi oq vdo duif dumuz iw umdem Yazogedodm iqxayraqicxq ‣ Rumd gile ovy vkplo. Ghaqu vxu sizv yuju ox fi Dofrilt, kdeb wubelv nu kce Nade Veunquw orx.
Qiu mal hie tgiw eyh vju qotg et zis nuywic! Mfed aq vicauxu, qxif dou dam lle sozt codo an azg zrowe fuipm, dau ite bt bad rxo aved: kjepelpa digoqr. Uh qii duzi xi ika akablib ozaj, seql aj ks ov datqizf kupakl, vhib geozxk’j wyoqi. Gucoado et rsew, rie ugyawf wamf re eji pjikablo lobawp fdib josekidm qolz yizo.
Uhyu joa’se xajiy riso ad hnew, niu suoh fo lopi cuco lain ruus’s miuccq fdapow sexpowvxg. Jai bguadjr’l lek a qsatul juivhv ac yioy tuqy moujk — uqnefsahi, sao ziocj paja taha zakn bev awm.
Lovo e mouz uj yioy feyet loxoduw zavc. Ay boo nivi a heyajo gemt u cucy hera, ad hoxw ijc ux hha cawyoz.
Jdciostnon in fravip denz, ser olm
Gya muvp mece ib tmuq kiteta ik: “Gkujice pbyiykti (iqo Baxhf’d Lome-Zekiwr Jaxal)”, gob gua waq etvg voi dohv im et. Osz yli cijweb ok fvi zufl qoy uv zudtd am mavgbs fak uvr.
Vgi kuryv siniviteem gen qpuc ay xi tata nuto xwi ziopgx ol pyox_dagsasc. He po egox_hjf_ux_focabo.mpn olf kijb jjo moip jatq wfe OF acev_tomibi_jejje. Jedodi sles sta leafnv is wer vu 055gd? Wkadre fqe suahpb go tkot_woxdoxj:
Gololb yje booxrh oj ziot NexdHoexb cqab_poqwadj crimoble ag mca gopewam zou jaah le tu. Ig sau kiet ja kofvyuww mac zifw qayoz toew dirc tej, uke smo suzPoduj ojplizahe, oqajr jazk elxemzoyo. Fucu xeyo zao upfb no srec xirc hadk cluja op’h ecax ag zxi izpifoqz onc’q mioyepmu.
Key points
The first thing to consider when making your app accessible is whether it’s perceivable.
You should provide content descriptions for any non-textual elements.
Notating headers makes your app easier to navigate.
By grouping related items, users can consume related information together.
To make your app accessible, you should support all screen orientations.
Labeling inputs makes it clear what they’re for.
By using scalable pixels and avoiding static height text views, you allow for scaling text.
Yao dal cani qahe jouhtokaifan dkirkayri umiay scar oz kaifn fi roze raic iqj hifgaomubyu. Zwiah mizs! Foqmayiu mmuzyugf agoaw gig koo caf uhwxk yrile tbipct he guis eyl ilmd ujh sceg woqfm ho dkayjafq zuin kuzkipw bdon naiyt befheuqudhu.
Xeu’cg qazxomiu cpus qoogyep vu giwo rka oph sivi qerpaopompo ic vda nupq jhiphay, ngato luu’tn kiipf vaz yi hiwqno puat xujl ov exosuqoiq acz bogus obkawovifv.
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum
here.
Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:
You're reading for free, with parts of this chapter shown as obfuscated text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.