create account

A small talks about web design: Accessibility by gibic

View this thread on: hive.blogpeakd.comecency.com
· @gibic · (edited)
$5.52
A small talks about web design: Accessibility
![99243ILaGaligo.jpg](https://files.steempeak.com/file/steempeak/gibic/KWC2PTTK-99243I-La-Galigo.jpg)

> “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:

![REMOTIVI HOMEPAGE.png](https://files.steempeak.com/file/steempeak/gibic/TPhDT5vO-REMOTIVI20HOMEPAGE.png)
<small><center>Our mock-up for the leading Indonesia media research center: remotivi.or.id</center></small>

![Screenshot_20191120 Spektakel3.png](https://files.steempeak.com/file/steempeak/gibic/bvox804e-Screenshot_2019-11-2020Spektakel3.png)
<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/)
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 346 others
👎  
properties (23)
authorgibic
permlinka-small-talks-about-web-design-accessibility
categorywebdesign
json_metadata{"app":"steempeak/2.1.1","format":"markdown","tags":["webdesign","oc","palnet","design","accessibility"],"users":["matuzo","pgreen1983"],"links":["https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility","https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility","https://www.smashingmagazine.com/2017/10/nailing-accessibility-design/","https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939","https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412","https://www.smashingmagazine.com/2019/06/web-accessibility-context/","https://unsplash.com/@pgreen1983","https://unsplash.com/"],"image":["https://files.steempeak.com/file/steempeak/gibic/KWC2PTTK-99243I-La-Galigo.jpg","https://files.steempeak.com/file/steempeak/gibic/TPhDT5vO-REMOTIVI20HOMEPAGE.png","https://files.steempeak.com/file/steempeak/gibic/bvox804e-Screenshot_2019-11-2020Spektakel3.png"]}
created2019-11-20 15:19:36
last_update2019-11-20 15:25:33
depth0
children9
last_payout2019-11-27 15:19:36
cashout_time1969-12-31 23:59:59
total_payout_value2.776 HBD
curator_payout_value2.742 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length6,487
author_reputation34,268,502,310,257
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id92,676,494
net_rshares19,790,413,368,599
author_curate_reward""
vote details (411)
@c-squared ·
c-squared-comment
<div class="pull-left">https://cdn.steemitimages.com/DQmVHt1f2jqCViLk6dX2SZsajYRWBpmdQA7sQDEbuQBxFB3/c2100.png</div><br>This post was shared in the <a href="https://discord.gg/B8JFmJ4">Curation Collective Discord community</a> for curators, and upvoted and resteemed by the @c-squared community account after manual review.<br/>@c-squared runs a <a href="https://steemit.com/witness/@c-cubed/announcing-the-launch-of-the-new-c-squared-witness">community witness</a>. Please consider using one of your witness votes on us <a href ="https://steemconnect.com/sign/account-witness-vote?witness=c-squared&approve=true">here</a>
properties (22)
authorc-squared
permlink20191121t091315735z
categorywebdesign
json_metadata{"tags":["c-squared"]}
created2019-11-21 09:13:30
last_update2019-11-21 09:13:30
depth1
children0
last_payout2019-11-28 09:13:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length622
author_reputation8,872,520,093,091
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,699,082
net_rshares0
@creativecrypto ·
Hello @gibic, thank you for sharing this creative work! We just stopped by to say that you've been upvoted by the @creativecrypto magazine. [The Creative Crypto](https://thecreativecrypto.com/) is all about art on the blockchain and learning from creatives like you. Looking forward to crossing paths again soon. Steem on!
properties (22)
authorcreativecrypto
permlinkre-a-small-talks-about-web-design-accessibility-20191124t090221
categorywebdesign
json_metadata""
created2019-11-24 09:02:21
last_update2019-11-24 09:02:21
depth1
children0
last_payout2019-12-01 09:02:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length323
author_reputation1,055,131,252,444,029
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,784,633
net_rshares0
@discovery-it ·
<div class="pull-left">https://cdn.steemitimages.com/DQmTAn3c753LR7bHCLPo96g9UvRMaPFwaMYn8VQZa85xczC/discovery_logo_colore%20-%20Copia.png</div><br>

Questo post è stato condiviso e votato dal team di curatori di <a href="https://discord.gg/cMMp943"> discovery-it</a>.
This post was shared and voted by the curators  team of  <a href="https://discord.gg/cMMp943"> discovery-it</a><hr>
properties (22)
authordiscovery-it
permlinkq1aary
categorywebdesign
json_metadata{"image":["https://cdn.steemitimages.com/DQmTAn3c753LR7bHCLPo96g9UvRMaPFwaMYn8VQZa85xczC/discovery_logo_colore%20-%20Copia.png"],"links":["https://discord.gg/cMMp943"],"app":"steemit/0.1"}
created2019-11-20 20:12:00
last_update2019-11-20 20:12:00
depth1
children0
last_payout2019-11-27 20:12:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length384
author_reputation67,502,502,128,795
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,684,315
net_rshares0
@myrockandocean ·
Bagus banget! Yang paling aku suka logo fokusnya 👏🏽👏🏽 Bravo!
👍  
properties (23)
authormyrockandocean
permlinkre-gibic-20191120t22388825z
categorywebdesign
json_metadata{"tags":["webdesign","oc","palnet","design","accessibility"],"app":"esteem/2.2.2-mobile","format":"markdown+html","community":"esteem.app"}
created2019-11-20 21:38:09
last_update2019-11-20 21:38:09
depth1
children4
last_payout2019-11-27 21:38:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length60
author_reputation3,818,492,778,231
root_title"A small talks about web design: Accessibility"
beneficiaries
0.
accountesteemapp
weight300
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,686,150
net_rshares16,813,819,026
author_curate_reward""
vote details (1)
@gibic ·
Wah senangnya Ada Parisien mampir. Mersi boku! Hehehehe.
(Sayangnya itu mock-up ga jadi dipakai dan remotivi Akhirnya makai yang sekarang Ada di website mereka :D )
properties (22)
authorgibic
permlinkre-myrockandocean-q1af6g
categorywebdesign
json_metadata{"tags":["webdesign"],"app":"steempeak/2.1.1"}
created2019-11-20 21:47:09
last_update2019-11-20 21:47:09
depth2
children0
last_payout2019-11-27 21:47:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length164
author_reputation34,268,502,310,257
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,686,393
net_rshares0
@myrockandocean ·
Btw, I would say that a good design should come with user friendly interface and a flawless browsing experience. It should be ok to focus only on those in our target market, even though it’s a small niche - I would say leave others behind and just think about the accessibility for that particular market. There are so many people trying to get attention from everyone and they will receive from none. Focusing on a small niche will do a bigger effect and maximize our chances to monetize their time spent on our website. I think 🤔 
👍  
properties (23)
authormyrockandocean
permlinkre-myrockandocean-20191120t224621676z
categorywebdesign
json_metadata{"tags":["esteem"],"app":"esteem/2.2.2-mobile","format":"markdown+html","community":"esteem.app"}
created2019-11-20 21:46:21
last_update2019-11-20 21:46:21
depth2
children2
last_payout2019-11-27 21:46:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length532
author_reputation3,818,492,778,231
root_title"A small talks about web design: Accessibility"
beneficiaries
0.
accountesteemapp
weight300
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,686,370
net_rshares16,478,981,951
author_curate_reward""
vote details (1)
@gibic ·
I absolutely agree on niche market. And I'd also like to put more effort to penetrate that market the most efficient way, to capture the whole pie. But looks like most of designers i'm working with were putting a lot of effort to achieve the creative and aesthetic side, ignoring accessibility. I strongly believe in the next couple of year, the design trend will be about accessibility and saving energy (with dark mode, or any other tricks that consume less electricity).
properties (22)
authorgibic
permlinkre-myrockandocean-q1b60x
categorywebdesign
json_metadata{"tags":["webdesign"],"app":"steempeak/2.1.1"}
created2019-11-21 07:27:00
last_update2019-11-21 07:27:00
depth3
children1
last_payout2019-11-28 07:27:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length473
author_reputation34,268,502,310,257
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,696,813
net_rshares0
@puncakbukit ·
Right, @puncakbukit reblogged to thousand followers.. So many thanks to choose @puncakbukit as your witness.
properties (22)
authorpuncakbukit
permlinkre-puncakbukit-a-small-talks-about-web-design-accessibility-20191120162718
categorywebdesign
json_metadata""
created2019-11-20 15:27:18
last_update2019-11-20 15:27:18
depth1
children0
last_payout2019-11-27 15:27:18
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length108
author_reputation59,018,532,294,625
root_title"A small talks about web design: Accessibility"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id92,676,758
net_rshares0