CAPTCHA Muktha Bharatha (India without CAPTCHA)

Introduction

The various initiatives such as Digital India and Accessible India are aimed at improving the digital access and accessibility of both physical and ICT respectively. India has gone on a very large scale digitalization in the last 5 years. It is right time to ensure all the digital platforms consider accessibility in all the stages from inception to product delivery.

Accessible India Campaign

The Accessible India campaign was a very good and effective initiative by the government to increase the awareness on accessibility in India. The sad state of affairs is even after launching Accessible India campaign almost 4 years ago and conducting numerous workshops to various stakeholders the state of accessibility has not been changed much on ground.
Despite having many initiatives such as Digital India, Accessible India campaigns, it is very important for India to move from accidental accessibility to rule-based accessibility. It is very important for the large organizations such as NIC to have thorough understanding and clear plan of accessibility along with the right technical skills on accessibility.

Is Everything Fine Except CAPTCHA Accessibility?

Almost all the government and public sector units (PSUs) completely ban people with disabilities using their platform due to inaccessibility.
In this post I documented my personal experience of using various government and public sector portals where CAPTCHA was one of the major barrier from availing the facilities. There were many more accessibility challenges. However, I felt if there were no inaccessible CAPTCHA I could have used the facilities with screen reader at least.

PMO Does Not Like People with Disabilities

The Centralized Public Grievance Redress and Monitoring System (CPGRAMS) to raise and track queries to Prime Minister’s Office (PMO) remains inaccessible for people with disabilities due to the inaccessible CAPTCHA. The ticket “PMOPG/E/2017/0495564” raised in 2017 has been closed without any resolution. Various tweets to PMO and MSJE did not yield even response forget about the remedy.

Ernet Too Does Not Want Me to Provide Feedback

Unfortunately, the feedback form on Ernet India also prevents people with disabilities from providing feedback as there is an inaccessible CAPTCHA. Please note that Ernet is the organization which was responsible for making 100 recently launched accessible government websites as per this news brief. (http://www.uniindia.com/hundred-accessible-websites-for-divyangs/india/news/1110894.html)

After observing many accessibility issues on the Ernet page itself, I did couple of Google search to get the list of all 100 sites which are launched as accessible without success. MSJE did not respond for the multiple twitter queries seeking the same data last year hence I took the route of online Right to Information (RTI).

RTI Platform Coupled with SBI Payment Gateway Says No for PWD

RTI is not at all happy people with disabilities using their platform so they decided to incorporate inaccessible CAPTCHA and some weird requirements for form fields which took multiple attempts to figure out the errors. The next hurdle was with State Bank of India (SBI) payment gateway having an inaccessible CAPTCHA. I still do not understand why a payment gateway needs CAPTCHA as one has to perform 2 step verification anyhow.

It took almost more than 45 minutes for me to complete the filing online simple RTI application otherwise it would have taken around 5 to 8 minutes. I could complete filing RTI only for the availability of Be My Eyes (BME) service.

Election Commission Didn’t Think that People with Disabilities Use Their Online Services

The simple Election Commission of India  voter verification page is also not free of the CAPTCHA monster and I could not verify whether my name was there in the electoral list. All the activities on this site is forbidden for people with various disabilities to whom solving picture-based CAPTCHA is simply impossible.

Few Recommendations for CAPTCHA and security

Many places does not require CAPTCHA at all like payment gateway where users are required to perform two step verification. Most of the portals provide access to the registered users where getting rid of the CAPTCHA is the best thing as the users are verified during the registration process itself.
There are many alternatives for CAPTCHA such as OTP based authentication, etc. W3C document on Inaccessibility of CAPTCHA has documented various challenges and solutions for the CAPTCHA in a detailed manner.

Conclusion

It is the high time India starts implementing standard based accessibility rather accidental accessibility. India has the second largest population in the world and digitization is happening on a large scale. It is very important to consider accessibility seriously by both government and all the businesses else a large group of people will be forbidden from participating in the economy.
I expect CAPTCHA Muktha Bharatha (India without CAPTCHA) becoming reality in a very short time so that most of the facilities are opened up for people with disabilities till the full accessibility is achieved.

Building an Accessible Button with Anchor Tag

Ideally it is good to reserve anchor <a> tag only for links and use <button> or <input type=”button”> tags for buttons from the accessibility and usability point of view. However, for various reasons we build custom buttons with <a>, <div> or <span>. The five (5) important things to be taken care to ensure that the button is accessible (ADA compliant) are discussed in this post. Ensure there is an appropriate keydown function along with the things discussed in this article.

Following are the considerations for developing an accessible button with anchor <a href> tag.

  1. Do not remove the ‘href’ attribute
  2. If it is a button provide role=”button”
  3. Provide href=”javascript:void(0);” for all the custom links / button with the href attribute
  4. Do not miss the semicolon (;) in the href value when provided with href=”javascript:void(0);”
  5. Do not provide hash (#) as the href value

Do not remove the ‘href’ attribute

The href attribute provides the following enhancements for the anchor <a> tag and this makes the coding simple.

  1. Provides keyboard focus while navigating with the tab key.
  2. Ensures that the elements gets activated with the Enter key along with the click.
  3. Changes the mouse pointer when hovered to indicate the element is clickable.

If you remove the Href attribute all the above functionalities are lost and <a> is just like <span> or <div> tag.

If the href attribute is removed then provide tabindex=”0” to make the element focusable with the tab key and CSS to indicate that the element is clickable on hover & focus. The element will not be activated with the enter key unless there is a function for keypress or keydown event.

If it is a button provide role=”button”

When the element looks like a button and the functionality is similar to a button then add role=”button”. If the role button is not added screen readers read them as link and user expectation for link versus button is different.

Provide href=”javascript:void(0);”

for all the custom links / button with the href attribute.

Provide href=”javascript:void(0);” instead of href=”#” and do not leave the href value empty.

Do not miss the semicolon (;) in the href value when provided with href=”javascript:void(0);”

With the JAWS screen reader turned on the buttons without semicolon (;) in the end of href=”javascript:void(0);” do not get activated with the enter or spacebar on IE 11. This just shifts the focus to the beginning of the DOM.

Do not provide hash (#) as the href value

Screen readers read href=”#” as same page link if there is no role specified hence the user expects that the element just moves the focus to in the same page. Many browsers scroll the page to the top when href=”#” is provided. This creates usability issues for the keyboard only users hence it is good to use href=”javascript:void(0);” both with and without role=”button”.

Additional Notes

Ensure event.preventDefault() has been called appropriately in the keypress / keydown function.

Ensure that the elements get activated with only Enter and space keys. There need to be a condition to check the pressed key and the action should happen only for enter and spacebar keys else the elements get activated even with tab navigation.

The keyCode for Enter is 13 and keyCode for spacebar is 32.

It is good to use keydown event instead of keypress event as there are some cross browser compatibility issues with the keypress event.