Skip to main content

Posted in

Accessibility Reviews

Twitter for WordPress vs Accessible Twitter for WP plugins

While we are playing to re-build our website, we wanted to be sure we address accessibility to the best possible extent. Well, we are still working on it; there are still some challenges! This post is to illustrate how replacing one plugin has made a huge difference from color contrast prospective.

We always believe in using native products of a company as much as possible. So to display our our Twitter timeline, we have opted to use widget code generated by Twitter Developer Tools and added widget our side bar. When we ran aXe by Deque on our website, we found 49 colour contrast issues and 38 of them are causing from Twitter widget. It was very hard to fix all of those issues.

Then we have opted for WP Accessible Twitter Feed and though it has some less features like we cannot engage our visitors directly from website by letting them use features like Reply, Retweet, Like etc., it has solved the issues of colour contrast. One additional thing we had to do is add authentication keys in settings.

We wish Twitter’s own widgets include accessibility at some point.

Accessibility Review: IRCTC Next Generation Ticketing System portal

IRCTC (Indian Railways Catering and Tourism Corporation) has recently revamped it’s portal and good news is that users do not require to login to check availability of tickets, search trains etc., Here is a quick review from accessibility prospective.

As the site loads, a banner appears talking about 48 months of NDA government but keyboard focus does not get to this banner and remains on IRCTC home page. However, using esc key closes the banner.

Looks like semantics are used as appropriate as possible. Buttons are marked up using correct attributes and have accessible names.

IRCTC Logo, Login, Register and icons to change font size are not operable using the keyboard.

There are several links with “More info” that are not descriptive

Focus indicator is missing for several elements such as Flights, stay, cab etc.,

It’s not recommended to use upper case letters as screen readers may consider them as acronyms.

There are several color contrast issues on the page; several images do not have alternate text. This is just a very quick text to see if accessibility has taken into consideration at all when re-designing the portal. While there was attempt to improve performance, IRCTC did not really considered improving accessibility. It’s time we the accessibility enthusiasts collectively reach out to them and have them address accessibility problems.

AirAsia provides reasonable accommodation; what can they do better?

Last weekend, we did a quick round trip to Hyderabad from Bangalore on Air Asia; here is our expereince as a family with 2 children and both of us having some disability (Hema has problem with her right hand and I’m a person with low vision).

Check-in counter staff both in Bangalore and Hyderabad are sensitive enough and arranged a personnel to assist us. However, they are not sensitized towards how and why they should be assisting us. That person was just walking ahead of us and once we found it difficult to trace him. AirAsia have announced a priority boarding but that sequence was not maintained after boarding the transit bus.

Stairs to board the aircraft are a bit strange, they are strong but some stairs are too high. It was tough for Hema to climb with an infant. When we have tweeted to Air Asia with this information, received a casual response stating “Hi there, sorry, you may contact the ground staff”; but no mention that they would look into this matter and improve accessibility of boarding. Even personnel who have escorted us to the gate did not inform staff at the boarding gate that we would need assistance. While returning from Hyderabad, check-in counter staff has mentioned, there will be someone at the boarding gate who can asist; but we could found none.

Also, we found no personnel at the ground on arrival. Overall, Air Asia seem to have “assistance” as a checklist item but training of the personnel is due.

Accessibility Status of Central Government Universities in India

We always believe that any learning should come from education and educational institutions. In India, if not more, at least we are talking about digital accessibility since 2008 (I’m saying it as that is the year when Government of India has published Guidelines for Indian Government Websites). There are about 46 universities run by Central Government of India. We have conducted a quick accessibility audit of websites of all these central universities with two parameters in mind:

  • Total number of accessibility violations
  • Number of color contrast issues

We have not conducted a full audit of each home page; but have done a quick audit using automated testing tool aXe by Deque Systems Inc.

There is only “Hemvati Nandan Bahuguna Garhwal University meets the closest requirement of WCAG 2.0 AA compliance.

There found one website that has 300 WCAG 2.0 violations just on the home page. Below is a quick snapshot of how these websites are doing from WCAG 2.0 prospective.

There found one website that hos more than 200 color contrast issues. Below is a snapshot of how these portals are doing from color contrast prospective. Many sites have more color contrast issues than other violations; this clearly indicates importance of why accessibility needs to be considered at the design stage itself.

Below table shows list of WCAG 2.0 violations and number of color contrast issues against each website.

