Making Inclusive Web Apps.
Tags: webdev
Published: 2020-10-05 13:37:34

On June this year, Twitter added a _voice tweets_ feature for IOS users. It was more of a test run but it put Twitter on the spotlight for excluding some people with disabilities (specifically, hearing impairment). Furthermore, when the voice tweets played, the user's profile pics flashed; which could cause photosensitive reactions like seizures. Some of the experts said that accessibility shouldn't be an afterthought in product design, because ignoring the needs of people with disabilities invariably leads to creation of bad products that don't serve all users.

So, what exactly is Accessibility? It's basically whether a product can be used by people of all abilities. Be it somebody with low vision or someone who doesn't understand the speaker's language in a video. 

Accessibility and inclusiveness ought to be a priority because approximately 15% of the world population is living with some sort of disability. Failure to make your App more accessible is equivalent to preventing 1 billion people from accessing your app. Why would you want to prevent your awesome app from flourishing and reaching millions of users?

There are ways to tackle these accessibility barriers when developing your web app. The [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) and [World Wide Web Consortium (W3C)](https://www.w3.org/) published the Web Content Accessibility Guidelines in efforts to encourage development of more accessible apps.

The guidelines consist of some [Principles of accessibility](https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable) as the foundation. I've briefly explained them below:

###1. Perceivable
This means that the content of a web app can be perceived equally using more than one sense. For instance, having alternative text for images, inserting captions in video content or having transcripts for videos. Text alternatives are generally the core of perceivable content on web apps.

###2. Operable
Websites should be able to function correctly, regardless of the device used to access them. Whether it's using a touch-screen, mouse or even a keyboard, navigation through the app is expected to be as smooth as possible for its users. 

###3. Understandable
The content in your website should be easily understood and readable to the widest audience possible. This is made possible by defining unusual words, phrases and abbreviations. Having error messages and giving descriptive instructions for any forms in your website, especially for users who won't easily understand the website's functionality.

###4. Robust
Websites have to work with assistive technologies like browsers and other user agents. Ensure your code is up to date and will be compatible with current and future browsers.  


##Web Accessibility Evaluation Tools

If you want to know how accessible your website is, you can check out some auditing tools suggested by W3C [right here](https://www.w3.org/WAI/ER/tools/). Or better yet, try out these tools mentioned below. On the plus side, they can all be added as extensions in your Chrome browser.

* [AXE](https://www.deque.com/axe/)
* [WAVE](https://wave.webaim.org/)
* [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/)

Despite the common use of these tools, we shouldn't fully rely in automation for accessibility testing. They also have their limits. You can read more about it in this article [(Building the most inaccessible site possible with a perfect Lighthouse score)](https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/) by Manuel Matuzovic.

We should enable everyone to participate equally by being mindful of these minute but essential details in our Web Apps. Hence, in efforts to make their services more accessible, Twitter is planning on introducing automated captioning by 2021. This might seem like a small thing to some people but they'll be empowering more users in the long run. 

##More Resources...

You can check out [Microsoft Learn's, Accessibility Fundamentals](https://docs.microsoft.com/en-us/learn/paths/accessibility-fundamentals/) to learn more about Accessibility and Inclusiveness. 

If you're more of a hardcore reader, you can check out W3C's site on Accessibility [here](https://www.w3.org/WAI/fundamentals/).