DEV Community: Arpit Batra

the importance of web accessibility

Arpit Batra — Thu, 04 Feb 2021 10:17:12 +0000

I believe the “web” is one of the most important inventions of humankind. We take being connected to the world 24x7 for granted now, but it’s the web that has empowered us to achieve this feat. But, while we are empowering the world through the web, some people are still being left out because our web interfaces are not accessible.

Let me explain by telling you a personal anecdote.

Some months ago when COVID was not a word, I used to travel to a market near my home on a Metro train. The stairs that lead to the entrance of the Metro station have a very peculiar architecture. They are still stairs but a slope of some kind runs in a zig-zag fashion throughout them. See the picture below to have an idea of what I am saying.

For a very long time, I did not think very much of it, until one day I saw a guy drag a man in a wheelchair across that slope. Then it hit me, the slope was there to facilitate users who were unable to use the stairs because of a disability.

The short story you just read was an example of accessibility in the real world. The stairs facilitate the movement of able people, the slope does the same for those who are unable to. Both of these blend together so well that it’s almost difficult to think of them separately.

Accessibility on the web are the same principles but applied to web development. In other words, people’s disabilities should not affect their usage of the web. That of course, is a very ambitious statement, but that is precisely the aim of technology. Things that were unthinkable of yesterday shall be possible tomorrow.

Let me now give you some reasons why I have started caring about accessibility:

1. Accessibility empowers all users

The role of technology is to take humanity to the next level. The invention of the World Wide Web is the driving force for that. The internet has made a student in a remote city in India learn from the best Entrepreneurs in Silicon Valley. But when we don’t think of accessibility, a lot of people with disabilities are unable to reap the benefits of the web.

Technology is meant to empower people, and inaccessible interfaces leave disabled users feeling powerless.

2. The absence of accessibility deeply affects people’s emotions

(alt- You don’t wanna make Larene’s dad cry)

The internet has brought about an information revolution but what good is a revolution which leaves a lot of people out deliberately?

As Software Engineers, we like to think that we are “Changing the world” but not all of these changes are positive. See this tweet by the user LareneLg for an example of the adverse effects of an inaccessible web:

// Detect dark theme var iframe = document.getElementById('tweet-1270578058714443776-818'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1270578058714443776&theme=dark" }

A few months ago the below video was making rounds on Twitter. It shows how a blind user Kristy_Viersis able to use her iPhone and tweet through the use of accessibility features. Everybody commended the accessibility features that were able to provide her this experience which did not exclude her because of her disability.

// Detect dark theme var iframe = document.getElementById('tweet-1287189581926981634-445'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1287189581926981634&theme=dark" }

The two tweets you just read demonstrate the wide contrast that exists due to the absence of accessibility on the web.

Always remember all your users are not young healthy people in their 20s, so design for a wide range of users and make sure your web interfaces are accessible

3. Accessibility is not just about blind users

Due to the tweets you read in the previous point, you must be thinking that accessibility mostly focuses on making interfaces usable for blind users. However, that is not the case. In reality, people’s experience on the web is affected by a wide range of disabilities, ranging from visual (complete blindness, colour blindness, etc.) to auditory (hearing impaired), etc.

Thus, accessibility is making sure that the web should be usable by the widest range of people possible.

Color Contrast is one of the things we need to make sure while designing interfaces, as we can see clearly (pun intended), people with good vision can also be adversely affected if we don’t incorporate accessibility in design.

4. Accessibility encourages best practices

Some techniques which are useful for making the web usable also bring in some added benefits. For example, if you write HTML that follows proper semantics, you also reap some benefits in the form of SEO as the search crawlers can extract proper headings from your pages.

If Accessibility is taken care of in the design step itself, then it can enhance the experience of other users as well. For example, if colors that have good contrast are chosen for the designs, even sighted users will benefit from avoiding strain while reading.

5. Accessibility saves your company from Lawsuits

Don’t believe me? See for yourself.

Closing thoughts

I hope I was able to open your mind to how important accessibility on the web is. Your next steps from here should be how to incorporate accessibility during development and design. Do remember that small steps towards accessibility can make a big difference. Awareness is the first step, Action the second. The web is full of information on how you can write code that makes sure interfaces on the web are accessible. In the upcoming weeks, I am planning to write some blog posts with quick tips that can help you with accessibility.

What is the 'box-sizing' property in css and why should it have a value of 'border-box'?

Arpit Batra — Mon, 13 Jul 2020 16:11:48 +0000

TLDR: By default, css adds padding and margin values to the width and height of your elements. A 200px wide box with 10px padding will have an effective width of 220px. Use box-sizing: border-box; to prevent this.

Imagine yourself embarking on a journey towards learning front-end web development. You are pretty excited as you should be! One day, you will turn beautiful designs into code.

You've read countless blog posts on writing effective CSS. You don't remember what most of them were about, but you do know that the golden rule of writing CSS is that “Everything is a box”. Therefore the first thing you will draw using CSS is, well, a box.

Should be fairly easy!

You start by writing some HTML.

<div class="box"></div>

Then you add some CSS

.box {
  background: lightgoldenroadyellow;
  height: 200px;
  width: 200px;
}

And sure enough, you see a box on the screen.

You've done well so far. Pat yourself on the back. That box does look lonely though! How about we add some text inside the box?

We add a span with some text to our HTML.

<div class="box">
  <span class="text">Hey There!</span>
</div>

Let's also add some styles to the text we just added.

.text {
  font-size: 50px;
}

Cool! That sure does look fine but the text is stuck on the corner. Let's add some padding to the box.

.box {
  background: lightgoldenrodyellow;
  height: 200px;
  width: 200px;
  padding: 10px;
}

