Built with Love and Accessibility

Fellow Developers, if you are looking for "what is accessibility" or how to make an accessibility compliant web / mobile app, this is not the article for you. For understanding what accessibility is, please visit Marty Seinamets' What is web accessibility? This one mostly focuses on the thought process of building accessibility compliant page and a few of my experiences on that.

When my managers came up to me and said that we are going to revamp the whole module with accessibility compliance, I was excited, because I loved the word "revamp" in it and didn't care much about the accessibility part - until I started browsing about it!

I browsed through most of the articles and videos on the internet about accessibility which didn’t take much time, as there are very few in numbers (at least at the time I searched for). I learned one thing for sure - web accessibility is not just adding aria attributes to the HTML. When I started building it, I ran into a lot of questions asking myself, "Is this the right way?", "Should I use a button or a link?". There is no tool available that will tell you if the page is 100% compliant, though there are tools that you can use to get started, that will help at a basic level such as axe and web developers plugin

Always ask these four questions -

1. How will the keyboard focus move?
2. How will screen readers interpret this?
3. How does the page behave for users with very slow internet (without the images and media)?
4. How a 10-year-old and a 60-year-old user will understand the page?

If these things are captured before you start developing a page, that’s half the battle. The other significant factors are selecting the right tech stack and then, of course, execution.

Tech Stack

While Progressive Web Apps(PWAs) revolutionised the web, Single Page Apps revolutionised the PWAs. As many other fellow developers, I chose to build a SPA. Fortunately or unfortunately, we did not choose any frameworks or major libraries, except for handlebars. Making SPA accessible is possible, but a bit challenging. Mostly because of the focus management.

The IE Moment of A11y

When you develop a complete page with accessibility and focus management, you might then hit another issue, the usual one - browser compatibility. In case of accessibility, every browser behaves like IE. Firefox supports a feature which chrome won't. Chrome and Firefox support a feature which Safari won't. And of course, the usual IE case sometimes includes Edge.

Single Source

After a few weeks of youtube videos and blogs, I found that one single source of truth for the accessible components is available on the w3c web page (WAI-ARIA). That's right. Most of the components we are using today are made accessible on their webpage. This is my first project where I referred to WAI-ARIA APG(Authoring Practise Guidelines) a lot more than StackOverflow. Browse through the w3c.org authoring practice for the accessibility components and you may not need any more.

Modern Components

Ever wondered why the websites of the government organisations are so plain and boring? Because they have to be 100% compliant with accessibility. The simpler the UI, the better accessibility compatible.

The guides will mostly help you with the commonly used components. Some complex and modern-day components are sadly not as accessible as we expect. Some of them include infinite scroll, drag and drops. As the industry started evolving, HTML5 also evolved with it.

For instance, HTML5 introduced a tag <feed> for the infinite scroll. Although HTML5 supports it, the screen readers and other assistive techs should give a hand. They find it challenging to bridge the gaps. Most of those new (after 2015) tags are not completely supported by the assistive techs. Either we should have to compromise or we have to bring in a workaround for those kinds of solutions.

The By-Products

After we have a few working pages with accessibility, we found ourselves that the UX of the pages are so much better than we thought it would be. There are a bunch of things we got as a result of building with accessibility in mind. A simple yet rich looking UI and better UX are one of the major things that we got!

Summary

A couple of months into the project, me and my teammates got an idea of how to build a web-accessible page. Always ask those four questions. There is no perfect solution. But there will always be the optimum solution.

Your mission, should you choose to accept it, is to make the web experience as equal for everyone, as much as possible.

_{Thanks to @JoeJayanth}