University Name No. of WCAG 2.0 issues Color Contrast issues
Rajiv Gandhi University, Arunachal Pradesh 103 84
Assam University, Assam 33 15
Tezpur University, Assam 16 0
Central University of South Bihar 16 3
Mahatma Gandhi Central University, Bihar 34 1
Nalanda University, Bihar 9 4
Guru Ghasidas University 300 1
Indira Gandhi National Open University 29 17
Jamia Milia Islamia 128 56
Jawaharlal Nehru University 28 2
South Asian University, Delhi 9 4
University of Delhi 8 7
Central University of Gujarat 127 6
Central University of Haryana 21 6
Central University of Himachal Pradesh 36 9
Central University of Jammu 229 218
Central University of Kashmir 128 17
Central University of Jharkhand 49 0
Central University of Karnataka 28 25
Central University of Kerala 24 14
Dr. Hari Singh Gaur University 93 6
Indira Gandhi National Tribal University 124 17
Mahatma Gandhi Antarrashtriya Hindi VishwaVidyalaya,Wardha 83 2
Central Agricultural University 19 15
Manipur University 13 0
North Eastern Hill University 27 10
Mizoram University 12 2
Nagaland University 18 0
Central University of Orissa 57 12
Pondicherry University 18 6
Central University of Punjab 83 14
Central University of Rajasthan 26 0
Sikkim University 31 4
Central University of Tamil Nadu 41 7
Indian Maritime University 27 0
English and Foreign Languages University 54 2
Maulana Azad National Urdu University 35 0
Univeristy of Hyderabad 20 10
Tripura University 40 19
Aligarh Muslim University 43 7
University of Allahabad 21 9
Babasaheb Bhimrao Ambedkar University 48 11
Banaras Hindu University 66 5
The Rani Lakshmi Bai Central Agricultural University 51 3
HEMVATI NANDAN BAHUGUNA GARHWAL UNIVERSITY 1 0

If we can get these institutions educated on accessibility and make these websites accessible would lead journey of inclusion to a long way. Let’s spread the word!

Twitter iOS app is beautiful and inspiring!

Recently updated Twitter app for iOS version 7.1 is beautiful and inspiring to use. This is well designed keeping universal design in mind. Here is what I found impressive:

Clear icons Very pixel perfect, smooth edges and easy to see. Enough color contrast between foreground and background.

Links are underlined – all links including hashtags, twitter handles are underlined. Though I would prefer twitter handles and hashtags not to be underlined as they do already have a symbol attached to it.

Dynamic contrast for back and compose buttons When background color is changed, for instances, when profile page is opened, automatically more contrast background colors are added to back and compose buttons so that they are visible.

Less cluttered buttom navigation now just have home, search, notifications and direct message tabs; many things have been moved to a side menu that can be invoked using left-to-right swipe.

Night mode Even when night mode is turned on, it was pretty easy to use all options and all elements are clearly visible.

Accessibility options Through this section, settings can be activated including increasing font size, enhanced contrast etc.,

Overall, great job Twitter’s Accessibility team! This is something I would urge all app developers to get inspired and build inclusive mobile applications.

Accessibility Review: Home page of Ministry of Social Justice and Empowerment

Noticed that Ministry of Social Justice and Empowerment, Government of India has re-designed its website and here are list of quick accessibility findings. Note that this is not a complete assessment report.

  • Slider images do not have appropriate alternate text. They are provided something like “Slider 1, Slider 2 etc.”
  • Page has about 11 color contrast issues
  • Main navigation menus are operable using keyboard; however, menus gets automatically expanded and user is forced to navigate through all menu items.
  • Under important links section, there are several menus but not operable using keyboard
  • Under “What’s new” section, role of “play” and “stop” elements are not defined.
  • Redundent information is provided for links under What’s new section. Information is provided as text as well as alternate text for PDF image and also provided using ti
  • “New” image does not have appropriate alternate text. also, it’s flashing.
  • Links provided at right side e.g. Prime minister’s relief fund, e-Gazette etc., exposes redundent information to screen readers due to use of title attribute.
  • Several images have additional alt text like Digital graphic
  • Logo has marked up as a heading but there are no headings defined on the page
  • Due to use of title attribute for several links with text “link” – redundant information is provided to screen readers

Related reading: Developer resources would be of help to resolve accessibility issues.

A quick accessibility review: Swiggy iOS App

Swiggy is an online portal using which one can order food from restaurants around and food will be delivered through their executive. When Madhu Singhal, Founder of Mitra Jyothi told me that she needs to use Swiggy but its app on iOS is not accessible using VoiceOver that prompted me do a quick accessibility review of Swiggy. Some of the observations are:

  • Bottom navigation tabs have no problem. works well with VoiceOver
  • Home button (at the top), area selector widget, favorites button do not have an accessible name
  • When swiping using gestures, offers widget is not accessible
  • Able to Select and open a restaurant
  • Able to read through the menu options
  • Buttons provided to add / remove an item from the menu list does not have label
  • Cart is completely inaccessible
  • Call button does not have accessible name

Though user is able to make a choice of options in mind, it just stops there and noway they can proceed with adding them to card and place an order.

