A small talks about web design: Accessibility
webdesign·@gibic·
0.000 HBDA small talks about web design: Accessibility
 > “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee, W3C Director and inventor of the World Wide Web What makes a good website design? Is it the good looks? The fonts, the colors? Is it the user experience? I'm not an expert but I just want to share a story. A couple weeks ago I saw a junior programmer wrote a few lines on the terminal, and in a second, he already have a boiler plate of Nuxt.js based website. it's a good structured website, with good reactive design standard. Now all he has to do is browsing some JavaScript libraries, and make a rapid prototype using bootstrap. Relatively easy. But then come the real problem. He should convince his web designer about the prototype and the structure. The designer barely know anything about coding. He know some CSS but that's it. The designer wants to implement many fancy things, cool fonts, big artsy illustration for background. The coder on the other hand wants the design to be simple, to reduce website loading time. Both of them has a point. And me, as a person who just love to see them fight, just stood at the door, drinking my home made mojito. Lol. I was a website designer myself. I've spent some years designing website built with WordPress and Drupal with Adobe Photoshop. There were no Adobe XD, Sketch, or Figma. jQuery was still dominating the frontend. No React, Angular, or Vue. And no Laravel too. Here are some example of what our teams were designing, I love the aesthetics by the way:  <small><center>Our mock-up for the leading Indonesia media research center: remotivi.or.id</center></small>  <small><center>Our mock-up for our own product, a portal for Indonesian art & culture activities: spektakel.id</center></small> *** Seeing how rapid these web design related technology has developed, It's really fascinating. So about that two boys, I can relate to the web designer, at the same time, I understood what that coder wants too. I'd say both of them are missing one crucial point. At the end of the day, their work would be presented to me and my two other colleagues. And we will ask them about one thing: accessibility. > Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections. ([source](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility)) But isn't accessibility in web design should thought later. After we settled in mockup, or even, beta launch? Frankly, I noded my head to that thinking before. But one of my colleagues--*for now, let's call him as Jack*-- is all about paradigm. Unfortunately he is also acts as the loudest guy in the room. So when he talks we tend to listen. He strongly believe that accessibility lies on the design paradigm. To design for accessibility means to design for everyone. Mainly, of course designing for the targeted users, but users outside of the target demographic should be included too. Same goes with users with disabilities, and users from different cultures and countries too. That means, we expect that the designer would put that paradigm since the start of design development. Not all of accessibility features should be there. God, no! Actually, what we want to hear is more about the argument. The arguments about how web design should be responsive, fast load, intuitive, that would be basic. No need to argue on that. The technology stacks we have nowadays help a lot. It's easy to design rough mock-up, even to make prototype with these tools. We need to talk more about how the web would be accessible for everyone. So it happened. Those boys showed their work to us. "Where is the RTL mock-up?" asked Jack. "*Ummm*.., we think we'll add that feature later..." answered the web designer. *Wrong answer.* "I also think that we need to add text-to-speech feature... later...." said the front-end coder, probably as an act of solidarity. *Oh, no..* "I mean... we won't targeted users from middle-east, rite?" asked the web designer. *Triple strike.* Jack couldn't stand it. Then he start to ranting about his favorite stuff: the design paradigm. An old boring speech. Classic Jack. I yawned. Jack stopped the rants and asked my opinion for these boys' work. So I started to talk: "Good design is good design. It has to be creative, obviously. It has to be intuitive. But it will be much better if that good design works for as many as possible users. Well, of course, planning design for accessibility could add some limit to design itself, but the key objective is one functional product that work..." I was in the middle of my speech when Jack interrupted me. "Please, don't call our user as 'users'. They are people, person with real characters. Calling them user is unethical..." said Jack. Damn you, Jack. I've lost my train of thought. So I went silence. Uncomfortable silence. Awkward. Anyway, that's the end of the story. I called that meeting off. The boys were not ready. *Heck*, I was not ready. Jack is being too conceptual most of the time. He is typical urban Jakarta guy. *** Here are some articles If you want to read more about web accessibility: * [What is accessibility?](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) * [Stop Designing For Only 85% Of Users: Nailing Accessibility In Design](https://www.smashingmagazine.com/2017/10/nailing-accessibility-design/) * [Writing CSS with Accessibility in Mind](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) * [Writing HTML with accessibility in mind](https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412) * [Web Accessibility In Context](https://www.smashingmagazine.com/2019/06/web-accessibility-context/) *** Photo by [Paul Green](https://unsplash.com/@pgreen1983) on [Unsplash](https://unsplash.com/)
