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 |
| 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:
|
Associate input elements with respective labels using |
| 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 |
| 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