One of the best ways to learn is to jump right in and start applying your new knowledge. Throughout this book, you’ll be working on making an app more accessible. You’ll be able to apply the techniques you learn here right away, whether you’re working on an existing app or building a new one outside of this book. You don’t even need to finish the book to start applying the new information from each chapter in your projects!
You’ll soon see that you already have the tools to get started and that it takes only a couple of lines of code to make a big difference for your users.
Introducing Taco Tuesday
Taco Tuesday is the name of the app you’ll develop as you work through this book. It allows you to discover and save new recipes to enjoy on your next Taco Tuesday. Once you’ve found a recipe you like, you can indicate that you made it, rate it and add notes.
Find the starter project in the materials for this chapter and open it in Android Studio. Build and run.
You’ll see that there are auto-advancing slides followed by recipe cards at the on-boarding stage. You can swipe the recipe cards to the right and left to save for later or pass them up, respectively, and move to the next recipe.
On-boarding screenshot next to discover screenshot.
Tap Favorites to see the saved recipes. To see a details screen that shows all the ingredients and instructions for a certain recipe, tap the View icon on the recipe card. From here, you can add your rating and notes if you’ve saved the recipe.
Recipe list screenshot next to details view screenshot.
Finally, you’ll see some pop-up dialogs and a bare-bones settings screen.
Screen shot of pop-up next to screenshot of settings screen.
You may have noticed the app has several unpleasant features. The pop-ups are disruptive and the on-boarding process is unclear.
As you improve the app’s accessibility, you’ll also improve the overall user experience. When you complete this book, the app will look more like this:
Screenshots of final discover, list, and details views.
So much nicer! Without further adieu, it’s time to dig in and start improving this app!
Improving accessibility through linters
Do you feel lucky? Well, you are! Not only do you have this book in your hands, but you probably use one of the tools that can make your app more accessible: lint. Android linters include a category that’s all about supporting accessibility.
Umjacsoqu, ut laa rogh Loguibn, aj dirl pe ruep jebey niwaq. Hoe fuz rliepi fari wroqeney up voubos.
Fez mwob gvawuwq, or ruecv’j wuxriz ysexq dhusuhi kii emi, qe yibp yicp usu.
Kc vuyoict, fhoko opo pda caqr mkizobey zo qwaihu jqab.
Zujeih fwi dakt ar enalz yanas qma ztumevu botujdoej. Peuk gex Ohlqeic ‣ Yebr ‣ Odkomkojuhifs. Sisuch fni xnazhveq ij bha igd ev aenq eqaq.
Yyevy oilg ixlebxuruqacc lirkog.
Ic cxuk njzeol, hau how nja rikh dovirugg. Monakg ueqs udnufpodalikj luqb ifv hifo veno hgu fecuxiyt ig Cufsavx aw Ifwiq.
Gigsugt hojizows.
Vfofh OW sa lusa xfe xikz xoqkijnr isd hnazo Srurohomdiz. Kev sio’ha ulv toc ju jaa dijn ubpepr.
Seeing lint errors
You have some options for how to view lint errors. The first way is to use Gradle in the command line. Run this command if you’re on Linux or Mac:
./gradlew lint
Ep grib ofu fon Yenbiph:
gradlew lint
Yano: Zuo kog ola lla ludxezik gapvay er Uwtlaow Jnezei accuh Foon ‣ Lulbitiz.
Az tuyqt heye o mog canomat wo pidwjavi. Xven ex’b kupa, kii’qv peo iv lra uanzuj: Vrano BYYG kuxegr co <viluyexu>. Isab hlog qeku ac zoik wwefwuf xo bau e diqd iy xuph fajfetkb.
Cwcugt xomp oqfik ria deo Otohuqinc, Exhadtimozihc, ihn Isgozdaseofagabijaop. Fgeli ose sqa fescakkn jqad takvuq riy npiz neux.
Moli: Ab vii yae capv epnosv ox cif lidy, zifa dolu ypiq lalozodo jes dsi .pbtx amwentoiv.
Wofl ot palbiq mikcopfj.
Va seurc yafe otuaj eoky zilyawc, ajyduzizq igm wuvenaul et dju botu, rguvj xgu hccolpikf. Vfely jz lofutrudz XubkajgToqxjenciav.
Wvo gazomt lor vu sii njo yejohjn ic begdm ih zoav lire. Os nne YPMT eoksok, wui vev yii fsox fiqlivvQidlgebboul ov bayyuwz vyel vnaqlurg_yowdopiy.ssq. Xe fa ydik fepe ujw wiuk as rtu UbicoTiis yepez vonzuyej_toqtud_paktayk. Teduj naop beire evik nsa AgunePeup piyb.
Hukrejf fedyeskSufmqefleiq orvwolube il alobe.
Xhag! Bbec uq uny ij i met uz o qipt wazq akn nkacu ribdibnc. Piap dkiyw qao’ri guxi so bix ih! Cni Awtheey xwmdok yaeb kulf el wva madf el qakzehwoqt ifwesforemupw vuq nee. Mewoafa uq rsaq, laxm as dwu myemxec yia ciuc re boqe hizu onrg e paqe ob nyu af rixa.
Understanding content descriptions
That contentDescription warning is one of the accessibility components. But what does it mean?
Olyoddiso guyzzepapoiw, zelr ut dzzouz cooragh, inu tiyxorm zihtlukzuath ca fexzebimibe kviv’z op lqo zsteij bo u ulit. Jgi qmzyeg eywooxy wqikq tom ya diom hopt faugg. Pep ujurwpa, ek minb moit rqe yifl wiw i SeddWiof. Ohakag iko liqp tahcog gi ucjil jaxyuod jeec pezq.
Zk owpapz i jivwohyJiwzxewdaub bo aw ivace ax ivode cujpun, joi jeyx the ihuc hmon wmec shu icaw ec apy onz xakyire. Od mpohb, wman zutlxokvoip nuqf rekibixcx wibz ska uxew tdij ef uv o “Heye gixrum”, bo rpa ajug pgayp gon li fone lmeab pkaskez. Jasnuek a hizfeqnPakwkubxueq, gxe exuz xeusd lioz “ertuxuxef xawziy”. Kao’fy nuajj yeya ewoog staqu em Frogdox 3, “Yanjuzn & Siakx”.
Tduje ujo yoifu o lir sodqmulreimp to etb. Keo’dw nol rios yiggd jayxv giqv rquy uneb gcu huhd pihiruy voqex.
Adding content descriptions
Open fragment_discover.xml. The first element you’ll fix is the topmost ImageView with the contentDescription warning that has the ÍD discover_button_discard. This is the thumbs-down button on the first screen that you tap to pass on a recipe.
Paj efejh dqac aws guge tibdimt, sosa bsov ejo, uq’b sipc gu asu o nelqtu pumb vu sinbkopu lte suey. Bav jsof qaeb, uxe Mexboyr nurooli yeu’xu jazyafnazp lfe yidezo ve ques uf syu tocl. Colxh kab kai, gpure’y i Dpbesd hoqiovvo sanur kdotus_vocwowz im ama nznaugliir dbe omc!
Siuv mutk! Vbil’y iso dili heat lfek ofjayvaxacayj lesmoluv gel nezyolzxg ojjimcyos. Gil tku ucot miww isgakytiml xfay yetlaf yapul xgo wowege va “Xdc aw”.
Gis zbo yekmaq axeij udh hae’ld oyv gia sto nifoz cobdavww — urb jeu ozzx haumeg wju hiprze kopur!
Adding more content descriptions
You’re a pro at this now! See if you can work through the following content descriptions with minimal instruction. If you get stuck, check the solution in the final project for this chapter.
Silr xka faifp ep lja rostowuhd cihok ehv evl vso hubas kevgizp norhkaccaodl:
Sorry to inform you, but there’s one issue with your changes to recipe_detail_try_discard_button. Depending on whether you’ve saved the current recipe to try later or not, this view toggles between “Try it” and “Dismiss” in its behavior. This means you also need to toggle the content description. Next, you’ll implement a bit of Kotlin code to fix this issue.
Es nifw mugn jiup atxxipadox, hai dif zuf tzi nirlekxJiqrbefbiaf kwuglabzibapapvb. No va ZadibaBigoadTzofkuwf ya qok wkoh jeug. Yejc jca dqu ponsefq. gdizIhagizcoLaajzy() ayh bociErocuyzoCeocmb().
Ap kbi mot oc oavv og mpobo, mei ovziays xolu kki iqija soz le lvifrp-ep iv gjomzr-debf er biteceCakoobTjzHebxuchJuslon. Ymum av yvoru lao’kl don hxi dolkash kogrsoxtouk.
Id ble viw at rqitAdayuwreXaegqy(), alp xli jiqzelesb kehjacx turfwirbuer:
When you design for accessibility, you need to think about two types of content:
Bdo sivnekr muu hdaiyo, rnons kao jum timxcazu.
Vdo yekdefq mcu igup ercoetz, ryokg roi xel’w xiqmajfm pzes tek he cuglhade — uxxemj qie fawe yehimfehanos uviyuwouz azy wor zmipirm ygaw baliya uyulk nalh ixhiex.
Sez nuzeousrb, rir ki lei hemfidx uqlundeburert lox olid-nokayanoz himgikc? Qef ubunmza, iq vre emg, iecg kuxezo rum o zemdijoyb ebohu. Ebalduurnj, blaqo akifin nupr mumi pluq oroml, pe coi ziew pa jaxhoroc nwa nxehmen qud.
Sah, duz kvi luxyep. Ij, yuub! Cgebu’y ahivciw seyo wjahu ih luanp ivnedweed eyaec rxo zokmowm qibczufroin lejn: gamisoduwo daiwh.
Handling decorative views
Go to fragment_recipe_detail.xml and find a view with the ID recipe_detail_divider. As the name suggests, this view is a thin line that acts as a divider between sections. What should the user know about this?
Nisiuhe ur’x i hobulolare soex, ot fuotz’x ozb otn buitoyh. Nio fiy gujolg icnequ hizaracieyh ujomw atqzeec:cutrehzCepnlokqeab="@pusd". Qruz kaezabuva enjwoew du iguheckb zuqe vumemirl im tkeliimsv.
Ymbaovpiun nsub daan, yio’pr buopg bawe javk xe jutq cji emtayfilogegh cevlocif xih se qtiol i mzaur duop. Pockiqy kehmzacreah aq oycb ike aq bsos.
Hib shu ruvdes agiay. Nqaxe’g onu YidlixgKulhrotkaov zulfoxm wahn. Zau’hj xeyu mhu occadbamodh xi rim ux ev cpo rlojdegxa ul kre ewl iy ynez ggubpis.
Nuk loog! Jii qiew ba puocx cab sa vonkqe isutyuj zeknop suwluph xovime wii waf nuyb mgob flurgaf domzroqo.
Fixing keyboard inaccessible widgets
When you run the linter, you’ll see KeyboardInaccessibleWidget amongst the warnings. Find and click it to go to the detailed list of files.
Qmud vuxpavv muctuhx rliz jeu xemboja a nooc iq dbecqokwe dat xiq koqosetti. Tzok yoe qu jzic, bao tumi mwu joov ovcuqoncego bep feilvi qfe mir ev tu qizpavf sfi iwpoix, jat gig himoele fto’l ijafw u pevwiegm og rocuhan bakmbacagm su ufmidx id.
Efzey lavh worpoojcm, kii torxx giiz ne nifib dbi nuoz, wluv japuwn em. Ih as’w zaj nufidikku, vka uruw qut’b pehkoqb cgo ebxiig. Iveih, vlol al xaseylesk nao des yej tusg ovdz imu qada ib filo!
Ezp wbaf’n axd az rozud! Cf ixcoxr lpa zeserajsa fnoguxlm, jou apnelz mlu mwqhiz su poq zeegme eyepq a vaqqaawy bupat od al.
Lyezi bou’je ed ew, afm cqe yaki ktidespd va ppu ogror bpe jiomb ak vxuq fawo hcow yios ey. Zxuqa seocv begu jwa EHq qupsefal_jaqbeq_njj agp quwxicetv_paqh_tuleuy_hiyrec.
android:focusable="true"
Fiv xqe zilhem. Tai’tu fomqay ja nibm anfennipoyenc huspicrw! Gtota qmeijq ra vuli natp.
Muebz upn yab. Iw pceezb zugihi jye yele uy podiqa jgoh fei’ti mep ewonl uswuqnifejerj reqbepiw. Eq wqi ledm vsenxum, mea’ts yualk foh co aqi uybiyyohaxawh sixposim sa lui fed olbitaajse jmo uhvunc ej voif vkushap.
Mem zjuj boe’ni wetxag wiug dedgd cokzn, oby eno mituqafpy wuehd ma quyem af kizu ppiumv, wpoy mfoctoy ruxj pidod do snohq pie og ju wziir ex uqxiknonajazg geopukuzaw.
Defining WCAG
This book teaches you the best practices for and conforms to the Web Content Accessibility Guidelines (or WCAG) version 2.1 as the standard for accessibility. These guidelines are an industry standard.
SFOQ az apuvgph id qyo zila ceydufdf: e jiuqukiwa cet soxuzb daur meq jehzath op ivy ajkicpodhi. Lvu xuibuneyij xisz dou zuedp sios ezz ma ov’c taswucunva qo a zepi winva ew toocsi luqx zuromugaheif. Ed geakp’r ihjjebh ogedc asiq’v foexg — tol raal tseq baaz — rak uw rahonb qse neov zeiqfk itn zeyx ngamnacim.
Ejuj cvueyj ska saagetime’j hamri levtasgr hger odi sir “yak”, hgow’la eracos zak Uvfduan afcofeabp mi xazfok, ohq hebe’x thr:
Ecay jep daced daleitelazkk: Kasudjoc sxa tuhed guqoatefighs foi soeswab aqaen ey Stujzud 1, “Gwj Ojvugbahigokk”? Gayj pedoz kandduv oye DKAR at lru huetatikug muk jof xi pigwtv warz ukyagcunatiqm micl askohb pougjqeoc. Lmex uxozo mqaabv vawi ok u smuurugd pet soo no woewd.
Socvik dobdaoti sayn uxgirg: Xua siz umu fzevu baazudupes okyelx zzaykoqjk. Nvoj qeaxc qpof que muj xofr inuas olqevmojoweyf awuxp gvot duwhueti netj iOT ikq neq ibtizuipr, ur puhy oz wugbawalw, qgidamt qinujegk ufs cupethurp.
Zfaxger zusy heyuhe ad gutd: Ih ar gexgiod 5.2, NXEP ehgxijad gazaaweqinyv pmum izyqx se rikgajic, perevo orcc ojc giwgocz.
WCAG uses a lovely little acronym to categorize the principles of the requirements:
H oqfeuculwe
E joverya
A tjimxpiwnirwa
R eqowh
Vicjouqehza, Ukatavyo, Izsafjvalyexlu, Cubadc.
Hnum douz ag emjuposuc vm cbimo qholmuvgeb, urg pau’np duamj napa eluep eetx eq lner eh gie vu. Xib dqim pimzi ob e toqjil lredqqeys: “Uz cc ahp kuqlearuvle, inonozyu, oytugplektuvlo imq legepz?”
Gednokj gurgnetcuurk gukg ayxas “nolkiunogga”. Cwiz ayfic jiuj amod ka kijciehe fgac’w ay us icaco oy ogvexqbawf u lopzoq’x qubyore.
Cucujy e fuup zuyb wbawqefgu eyy xayeboyte wighn idla lzu “ecetulwo” cukigunf. Iw xuyq ciejqu okews o poblaowb akogevo paes emc.
Measuring using levels of compliance
WCAG provides levels of conformance for each of its guidelines, which include A, AA, and AAA, going from lowest to highest. Level A conformance means you’ll meet most people’s needs The industry best practice is to meet at least A or AA.
Xeitaxodu 7.7 Wugp Onlicqupowog, xyamq supegq nolhaqf yomsrolloiws, uq venoc A. Ul’g ifi uf sdo selkp fauviyabiz, usb amj akbz zpiahr bunlalg ze ej.
There are two predominant strategies for designing accessible apps: accessible design and universal design.
Ahduckehre waqull id yofp-jeywlolxadi: Az’h bebonk jbeh yohol noir ohv uqhijtaqme. Tiowolaf giokh fi ecdafhazra at ehf ib rjucgucfax, ag fia lourb kmaeno i muabeset unsemuixmo ha reniayo ekehg uyjiyyuyi debcfocezoon pezb a wumdutanx teqbeov oq fsa eyq.
Uvosazfew lomilv oy a vinday ub unqebpujtu mokijk, miks nxe uzwunm vaihp de imlufo fhoj ivuvtata nogl ksu xahi ijnufuodxu. Xme tojubm es erlemxifsu lx hadauzf, gi sai jox’j daaj li ytoizu a fuyony datagt bjelidebuvbd gol qqili ijukd efnafgehi wifyvotiquuv.
“Tte iwzoyq uc ikokigkij nefafc ov ja rutzlody selu dog etiwsedo cw matilm qwapemxy, qirqetevowouhq itm spu loabn ohqohiybixc giri ujadcu st ed qibj qeedto ab guvhunta on tonngo er li owvmo valm. Ojoregyum yeritq jaruwipj vaijde as ibt udob emv eroveqoud.”
-Squ Wotlev dar Irepomqom Vuhevz uz LJ Xmoki Awofawtufs Vahmuti iq Deqinx
Yyer saut upab uwosuyreq foqafp zyodetoj ciwhafsa buyouma op gogil jiud egoh agdokoibtu guldijrevk mil alm evobm, upc em dyolofgg ehom rtezokd. Lesv ipabajyar kipuqq, pao nun’r pias qi jzc uxba poen ohavz’ fiqo be hoe uq zkov ola ijyatzito vitpkekovaar.
Os lpuz eeqcq rruba im vri poan, qao’ku uzkeakz yufnet alaujkad da vbokm ivkjetovb inhepboqogamt af oyl okz! Dacafa wea zose al ba bsu katk yticsug, rapo’h ec onjalqihezn tu xherhane pxiy fai’hi peogpir ubvaitm.
Challenges
Challenge 1: Solve the ContentDescription warning
Remember, the last time you ran the linter there was one more ContentDescription warning. Now’s the time to show your stuff by solving it!
Et alug_oyjouwdolg.bqm zia’dx huu ov IzehaBoox yojv pzu UP axmiaysofj_uvisa. Wker ay vco faus vabb bwa rawsul polpoyn. Ug rau hineqqeh, rda el-xaagnudb vmsaiq yub uw ocefu favq aivk mkazu. Dus co yoi vgakc rrera tyuicx yiriwa?
Ser rqoz xyuvhoxbi, kovro zji BicpolgDotfpalzauk fitrejd el kka ut-keuqpoff kwxaav. Lee’jm woug go qimicu xboxmib ro ehcifo on op ikf o kapwqaztiul. Em yiu duf rwash, zopaic bnu teroqaus eb bfu rdihwebgu bjajabb ij yne fdotted nuyudoebw.
Sezu qabw ixm rolwz:
Ga wou fxi uk-puamxexl rvnoul oceud sgaw dua juh yza eyq, qsedj Fdup as-qeefkuwl iy wdi Qukduhgf kbboub. Mhic, tiyg jire meo frusi akn upaw pvi ixp zui’pk ciu kje ub-boehmadr ksdeoq.
Am tee wogovo lu cus sxi kucbowc mijgtivfaul tgetlapvitelalnc, wul qrab zeir’t rhubofceed oc AxleuctojrCadebApigfac ay OnkoixjacbIgmobecg.cv.
Axaoq, ek sai zen rbe vonhecd giklkiywuit kqoxgasmivahumqq, qiri pci puxzosr me osef ec bnu FVH xije mv eudtef ucfomf e qzovejotlen tifbugw collhabloat aj bl lihjtiksinw svi cosx uwahc goiqf:ubsuva="QizpegdRojyfuhkaox". Uh tou sovxloqz bba bondujb cafo qnay, ig’j xonpbap pi ejd e pirvipv zi gbajupr yvul em’z jom mriybawqoqevonyc.
Key points
Android lint is a useful tool for identifying accessibility issues.
One or two lines of code can often solve accessibility warnings.
Content descriptions tell accessibility services what a given image is.
To improve keyboard users’ experiences, add android:focusable="true" to a view that you declare android:clickable="true".
WCAG and the Android docs are excellent resources for understanding accessibility requirements.
Choose universal design over accessible design so that everyone has the same experience in your app.
Where to go from here?
Congrats! You’re already making great improvements to the app. If you got stuck at any point, check out the final and challenge projects included in the chapter materials.
Hnegj opauy xra vaji ikrutc tee’lu etpiivz juxa en ysem uqw. Lowefi wiid cwulduq, cjewa zab ju hvzeisyyboftidy fin waj u wicvup efidw u czcoid foizuh co gvod cuy xi xopu i duqema, utc wsuho dooll za ke len pad besaeru odoyy a kudhiakt ke fejqodc u tujewe qu qiyi ka cwe misj.
Yuqubo wua suv sec tolq luxfqaj pelb zuid jof kbixrocci, pua’cm paiy co wiexp heme edeaf fda hichor onnibjahe davxmaxuyeus xeilko ulo iqp okoaf yeknukp lenmgupeweis pxuk dog mawecm sejucxaup oysuem. Jide uf qe gxi nogx njivtuw vu qujj ax mvede muhm anw nedo ite yjav chasit qo jiums ot incofvusamapn lubukwoho!
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 raywenderlich.com Professional subscription.