WHAT? The dimensions of the box have changed? What's happening? After furiously digging in the browser's dev tools, you find out the padding value of 10px is being added to the width and height of the box. The browser is doing this and is just ignoring the width and height you've specified.

So you have to calculate the actual width of all boxes in your brain now. You get anxiety by thinking of all the math you will have to do from now on. If you are somewhat like me, you are wanting to just quit and get back to browsing twitter or watching #productivity videos on youtube. You are also thinking of transitioning to learning back end development where at least the code you write will be respected and the language won't do any magic on its own. (This is far from the truth, but you don't know that yet)

All of your feelings are valid. At this point, you might start to not like CSS so much.

Whenever there is a divergence between your thinking model and the workings of a language, bugs, and frustration are bound to happen

Is there a way to make CSS respect the widths and height you specify?

Yes, there is. Let us add the box-sizing property with a value of border-box to the styles of the box element.

.box {
  background: lightgoldenrodyellow;
  height: 200px;
  width: 200px;
  padding: 10px;
  box-sizing: border-box;
}

Lo and behold! The box has the padding, and also has the values for the widths and heights that you specified!

How did this work? Well, by default, all elements have the value content-box for box-sizing. This means any padding and margins you add are added to the width and height of elements. border-box prevents that behavior.

You want border-box to be the default value for all elements to eradicate the frustration you were dealing with a few minutes ago! This can be done easily by using universal selectors in CSS.

Here is how this css-tricks article recommends we do it at a global level:

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

Once this is done, you should not struggle with weird widths anymore. The browser will now obey you.

These are the articles that helped me out in understanding and imparting this box-sizing wisdom to you. Visit them for more information on box-sizing and some examples of how this property can be helpful in a world real use case.

replacing lodash.get with new js features

Arpit Batra — Tue, 24 Dec 2019 18:18:11 +0000

lodash is a popular javascript library with a set of utilities. One of the utilities that lodash provides is the get function which, as the name suggests is used to get a value from an object. Let us see an example:

Suppose there is an object

let response = {
  data: {
    options: {
      name: 'Bojack'
    }
  }
};

Now if you wanted to get the name from the above object, you would typically do it like this:

const name = response.data.options.name;
console.log(name);

And this will work and output the name Bojack. No Worries, Right?

Well, for the most part, it is. Let me explain. Say, for example, this object is a response from an API and because the coding gods are angry on you, the object has a structure different from what you think it will be. The key options in the data object is now called user_options and the code you've written does not account for that. Now If you run the code to get the value of name this is what will happen:

Since data.options is undefined and you are basically trying to access the name property of undefined, you end up with a TypeError.

To make sure you do not end up in such a situation, you have to put up safe checks in your code. For example, to avoid the situation described above, we can do something like this:

const name = (response.data && response.data.options && response.data.options.name) || 'Todd';

This will make sure that if at any level of the object, the property you are trying to access is undefined, you do not try to access properties further down the chain and thus, do not end up with a TypeError. Also In the above statement, if the property we are trying to access is undefined, Todd gets assigned to the name which kind of acts as a fallback value.

However, as you can clearly see in the code, for large objects, the above code segment can be very cumbersome to implement.

Enter lodash.

lodash's get function lets you easily implement safe checks while getting data from objects. If we use lodash for the above example, we can do it like this:

const name = _.get(response, 'data.options.name');

This will make sure that you do not end up with errors and also don't have to write complex accessor chains like in the example before this one.

Another beauty of the lodash get function is that you can specify an optional 3rd argument which is the default value to return when the property you are trying to access is falsy. For example,

const name = _.get(response, 'data.options.name', 'Todd');

will return Todd if the options key on data does not exist.

So we solved both of the problems we ran into while writing property accessors.

Win-Win right?

Well, not exactly. lodash is essentially a 3rd party dependency and you must have heard the saying mo dependencies, mo problems. Some of these problems include increased bundle size and the responsibility of keeping dependencies up to date.

However, there seems to be a solution coming up in javascript itself. There have been two proposals to add the following two features to the language itself - optional chaining and nullish coalescing.

Let us see how these language features can help us in replacing lodash with native javascript.

Optional Chaining:

As also shown above, this is how you would safely access the name property from the response object.

const name = _.get(response, 'data.options.name');

This is how you can do it without lodash by using optional chaining:

const name = response?.data?.options?.name;

The above statement behaves similar to how our code with a lot of && safe checks would behave, but looks a lot cleaner!

Nullish Coalescing:

So we now have safe checks in property accessors, but what about default values, If I am unable to find the name property, I want to assign the name Todd to the name variable.

Here is how you can do it by using Nullish coalescing:

const name = response?.data?.options?.name ?? 'Todd';

In the above statement, we combined the use of optional chaining and nullish coalescing to achieve the same result that we were getting by using lodash or making the use of && and || operators. If I am unable to access the property name from the response object, due to optional chaining, the name will have the default property Todd thanks to nullish coalescing.

So Can I go ahead and replace lodash.get in my app?

Well, not really. As of today, 15th of December, 2019 Both the new JS features we talked about in this article are only at stage 3 of the tc39 proposal. This means that it will take a while before it ships in all browsers and we can use it. However, you can also use the following babel polyfills to use these features ahead of time - 1 and 2.

What was the first interesting program that you remember writing?

Arpit Batra — Tue, 21 May 2019 15:27:56 +0000

I'm Reading this book called "Coders at Work" where the author asks this question to the developers/coders he's interviewing. What was the first interesting program that you remember writing? I'm very interested in knowing what's the first interesting program the DEV community wrote. Let me know in the comments? 🤔