👍 pgshow, rivalzzz, puncakbukit, aicu, gwilberiol, merlin7, passeggero, rusbe, djennyfloro, steem-indo, arteem, yehey, cmad, camillesteemer, phage93, discovery-it, piumadoro, spaghettiscience, coccodema, claudietto, btc4breackfast, sciack, gianluccio, ciuoto, vittoriozuccala, bafi, armandosodano, tommasobusiello, middleearth, adinapoli, lallo, maryincryptoland, omodei, damaskinus, steempossible, riccc96, alequandro, sbarandelli, acquarius30, ilnegro, titti, stregamorgana, meeplecomposer, capitanonema, alby2, discovery-blog, tipu, mightypanda, steemersayu907, fego, holoz0r, jaff8, knfitaly, mirkon86, maruskina, pagliozzo, shaikmashud, karamazov00, kork75, myrockandocean, carlgnash, polyphemus, markangeltrueman, curie, fourfourfun, diana.catherine, kenadis, vact, decentral, iansart, derosnec, cryptokrieg, deusjudo, bscrypto, steemjet, c-squared, damla, locikll, allcapsonezero, jlsplatts, smartsteem, venalbe, hetty-rowan, josalarcon2, ideas-abstractas, ruen, ppss, begood2me, boombastic, shaka, erikaflynn, turtle-trader, elevator09, choogirl, neumannsalva, torico, therealwolf, nedy, alexandersteemit, layra, zipporah, therising, nickyhavey, sarez, cheese4ead, mrnightmare89, jcbit, c-squared-pal, steemlondon, yourtop3, tombstone, anwenbaumeister, sulev, shadowspub, dexter-k, ansharphoto, shafay, azzurra92, sarasate, arnel, robi, idas4you, gunthertopp, tngflx, r3ap3r, szabolcs, sandeep126, upme, hannesl, sagarthukral, bebeomega, loler555, zainejj, wig319, spiritualmax, lordjames, minerthreat, aro.steem, musicvoter2, stay4true, justinmullet, sky.nikolas20, xmrking, drfk, cultus-forex, steemjetmedia, wolfinator, elizabethharvey, steemdapps, aaronkroeblinger, epicdice, lass3, jesse5th, uwelang, vannour, hendrikdegrote, jesusj1, obvious, tajstar, juli1, misan, samlee2018, juliocaraballo, ashikstd, blewitt, wstanley226, gpcx86, suasteguimichel, chickenmeat, sanjib000, andiblok, reedhhw, ascorphat, herculean, thewhalehunter, chrisluke, kryptogames, doggy5, thebilpcointrain, stickchumpion, drmake, skycae, deadlyvesy, alaqrab, dashfit, dauerossi, marc-allaria, kylealex, iran12, chris4210, gmedley, mahdiyari, ggd3yydze, iqbaladan, alexworld, laissez-faire, khan.dayyanz, breakout101, crazy-facts, bilpcoin.pay, gazbaz4000, hijosdelhombre, slobberchops, schroders, aboutyourbiz, stayoutoftherz, dipom98, revo, jeenger, call-me-howie, the.success.club, travisung, lekang, thevillan, gabrielatravels, waltermeth, joshmania, smitop, healthexpert, hairgistix, matt-a, ninjace, jagged, iamjadeline, rambutan.art, misia1979, goblinknackers, annaabi, tommyl33, adalger, zerotoone, outtheshellvlog, eztechwin, bitrocker2020, minnowpowerup, giovaabbatichio, musicvoter, bflanagin, velourex, cryptononymous, ribbitingscience, blueorgy, driptorchpress, maverickfoo, cheema1, lastravage, minimining, javier.dejuan, reverseacid, infamousit, wolfnworbeikood, pechichemena, itchyfeetdonica, davidjhope, starfinger13, ilovecryptopl, lillywilton, rael5, double-negative, arcange, tensor, kimzwarch, qberry, aminealaoui, motorway, sina-adventure, trang, val.halla, johnquake, pulleyhead, archisteem-cn, edencourage, stahlberg, calebotamus, anomalogy, trisolaran, neneandy, positiveninja, evanpetzer, dronegraphica, yaelg, hector.rodriguez, brendanweinhold, slobberchops.tri, raphaelle, doneliseo, kharma.scribbles, saboin, booster.rooster, monsuta, onelovesteem, smalltall, mindstabber, movingman, voxmortis, elements5, thetyper, robibasa, forykw, travoved, madefrance, flash4yard, revueh, hiddendragon, dr-boo, twoitguys, bluefinstudios, sagesigma, tinabrezpike, steemean, neolinkhati, rival, pladozero, indigoocean, arm27312, lusce, macoolette, zeasar, xuhi, olusolaemmanuel, anthive, akumagai, peaceandwar, cleiver, saleg25, prapanth, dearw, frost1903, uche-nna, melissaofficial, lestrange, wackou, buttcoins, sincensura, slh84, shivagangula, ledjo1991, bitcoinportugal, cryptofuwealth, longer, goodcontentbot, sumotori, celine-robichaud, thetechspot, poppie-schultz, mrbarckhoff, mohaaking, jiujitsu, danaedwards, shinedojo, knightbjj, jackfitzgerald, peterschiff, steemph.manila, romeskie, mammasitta, massivevibration, safrizal.mus, steem.consultant, jeffreyepstein, cherryandberry, eric-boucher, yomismosoy, daddylonglens, nicole-st, vaughndemont, esthersanchez, kafupraise, lk666, ivan-g, abraham10, yashshah991, faithfullwills, wishmaiden, flatman, honeysara, oghie, supsnehal, hanyseek, steemfreak, steemerscare, mattiarinaldoni, markko, skorup87, we-are-palcoin, vannfrik, creativecrypto, exhibition, sndbox, erb, voronoi, sireh, ran.koree, alifridhzuan99, dailyspam, twotoedsloth, em3di, nateaguila, cryptastic, warpedpoetic, shaff.aff, somethingburger, coloringiship, ankapolo, hhtb, proxy-pal, proxy-tracker, steemed-proxy, happyphoenix, d00k13, r00k13,