Skip to main content
Posted in

Accessibility Reviews

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.

Accessibility Review: Jobs for People with Disabilities portal by Ministry of Social Justice and Empowerment, Government of India

Noticed that Department of Disability Affairs, Ministry of Social Justice and Empowerment, Government of India has launched Job Portal for people with disabilities; which would aim to become a great portal for job seekers with disabilities, employers and training institutes. This is certainly a great initiative although I personally prefer to embed people with disabilities with mainstream job portal but this initiative certainly helps.

As an accessibility enthusiast, I wanted to look up the portal from accessibility prospective and below are my findings. Though I’m disturbed to see claim that this website is complied with Web Content Accessibility Guidelines (WCAG) 2.0 Level AA; while it’s actually not. That said, I hope department will work with their developers and get the issues fixed.

Disclaimer:

  1. This post is not to criticize the Government but to help ministry and developer know the problem and help them fix issues thus to make portal fully accessible.
  2. This is not a complete accessibility report; this review can be used only as a reference
  3. If visitors of this website notice any other issues related to accessibility or usability may please add them in the comments section or write directly to the ministry

Accessibility Assessment Findigns

  1. Page title is inappropriate. Home page has “Index” as page title
  2. Buttons provided for “small text, medium text and large text” does not convey it’s purpose
  3. Color scheme buttons does not have accessibel name; also visual indication is not clear to identify expected color scheme.
  4. When navigating through color schemes, screen reader reads for one tab stop as “www.disabilityjobs.gov.in “> and next next tab stop says “button link”
  5. Login button does not have an accessible name
  6. Login button does not have visible focus indicator
  7. Placeholder text is provided as labels for “Enter email ID to register” and “Type password”; it’s not recommended to use placeholder as label for form elements.
  8. Full “I agree to the terms and conditions” needs to be associated with check box.
  9. Check box “I agree to the terms and conditions” does not have visible focus indicator.
  10. Register button does not have accessible name
  11. Register button does not have visible focus indicator
  12. All form fields in Search jobs widget have placeholder as form labels and thus label goes away when user inserts data.
  13. Search button does not have accessible name
  14. Deprecated mark-up of marque is used for “No Payment to be made by applicant to any agency or employee.If someone ask for registration fee or any other cost please immediately bring to NHFDC notice”
  15. Tab panel for Search jobs, Recruiter and Training institutes is not operable using keyboard
  16. Location field (in all tabs) brings up a list of locations with checkboxes but not notified to screen reader and operable only after using a tab key from location field; futher there is no mechanism to dismiss this list before navigating through all location options. Notice Andaman and Nicobar has given as two seperate states!
  17. Image link “Accessible India Campaign” (located between Create a job account and Join our employer” is not accessible using keyboard.
  18. There is a button available to show / hide social media links (Facebook and Twitter) and same does not have an accessible name.
  19. Photo gallery is not accessible using keyboard
  20. There is no mechanism to pause / stop news scrolling.

For any further questions or clarifications of this post, please write to me at srinivasu.c(at)sgaccessibility(dot)com

Accessibility Review: HDFC NetBanking – Adding new Beneficiary

Today, let’s look at Add Beneficiary section of HDFC Bank.

Please note that this test has been carried out using Mozilla Firefox and NVDA a Free and Open Source Screen reader

On Home page, combo box that has NetBanking, Prepaid / Forex Card, Verified by Visa, Credit Cards, Forgot password, Register options does not get focused in tab order but available when using up arrow from Login graphic link.

Once “Login” is activated, a new window gets opened which actually handle rest of the transactions. It would be useful to inform user that “Login” link opens in a new window.

Below are list of issues identified through Add beneficiary page:

WCAG Check Point Issue Recommendation
1.3.1 Info and Relationships Label for Edit field to enter Customer ID is not programmatically associated with its visible label Associate input field with its visible using <for> and <id> attributes
1.1.1 Non-text elements (Active images) Retrieve customer ID image link has an empty alt value thus ignored by screen reader Replace empty alt value with appropriate alt text such as “Retrieve Customer ID” etc.,
1.3.1 Info and relationships Table mark up is used to control the layout; this render unnecessary layout information to screen reader users Use CSS to control layout. It’s easy from portal maintenance prospective too
1.3.1 Info and Relationships (forms) Screen that appears after providing customer ID has following form related issues:

  • Labels for “Customer ID”, “IPIN” edit boxes do not have programmatic association
  • Labels for “virtual keyboard” and “confirm Security access icon and message” check boxes do not have programmatic association.
Associate input elements with respective labels using <for> and <id> attributes
1.3.1 Info and relationships When user is logged in, default focus moves to Account summary; while this is acceptable for portal of this kind where user needs to know the account summary, it would be worth to add heading structure to prior navigation items such as main navigation and side bar navigation or marking up with ARIA roles would be helpful Either provide appropriate headings or use ARIA roles
2.4.7 Focus visible There is no visible focus indicator across the portal; thus users especially those with low vision or cognitive would not know where they are navigating through on the page Either provide a visible focus indicator or ensure browser’s default focus indicator is not override
4.1.2 Name, Role and Value Side navigation contents such as Accounts, Transact, Enquire etc., appears and functions like menus but marked up as links Add menu roles and also ensure state of menus viz. expanded / collapsed is exposed to assistive technologies
1.3.1 Info and Relationships (forms) None of the input fields have associated form labels Associated labels with respective input fields using <for> and <id> attributes
3.3.2 Error identification When form is submitted with no data, user has shown usual process information and not error validation result Show usual process information only when all required fields are filled in

This is not a complete review of the flow but should help HDFC as a first step to make their digital experience accessible.

This post is part of series of reviews to mark Global Accessibility Awareness Day

Accessibility Review: State Bank Secure OTP iOS App

Receiving One Time Password (OTP) via SMS is easy but causes huge inconvenience when user’s registered phone is unavailable or traveling abroad. To solve this problem, State Bank of India has introduced SB Secure OTP application and we did a quick review of SB Secure OTP app for iOS with VoiceOver. Here are some findings:

  • Login Screen is easy including focus management for “Forgot PIN” dialog”
  • It was easy to enter PIN and login
  • Using VoiceOver, focus does not get to Back button, Logout, Help and Settings
  • It was easy to access dialog when user enters wrong PIN

About VoiceOver
VoiceOver is a screen reader on iOS and OS X that reads the screen aloud. To turn ON VoiceOver on iOS, go to Settings -> General -> Accessibility -> VoiceOver -> Toggle

This brief review is series of accessibility reviews to mark Global Accessibility Awareness Day which will be marked on 19th May, 2016 and 3rd Thursday of May every year!

iOS app Accessibility review – State Bank of India's Freedom Plus

State Bank of India (@TheOfficialSBI) is one of the popular nationalized bank in India and recently released SBI Freedom Plus app and we decided to help them by reviewing app for accessibility.

We have tested the app using VoiceOver, an in-built screen reader on iOS devices.

To turn ON the VoiceOver, Go to: Settings -> General -> Accessibility -> VoiceOver -> Toggle ON

Below are some of our findings:

  • As the app loaded VoiceOver was able to read “Welcome to SBI Freedom Plus Internet banking on the mobile” and then there are two form fields to fill in Internet User and password. However, VoiceOver failed to detect logo information and three available buttons 1. Locate Us, 2. Offers and 3. FAQs
  • Unable to activate “Login” button using VoiceOver
  • When app is authenticating user, visually screen has curtained, however, VoiceOver is reading background information such as user name, password etc.,
  • When accounts page is loaded, labels for each account is reading as a separate lines by VoiceOver. i.e. when swiping right, it reads as

    transaction – next swipe deposit next swipe accounts – next swipe accounts – next swipe savings, next swipe deposit etc.,

    ; This needs to be read as a single item each like Transaction accounts Savings, Deposit account Accounts FD etc.,

  • App requires appropriate headings
  • Good part is that VoiceOver is able read all form fields, dialogs correctly.
  • Color contrast in most part is good; however it requires improvement for text displayed for account information such as balance etc.,

Overall, the app is good and it will be great with a few improvements.

Accessibility Review: Revamped website of Reserve Bank of India

Thanks to a good friend, Harish Kotian who posted news about revamp of RBI’s website on Access India mailing list (external link) so I decided to have a quick look at revamped website of Reserve Bank of India (external link) and make note of my comments:

As the page got loaded, (visually) I have noticed a inline modal dialog that talks about revamp of the website and it’s features. However:

  • The keyboard focus does not go to this modal dialog
  • As the focus did not go the dialog, content is unavailable to screen reader users
  • I used mouse and clicked within the dialog and then tried closing the dialog with esc key and it failed
  • There is no close link / button to close the dialog (even visually), but clicking on “next” link closed the modal pop-up. I recommend remove this “next link” and add a close button at the top right for such dialogs.

As this screen would anyway just go in a while, I don’t set this as a high priority ask but whenever there are such dialog components are used, they need to be accessible. An article on Accessible modal dialog by Marco Zehe (external link)

It is good to see features like Increase font size, dark theme etc., are included at the top of the website to help users with low vision and elderly. However, when I switched to dark theme, it did not get apply to the entire page. For instance, What’s new section still shows me with dark font on light back ground.

Text input (edit) box for Search does not have neither a visible nor a placeholder label. Screen readers just read as “Edit” and visually there is no label at all. It’s good that search has powered with auto suggestions and after keying a few letters, using down arrow, suggests are read aloud by screen reader. However one quick fix for tis to be made is notify user about availability of suggestions using aria-live.

In the top navigation, “Publications” and “Stastics” does have sub (mega) menus but they are not accessible using keyboard. Unable to expand these menus. But I liked it does have a visual indication for drop down. An accessible menu bar example from Open Ajax Alliance (external link).

There is a carousal just below the navigation showing different buildings of RBI and preamble message. However, there is no option to pause or stop the moving images.

Current rates and Function wise sites should be marked up as heading level 2 and not heading level 3.

Tabs used for What’s new, sections updated today and coming soon are working just fine. But a slight enhancement can be done. Currently once I expand any tab using space bar and use down arrow key to read the content, focus moves to next tab item and read them as well and then read content of selected tab. Instead, when using down arrow after selecting a tab, screen reader should be able read content of selected tab.

There is a link with screen text “more” under what’s new tab which is not descriptive. It should be something like “More on what’s new” etc.,

There is a “more links” marked up as h4, it should be marked as h3 and also I recommend this to be more descriptive.

In most of the inner pages, for example About Us page on RBI website (external link) there are sub menus in the side navigation for menus like Organizations and functions; but when browsing the page with tab key using screen reader, these menus are skipped. But when I tried using up and down arrow keys at this navigation, they worked and was able expand menus using space bar.

Overall, there are some good effort put in to make the site accessible. But just some more work is needed. Please note that I have tested only home page and part of About Us page for now.