DEV Community: Bless Darah Gah

Thinking Accessibility First!

Bless Darah Gah — Tue, 10 Mar 2020 05:49:24 +0000

After taking some time to do quite some research about web accessibility, I was smashed right in the face as I came to terms with myself not meeting a tonne of these requirements to make my projects accessible. You probably know the kind of feeling when they tell you you're racist right? Yeah... that's how I felt. It seemed that I had left out many people from reaching and enjoying the same experience I've been wanting all my users to have. Fun fact: You too must have done the same or at least felt the same like me.

In this post, I'm gonna try to echo why it is important to make your web content very accessible by sharing with you some tips (of things you may know or not know were very applicable to web accessibility). It is often easier to skip the beginning. It is always important to start from there.

What is Web Accessibility?

According to wikipedia

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.

In short, if there be one thing you should learn from this post it should be the fact that:

Your websites should as much as possible include all class of users (be it disabled or not).

Apart from someone being blind or color blind (which is the first thing I always think when the topic is mentioned), there are other forms of disabilities which may affect a user's experience on the web such as:

Neurological
Physical
Auditory and more...

Tips to employ to make your website accessible

Making your site accessible is not that difficult as you may think. The current standards of HTML5 makes it far more easier to achieve almost everything you will basically ever need to without doing lots of extra stuff. Here's what you should always consider:

Your DOM content order matters a lot: I can't even stress this more. The way you organize your content on the DOM with your simple markup determines how the accessibility tree will be organized. Screen readers for instance, will only deliver this content in a sequential manner as opposed to users with a lot of visual acuity who have the advantage of scanning through the page within seconds. Having the right markup makes users with disabilities enjoy the same integrity and flow of content as any other user should.
Do not tamper with tap order: This follows from the previous. Your markup says this while your stylesheet says another. This means that, your style sheet should minimize the effect of moving elements around the page. If you're doing so, your markup in a way should express that as well. Your tab order should be very intuitive as much as your page structure suggest.
Try as much as possible to make use of Semantic HTML tags such as:

header
footer
nav
main
section
article and
aside

These tags already have built-in support for assistive technologies such as screen readers to know what they may mean.

Always add alt text to images: Yeah you got me. Make sure to add descriptive alt attributes to almost all of your images. What I mean here is, not all images will need this attribute for instance, when using an image within a button.
Implement keyboard traps correctly: Another point to note is the issue of keyboard traps. Ensure that modals and popup windows do implement keyboard traps. This help assistive technologies to keep track of which element is/was active before/after the popup or modal window.
Label your form fields: Labeling your form fields with the label tag will add more meaning to your forms and will make it much more accessible. Try to make use of any of the following:

   <!-- User labels with a for to target input id -->
   <div class="form__field">
       <label for="username">Username</label>
       <input type="text" name="username" id="username" />
   </div>

   <!-- Or simply put input fields within a label tag -->
   <div class="form__field">
       <label>
        Username <br />
           <input type="text" name="username" id="username" />
       </label>
   </div>

Do not disable focus: This is crucial! Never you disable keyboard focus. Only disable the default browser styling and implement something better that works with your style guide or theme.
Use good colors and maintain the right contrast level: Most people are color blind which is why you may want to always consider using colors that are friendly to all classes of users. Maintain good contrast with your colors, typography and button states. This will make it very user friendly.
Make your site responsive: This one seems to be trivial but still worth mentioning. Take time to make sure your content can scale well on mobile, tablets and desktops. It shows that you have a taste for good things plus, it just makes the user experience better.

So there we go... I can't even cover everything in this sphere of web accessibility but I think the concepts and tips presented here can make your site a whole lot better than it used to be. If you have been implementing this already then good work. If you haven't, start today and let's make the web better and healthy.
Be sure to drop in the comments what I missed so that we make this content even more engaging . Cheers!

How will PWAs impact Africa?

Bless Darah Gah — Tue, 18 Feb 2020 09:12:50 +0000

I have been interested in the topic of progressive web apps for quite a while now, in fact, ever since I got into the Google Africa's Developers scholarship program in partnership with Andela and Pluralsight.

I was thrilled by this concept from the very word go! At first, I couldn't get my head around it but diving deeper makes me want to say that, there is a lot one can do with this knowledge.

