Skip to Content

Category: Accessibility Reviews

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

January 12, 2017 • Srinivasu Chakravarthula

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

July 18, 2016 • Srinivasu Chakravarthula

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

June 10, 2016 • Srinivasu Chakravarthula

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

April 29, 2016 • Srinivasu Chakravarthula

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

April 22, 2016 • Srinivasu Chakravarthula

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

May 25, 2015 • srinivasu chakravarthula

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.

Categories: Accessibility Reviews Tags: , ,

Accessibility Review: Revamped website of Reserve Bank of India

April 16, 2015 • srinivasu chakravarthula

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.