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
|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
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
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!
It’s amazing to see the idea evolved from a11y pros Jennison and Joe is raising a great momentum and this year, Global Accessibility Awareness Day will be marked on 19th May, 2016. to mark calendars for every year, note that Global Accessibility Awareness Day has been set to mark on every 3rd Thursday of May every year.
Nice thing about GAAD is that it’s an event that can be celebrated at any scale; may it be small – something like talk about accessibility to your peer; may it be hug – organize a summit or event! Everything will be counted but do remember to socialize about whatever you do.
Background about GAAD
The idea of a Global Accessibility Awareness Day started with a single blog post written by a Los Angeles-based web developer, Joe Devon. Jennison Asuncion, an accessibility professional from Toronto discovered Joe’s blog post purely by accident thanks to Twitter. After reading it, he immediately contacted Joe and they joined forces, leveraging their extensive and respective networks to realize the event.
Watch this interview of GAAD co-founder, Jennison Asuncion, by Dr. Jonathan Hassell in the year 2013.
Starting in 2015, rather than using a fixed date, we invite you to help us mark GAAD on the third Thursday of May.
Some of the activities one could conduct without spending too much money are:
- Go mouseless Pick any website of users choice or something that they use on daily basis; let them experience using the website by using keyboard alone. A couple of interesting tasks could be Post a status on Facebook, Twitter or LinkedIn, Uploading photos to Google Photos or Flickr
- Go keyboardless Invoke On Screen keyboard in Windows (available for Mac as well) and use your favorite application without using physical keyboard
- Use a screen reader – Install NVDA Screen reader on Windows or Press CTRL+F5 on OS X (this will turn ON VoiceOver); turn off your screen and explore your favorite application; may be try booking for a travel! If you prefer to use your mobile device Turn ON VoiceOver on iOS devices by going to Settings -> General -> Accessibility -> VoiceOver and Turn ON. For Android, Go to Settings -> Accessibility -> TalkBack -> Turn ON. Trip: Single tap will help you navigate and double tab will help you activate
- Test your website using either WAVE by WebAIM or aXe by Deque
- Demo Screen reader / screen magnifier to your peers
- Explore Cool resources from AssisTech
If you are marking Global Accessibility Awareness Day, do post a comment here so that we will cover your event or experience in an article that we post after May 19. Also do send an email to globala11yday (at) gmail (dot) com so that information will be posted on to the Global Accessibility Awareness Day’s website.
Watch this site for some cool stuff to mark Global Accessibility Day!
Do your bit to raise awareness!