One of the most cherished things most communities in Africa would want to have is access to the internet. Access to the internet provides a whole world of opportunities for persons, businesses and organizations. Clearly, the possibilities themselves are endless. My goal is, therefore, to look at how progressive web apps can contribute to bridging the gap in areas or communities that may not have the luxury of enjoying the benefits of high-speed internet connectivity. To see this, we need to understand the new things PWAs bring to the table and how they can change lives:

PWAs are basically websites but with the added advantage of being able to offer an offline experience or still function in areas of very limited internet connection.
PWAs provide the same look and feel that native apps do offer. Perhaps they may be limited to only a couple of device features as opposed to native apps but that still can be overlooked as the main goal of PWAs is providing the most important information when there isn't good internet access.
PWAs may have an install to home screen concept to make it look like the whole app is being installed, but it really doesn't take up any space as most native apps will. This is a good thing because, users will not have to worry about device space or budgeting for an external SD Card
Closely following from the above, we can implement push notifications with PWAs. This makes them very reliable.
Personally, I think to build a website with a PWA-First Approach (my own name entirely) forces developers to think on what is most important to the users under the worst-case scenario. This is also a good thing because not only will a UX Designer think things through to the end, the developers themselves will think not only in the Mobile-First Approach but as well as in the Offline Case approach, leading to a better experience entirely.

I honestly believe that many developers today can take the advantages that PWAs are presenting to them to build a better and richer product, to reach out to a wider scope of users and most importantly, grow their skill set. Africa needs far more PWAs to help those who do not have the chance to fancifully enjoy the luxury of high-speed internet connection like others around the world. As technology evolves and continues to grow, so will PWAs grow and be even more inclusive with respect to its end users. Cheers!

My Journey towards MWS certification

Bless Darah Gah — Thu, 06 Feb 2020 10:37:17 +0000

Disclaimer: As of this article, I am not yet certified. I am only recounting my journey towards this goal. It is my hope to come back and write about my success in this perspective.

In almost mid-2019, Google together with Andela and the online learning platform Pluralsight launched Africa's Developers scholarship program's 4th Edition. This is part of Google's goal to swell up the number of developers in Africa, whether Android, Mobile Web or Cloud-based. Their main goal together with Andela is to create the right set of teams, equipped with the best skills and more effectively, growing a healthy community.

Within the periods of June moving forward, I had no idea that my journey within this program will be leading me to be amongst the top 1000 devs, especially when I had considered the mammoth population size of 30,000 devs selected at the beginning of the program all across Africa.

Just a little bit about my program of choice

If you are the self-taught type of dev like me, you must know what it feels like to be less confident about yourself and in your abilities. This is what we sometimes cleverly call the impostor syndrome.

Interestingly, failure can prepare you even better for greater achievements when you receive it with the right mindset. Not being able to go through this same program in 2018 when Google partnered with Udacity made me learn a million things along the way.

As a matter of fact, that was only the beginning. I firmly promised myself to go through the program if given another chance and fortunately 2019 brought it right to my doorsteps. Who on earth will let go on a second chance? I enrolled in the Mobile Web Specialist Track just as I did the last time. Here are some reasons why:

I am very passionate about building websites and applications that run on the web.
Familiarity with content can give you an upper hand. So I decided to explore more and grow my skills as a Javascript developer.
Last year's program introduced me to a very new concept called Progressive Web Apps. I had never heard this before. This made me even more curious to get to the bottom of this, plus, I thought it was way cooler for me to build a site that worked like a mobile app. In that way, I would not have to kill myself of ever wanting to learn about app development at least.
Android development is very resource-intensive especially when it comes to installing Android Studio and again, I didn't just want to hold on to Java(no hard feelings here). My hardware wouldn't be sufficient enough to sustain me as compared to Javascript where all I needed was just a simple text editor and a web browser.

There are obviously more reasons but I would say it was worth it. I hope to bring you into my world of trial and error, successes and failure, challenges and breakthroughs within the subsequent posts.
In the meantime, my goal is to prepare hard and succeed in this exam scheduled for March 2020. It will definitely be a dream come true.

How to contribute to Open Source

Bless Darah Gah — Tue, 26 Nov 2019 04:54:55 +0000

I've been having this question all through my mind for a while.

How can I really contribute to Opens Source?

I quite good in javascript and it has even given me a job but I still feel like I 'm lacking in the area of Open Source participation or contribution. Can someone help me out on how to go about this? I really need to see how I can contribute to the vast majority of things that are out there in the world and just get something done!.
Thanks.