Skip to main content

We write about Digital Accessibility. This includes topics related accessibility news, accessibility events, accessibility techniques, reviews of websites and applications, tips related to accessibility and in simple words all possible things about digital accessibility.

Tagged as

IRCTC

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.

Accessibility Review – IRCTC Next Generation e-Ticketing System – Part 1

IRCTC has recently launched their next generation ticketing system and we decided to post accessibility review in a two or more parts. Reason for splitting into parts is that we would want IRCTC to fix problems in phased manner and start with the main and popular section of the website – Booking a train ticket!

Firstly, I congratulate IRCTC for their efforts to provide best possible experience. For a long time we hear comments like “IRCTC is slow”, “never able to book tickets on IRCTC” and so on… and this next generation ticketing system is really fast. I have used it for about last a month or so and booked several tickets and never had a problem in terms of speed or booking process.

So one problem is almost solved as far as booking process is concerned and now I urge IRCTC to consider looking into accessibility aspect of the portal. Below are some findings to start with:

In this post, I’ll be using terms like “screen reader” “assistive technologies” etc., Let;s understand a little bit about them. Assistive Technologies are enabler to people with disabilities and help them using computers and mobile devices. For instance:

  • Users with vision impairment uses screen reader – whatever is on the screen will read aloud for them. If you are a windows user, to experience a screen reader, just download and install NVDA – a free and open source screen reader. If you are a Mac user, just press CMD+F5
  • Users with low vision uses a screen magnification software or use high contrast mode
  • Users with motor disabilities such as having problems with fingers or palm, uses switches or voice recognition
  • Captions (for videos) would be helpful for people with hearing loss

Login Page

  • Very difficult for keyboard users to reach login form: As we know login is one of the popular section that a user would use. For a keyboard only users, as of writing, it requires using tab key for 8 times. One way to resolve this issue is by providing a same page link called Skip to Login at the top of the page. The code would look something like this:
    At the top of the page: <a href="#login">Skip to login </a>
    Just before the login heading: <a name="login">
  • Lack of heading structure: Though visually all sections appears to have headings, they are not marked up with <heading> attributes thus assistive technologies such as screen readers and search engines cannot identify these headings.
  • Associated labels are missing for form fields: Similar to headings, visually one would see form labels but due to lack of “for” and “id” attributes, association between <label> and <input> fields are missing. For a screen reader user, it would be read something like “edit, edit, select” and so on…
  • CAPTCHA: I know security is important and for such a large scale application, definitely “yes”; however, currently there is no way on this site how customers with vision impaired can solve this image based CAPTCHA. There needs to be an alternative such as audio CAPTCHA and to address needs of everyone, it would be recommended to have a text based CAPTCHA such as a math question etc.,

Search trains & book tickets

  • Like mentioned above, it’s very difficult for keyboard only users to reach the booking form. It requires them to press tab key for 11 times to reach booking form. Solution would be add “Skip to booking form” link at the top of the page.
  • Associated labels are missing for form fields: Similar to headings, visually one would see form labels but due to lack of “for” and “id” attributes, association between <label> and <input> fields are missing. For a screen reader user, it would be read something like “edit, edit, select” and so on…
  • When users start typing a station name, auto-suggestions will pop-up, same are not available to screen reader users.
  • Date picker: It’s impossible for a keyboard only user as well as screen reader users to use date picker. Firstly while pressing tab key, focus will just skip the date picker field being it a read-only input field; thus it cannot be used via keyboard. Solution would be let user enter the date either manually or using date picker. Providing both options would be great. In addition required date format can be notified.
  • Radio buttons to select “general / ladies / tatkal” does not have associated labels
  • Appropriate labels are present to fill in passenger details – great! However, a few fields like contact number are missing the associated labels
  • Again, there needs to be an alternative for CAPTCHA on booking page

I think if IRCTC could start fixing these issues, it would be really great! In addition, it would be absolutely valuable to avoid table mark-up for layout purposes; instead use CSS.

Dear IRCTC, you delivered a really fast and intuitive portal so please consider looking into accessibility and it would be helpful to large number of customers who are with disabilities. Thank you in advance.

Best,
Srinivasu