Do refer to Mobile Accessibility Practices page to learn about building accessible mobile applications.

Accessibility Review: Paytm web interface

Paytm is one of the largest digital wallets being used today. Paytm is one thing that gets accepted almost everywhere including small businesses like grocery stores, vegetable vendors etc., Also, Paytm enable users to purchase wide range of merchandise, book tickets for bus, train, fight etc., make utility payments such as electricity, DTH, mobile, landline, water etc., In short, many financial transactions can be carried out using Paytm.

Such a powerful platform has to be usable and accessible to all users including people with disabilities. Here is a list of accessibility findings that I have put together. This is not a exhaustive assessment report but something to begin with.

  • Search box: Auto suggestions are not operable using keyboard and does not expose to screen readers
  • Form fields such as to enter prepaid mobile number, recharge amount does not have associated labels
  • Several sections such as Book on Paytm etc., appears and functions like tab panels but not marked up as one.
  • Strike-through information (original price) is not exposed to screen reader users
  • No visible focus indicator on any focusable elements.
  • Several elements do not meet sufficent color contrast ratio of 4.5:1
  • Drop down menus are not accessible using keyboard alone.
  • Available balance and Items bag is not accessible using keyboard alone.

What I would recommend is have a list of scenarios and priorities them; then start fixing accessibility issues for each of those scenarios. Some items could be:

  • Global navigation
  • Sign-up and sign-in
  • Adding money
  • Paying utility bills and recharge
  • Buy movie tickets
  • Buy bus tickets
  • Shop on Paytm

Visit Our resources page to find links related to standards, developer resources, testing tools and much more…

Looking forward to see Paytm more accessible soon!

Accessibility Review: Unique Disability Identity Card (UDID) Portal of Government of India

A while ago, Department of Empowerment of People with Disabilities has launched Swavlamban Card portal to provide disability certificate and Unique Disability ID to persons with disabilities. I have pleased to see there has been a lot of care taken towards ensuring accessibility of the portal. Some of the positive things done on this portal:

  • All elements have sufficient contrast between foreground and background
  • Alternate text is provided for all images
  • Lists are marked up correctly
  • Headings are marked up though they can be improved
  • Play / pause functionality is provided for carousal
  • Associated labels are provided for input fields (except a few)

Here are a few things that needs attention:

  • Combo box to select language does not have associated label; there is no apply button to select language; there is an auto apply provided but this would cause inconvenience to keyboard only users; User would not be able to navigate through available options as page keeps refreshing for every language and focus moves out of the combo box.
  • Search button does not have visible focus indicator
  • When “high contrast” theme is selected, it does not get applied to elements next to carousal (e.g. Apply for disability certificate and UDID card etc.,)
  • “previous, play/pause and next” elements appear and function like buttons but marked up as links
  • There are several links on carousal with screen name “Register now” and these links need to provide better context
  • Content under “Quick access keys” appear like a text content but marked up as links – need to remove hyperlinking.
  • Heading structure can be improved; structure went up to level 5; all level 5 headings can be marked up as level 2 and level 4 as well to level 2.
  • Department of Empowerment of People with Disabilities appears to have linked to a different URL – i.e. http://innovationclustersarchive.nic.in/content/index.php, Department of Empowerment of Persons

This is only a quick review of home page and not the complete assessment. Overall, I think there are some good steps taken and accessibility has kept in mind while building the portal.

Accessibility status of state government websites in India

Today, it’s heartening to see there is so much momentum going on to make India inclusive, I thought, it’s important that websites of all state governments are accessible. As I am a believer that inclusion happens when there is awareness created among the stakeholders. So I have done a quick accessibility test using aXe extension for Mozilla Firefox. This test was run only on Home pages of each state government website and below are the results both in the form of a chart and a table. Data is made available in the form of table as well to make sure that results are available in case chart is not accessible to assistive technologies.

Gujarat Government’s website is found hosted on .com domain instead of .gov.in and reason is unknown.

Results as a Chart

Results as a Table

State Accessibility Failures
Andhra Pradesh 41
Arunachal Pradesh 59
Assam 27
Bihar 2
Chattisgarh 1
Goa 37
Gujarat 23
Haryana 131
Himachal Pradesh 19
Jammu and Kashmir 27
Jharkhand 24
Karnataka 2
Kerala 26
Madhya Pradesh 8
Maharastra 6
Manipur 44
Meghalaya 1
Mizoram 14
Nagaland 43
Odisha 76
Punjab 35
Rajasthan 52
Sikkim 23
Tamil Nadu 7
Telangana 79
Tripura 23
Uttar Pradesh 37
Uttarakhand 12
West Bengal Unavailable

Website of West Bengal state did not get loaded.

Future posts may talk about frequently seen issues across these websites.