Gone are the days when people frequently visited financial institutions like banks for finance-related tasks. In the age of technology, everything finance-related can be managed at your fingertips on your mobile phone.
There’s a growing reliance on fintech products and a global shift towards digital finance, thanks to its convenience, personalisation, and financial inclusion. COVID-19 had a considerable role to play in this.
“People ignore design that ignores people.”
This is a very profound and clever quote by Frank Chimero,, the author of the book “The Shape of Design”. This quote addresses a very common issue: Accessibility. How designs usually ignore people with disabilities, users who are,
- Visually Impaired
- Hearing Impaired
- Cognitive Challenged
- Psychological and Neurological Disabilities
- Elderly
- Users with Motor Disabilities and so much more disability spectrum.
Sure, these people might fall in the minority section of society, but that shouldn’t isolate them from technological products, financial services to be precise. People with disabilities find it hard to navigate through fintech apps for them, they are puzzles.
Fintech apps shouldn’t be puzzles; users shouldn’t have to solve the entire puzzle to reach their desired destination. The app’s sitemap should flow in an obvious direction, enabling users to achieve their goals quickly and effortlessly.
What is Digital Accessibility?
Everybody manages finances; it’s not something that only non-disabled people do. Then, isn’t it common sense for fintech developers and designers to design apps in a way that they create solutions for people with disabilities, too?
According to the World Health Organisation, an estimated 1.3 billion people experience significant disability. This represents 16% of the world’s population, which means every 1 in 6 of us experience some sort of disability or the other.
When all the traditional sectors are making efforts to include disabled people, fintech, which is at the forefront of development, innovation, and empowerment, is lagging.
Challenges for People with Disabilities in Fintech
Let’s address common challenges faced by people with disabilities while using fintech platforms or tech products in general:
Visual Impairments
Users with visual impairments find navigating websites and apps difficult because of poor colour contrast, small font sizes, and inaccessible forms. For instance, people with colour blindness and low vision find it difficult to differentiate between colours in low-contrast colour schemes.
By now, it’s almost given that red is the colour of cancelling an action or deleting something, and green is for approving an action or keeping something. It comes intuitively for us to act just by looking at these colours; most of the time, we don’t even need supporting text to go with them.
Now imagine how less intuitive the interface is for a colour-blind person who can’t see these colours for what they mean. Small font sizes also make text unreadable, and users miss out on important information.
WCAG compliance issues advocate the presence of alternative text, sufficient contrast, and simple CAPTCHAs for financial websites, as these enhance a website’s usability.
Solutions for visual impairments can exist, such as compatibility with screen readers like VoiceOver for iOS and Talkback for Android. Screen readers interpret on-screen information aloud for users with low vision.
Cognitive Load
Fintech digital products are usually packed with information to explain the critical concepts of finance. This can intimidate beginners and users with cognitive impairments or neurodiverse needs.
Users who suffer from ADHD, dyslexia, or dementia find it difficult to focus, understand or retain information that may seem normal to users, but it’s complex for them. Cluttered layouts and complex navigation can create a cognitive overload for these users.
The solution to these issues is simplifying navigation, using simple, jargon-free language, and breaking down complex tasks into small, manageable steps.
Motor and Physical Limitations
Users with motor and physical disabilities cannot perform precise screen interactions required to complete payments or account setup. Without appropriate keyboard-only navigation and accessible touch targets, it can be difficult for such users to use digital products.
Platforms that rely heavily on mouse navigation or small interactive elements are not inclusive for users who need assistive technologies to use the platform. Alternative input elements like switch access devices or voice commands are the best choice for such users.
A solution for users with these disabilities can be incorporating large touch targets and making the interface keyboard accessible without needing precise mouse control.
Cultural and Linguistic Nuances
A few geographical locations have a variety of linguistic backgrounds. In such regions, language translation alone doesn’t help users; they need more support to access the app. Most fintech apps fail to provide multilingual support in regional dialects, so users comfortable with their native language only get limited access to these platforms.
In the mobile-first world, most users are comfortable using mobile devices for all their finance-related needs. Hence, support for local languages to maximise accessibility is needed.
For example, the State Bank of India (SBI) in India discovered that 72% of users over 60 struggle with understanding the information on the bank interface because of the regional language barrier and language complexity.
SBI also introduced localised language options for users in rural areas not English-speaking regions.
Legal Standards for Fintech Accessibility
Okay, so it’s given that you need an accessible website, but how do you make one? Is there a rulebook to follow? Fortunately, there is a rulebook. It has three standards for website accessibility that deal with different aspects of a website.
- American Disabilities Act (ADA)
- Section 508 of US law
- Web Content Accessibility Guidelines (WCAG)
Federal agencies and some federal contractors follow these to make their websites accessible.
American Disabilities Act
ADA compliance means that a website adheres to the standards set by the American Disabilities Act. Organisations and businesses with 25 or more employees must abide by the ADA.
ADA secures the rights of individuals with disabilities in public accommodations, employment, transportation, and telecommunications.
Section 508
Section 508 compliance means that your website meets the criteria required by Section 508 of the Rehabilitation Act of 1973. Organisations and businesses with 15 or more employees must abide by the Section 508. Not just private but most state governments and public entities come under this law.
This law requires the online availability of public documents, electronic and information technology, and web-based training. The central aspect of this law is making certain content accessible to people with disabilities.
However, Section 508 guidelines “incorporate the WCAG 2.0 Level AA Success Criteria by reference, and apply the WCAG 2.0 Level AA success criteria and conformance requirements to both web and non-web electronic content.”
Simply put, if a website follows WCAG AA or AAA standards, your site will automatically comply with Section 508 guidelines.
Web Content Accessibility Guidelines (WCAG)
WCAG compliance means your website meets the World Wide Web Consortium (W3C) standards. These standards provide an accepted standard and best practices that are important for businesses that cater to the public because they make web content accessible to all users.
The Web Accessibility Institute (WAI) publishes WCAG standards, which help designers and developers develop a framework for building accessible digital products.
If a website or app adheres to specific levels of WCAG compliance, like level AA or better, it will automatically comply with Section 508.
Best Practices for Building Inclusive Fintech Apps
But what are the actionable steps to make fintech apps accessible? This section includes best practices for designing fintech apps.
Make Log-Ins Effortless and Fast
Fintech apps are mainly used on the go. When customers can’t complete the action they want to perform, like making a payment or checking their account balance, they leave the app to return when they have more time to spend on the app (which can be never). This increases the app’s bounce rate.
From the UX perspective, biometrics is the best way to ask users to log in, as it is not time-consuming. Ensure voice and facial recognition are inclusive ways, too.
However, not all businesses support this service. No need to worry; if not biometrics, the log-in process can be made easy by incorporating UX knowledge and simple UI features such as:
- Employing a few options without overloading the login screen and causing cognitive overload on the users.
- Emphasising the elements that have the primary user goal.
- Avoid creating options with similar meanings and provide straightforward functions with clear meaning to avoid confusion.
When users land on the interface, they shouldn’t think twice about what process to follow to complete a task. Answers should be in front of them even before they start looking for them. Too many options on the screen create decision paralysis for users, so the CTA isn’t addressed.
Ideally, one screen should only ask users to perform one primary function. Make sure you know the answers to the following questions:
- Why has the user arrived at this screen?
- What’s the primary goal of this screen?
- Is it easy for the user to perform the required action?
- What could possibly confuse your users?
When you’re done emphasising the primary login option, pay heed to the secondary option. What would users look for other than the login option?
Users might need the “Help/Support” feature as they struggle with logging in and may need help. A simple “Help/Support” option would do, without cluttering the screen with several phone numbers and a list of branch offices.
Navigation by Sound With Screen readers
Screen readers rely on web pages’ HTML structure and semantics to understand and interpret the content. They also use keyboard shortcuts, gestures, and commands to interact with elements like links, buttons, forms, or menus.
- Visual Hierarchy
You can’t ignore visual hierarchy because screen readers rely on a top-down structure of headings and subheadings. A collaboration of designers and developers can help in writing out the HTML in the correct order so that the screen readers interpret the design in that order.
While CSS determines the layout and appearance of a page, screen readers rely on the top-down structure of HTML on any platform (mobile or web). This structure creates a flow/map for the screen reader to follow when reading the content. Hence, for the screen reader to read the content in the intended order, designers must collaborate with developers.
- Test your design with screen readers
After you make your design compatible with screen readers, it’s time to test it. Use popular screen reader software such as NVDA, JAWS, or VoiceOver to understand how your web pages sound and feel for your users.
You can use browser tools such as ChromeVox or the Web Developer toolbar to inspect the HTML code and accessibility features of your web pages.
This software helps you fix your design in case of issues, such as missing alt text, unclear links, inaccessible forms, or hidden content.
- Follow the WCAG guidelines.
Some WCAG guidelines are dedicated to screen reader compatibility, they include providing text alternatives for non-text content such as images, icons, or charts. These guidelines ensure proper utilisation of headings and landmarks to organise and label content; links should be descriptive and unique text.
Labels and instructions should be given for form fields and controls using ARIA attributes to enhance the semantics and interactivity of web elements. Content should be adapted to different screen sizes, orientations and zoom levels to improve readability.
Colours, shapes, and sounds should not be the only means of conveying information, as people with disabilities will not be able to interpret data through these means.
Screen readers work efficiently when the content is readable and comprehensible. Simple language, clear typography, and consistent navigation make it easy for screen readers to read the content. Content should also be compatible with current and future users and assistive technologies.
- Involve screen reader users in your design process
Sure, you can conduct user research and usability testing before and after with screen reader users. Feedback sessions with screen reader users are beneficial for gaining their insights, preferences, and expectations.
However, isn’t including them in the design process a good idea? To create accessible and inclusive designs, recruit screen reader users as co-designers and consultants on your design team.
This allows designers to learn from the perspectives of the target audience, validate their assumptions, and create an environment of co-creation.
Voice Commands for Quick Access
Incorporating voice commands requires knowing who will use them and for what purpose. Then, user research will be conducted to determine what users want to achieve and how they prefer to communicate.
Interviews, surveys, and usability testing are some methods for identifying potential users’ goals, pain points, and preferences. Consider the diversity of your user base, such as age, language, accent, disability, or literacy level, and understand how this affects their voice interaction.
- Define your use cases.
In the next step, define the specific use cases and scenarios for when the users will use the voice interface. Decide what tasks and functions the users will use voice commands for, and ensure that these tasks align with your business objectives and value proposition.
List the limitations and advantages of voice commands on your interface and convey that to the users. Also, explain how voice as a modality compares to other input methods such as touch or keyboard.
For instance, voice is the ideal way to input information when using hands-free or eyes-free situations, such as driving or working out in the gym. However, voice commands are less functional for more complex and sensitive tasks, such as entering bank passwords and reviewing financial statements.
- Design your conversation
Next, you must design a conversation between your voice interface and your users. This process includes crafting dialogues, prompts, responses, and feedback to guide users through voice interactions.
Decide on the tone, personality, gender, and style of your voice interface, keeping your brand identity and voice in mind. For instance, a fintech app such as Splitwise, which youngsters usually use to split the bills between them, would work fine with a friendly, casual, humorous, yet informative tone.
On the other hand, a more formal, professional, and serious tone should be used for a fintech app such as Paytm, which is used by the general public and even businesses.
- Develop your voice technology
Now is the time to develop the voice technology that powers the voice interface. Choose the tools, platforms, and frameworks that will allow you to implement your voice interface’s voice recognition, natural language processing, speech synthesis and dialogue management features.
Make sure you know different criteria about the voice technology that you are using, such as performance, security, and compatibility. It should integrate well with your existing system and infrastructure.
For instance, a cloud-based service such as Amazon Lex or Google Dialogflow is a good choice as it offers scalability and access. However, different industries have different privacy regulation standards, so ensure that the service complies with the data protection requirements of your specific industry and region.
- Test and iterate your voice interface
Now is the time to test what you have created for the voice interface. Conduct usability tests and collect feedback from real users. Analyse the metrics and insights collected. This step will validate your process and test usability, functionality, and design effectiveness.
Identify any gaps, issues, or errors in the user experience. Methods you can use to collect feedback are user interviews, analytics, and voice logs. After gathering feedback, you can iterate based on the insights you gain and optimise it further.
Colour and Contrast Improve User Experience
People who can see clearly can figure out what colour represents what mood and tone when used in different elements to better understand actions. People who can’t see clearly (such as the colour-blind) use contrast in colours to make sense of the elements.
Sufficient colour contrast between elements can help low-vision users see and use your app. Colour contrast is essential for users to distinguish between text and non-text elements. Higher contrast makes the imagery and text easier to see, while low contrast can make it difficult for users to differentiate between bright and low-light conditions, such as on a very sunny day or at night.
- Contrast ratios
Contrast ratios represent how different one colour is from another colour that’s used with it. The contrast ratio between a colour and its background ranges from 1-21 based on its luminance (the intensity of light emitted), according to the World Wide Web Consortium (W3C). The ratio commonly lies between the range of 1:1 to 21:1.
The higher the ratio (the more significant the difference between the numbers), the greater the relative luminance between the colours.
- Clustered elements
Design elements that are clustered together require the user to distinguish them. Some non-text elements, like button containers, should have a contrast ratio 3:1 between their container and background colours.
Elements that stand alone, like the Floating Action Button, are apart from other elements on the screen. They don’t benefit from the 3:1 contrast between themselves and the background elements.
Role of Landmarks and Headings in UX
Effective content placement and UI layout can improve navigation and comprehension. In web accessibility, “landmarks” are large blocks of content that establish the high-level structure of the design layout.
They’re a set of Accessible Rich Internet Applications (ARIA) roles that provide easy access to, and essential meaning for, common content areas of a web page. This includes distinct regions of a webpage, such as the header, navigation, main content, and footer.
In ARIA (Accessible Rich Internet Applications), these landmarks help Assistive Technologies (AT), like screen readers, navigate and understand the page’s structure.
This is done so the audience understands the content in a predetermined order, and the design gets translated into a linear experience. This improves the accessibility and readability of the digital content.
- Identifying landmarks and headings
There are eight landmark roles: navigation, search, main, banner, complementary, content info, region, and form.
Navigation: This section contains lists of navigation links (where users can go within the website). Multiple subheadings are usually present, so they need labelling.
Search: Use the search field for a quick search.
Main: The main content area should only be one, as defined by UX.
Banner: Typically, the header and content are repeated from page to page, often containing navigation and toolbars. There should be only one.
Complementary: A sidebar or aside from the main content that can stand alone without the main content.
Content info: Typically, the footer contains information describing the site and its content (for example, copyright). There should be only one.
Region: Content regions are important content blocks. They can be nested inside the “main” landmark. Regions should be labelled with names that make the purpose of that region clear.
Form: Takes and stores user info.
- Add accessibility labels
Add clear and specific labels to landmark roles that appear multiple times (typically regions or navigation). This will help users differentiate information.
Labels should be added to all regions and landmarks where a label can better explain the meaning, such as to explain the contents or purpose of a sidebar.
- Define Headings
As mentioned above, headings help maintain the page’s hierarchy. Identify headings based on content hierarchy, and don’t be swayed by visual styling.
Headings should not skip a level; for instance, they should not go from H1 to H3 and ignore H2. There are 6H’s available (H1-H6), so make sure you use all of them in sequential order. Remember that in a single-page title, there’s only one H1.
Why Target Size Matters
Users who cannot see the screen or struggle with small touch targets while tapping elements need accessible target points.
- Touch and pointer target sizes
Touch targets appear on the screen and respond to user input. They extend beyond the visual bounds of an element; for example, an icon may appear to be 24 x 24dp, but the padding surrounding it comprises the entire 48 x 48dp touch target.
On most platforms, touch targets at least 48 x 48dp in size, which results in a physical size of about 9mm, regardless of the screen size.
The recommended target size for touchscreen elements is 7-10mm. Large touch targets enhance accessibility for a wide range of users.
- Target Spacing
Target points with 8dp of space or more are ideal as they promote a more balanced look.
Mastering Focus Order and Keyboard Navigation
For people with disabilities, there should be more input methods and ways to interact with the digital product than just the traditional mouse or touch screen. Navigation should be supported by a keyboard, screen reader or other assistive technology. Users should be able to achieve their goal by using tab, arrow, and other standard navigation keys.
Flow can be simplified by strategically ordering tab stops and reducing page complexity.
- Determining User Flows
Some people cannot use a mouse but can use a keyboard; they often have motor disabilities, tremors, or visual impairments. Such users struggle to make fine motor movements or see a cursor.
Hence, keyboard navigation is their best bet; however, user flows should be predetermined. You can group the product use cases into primary and secondary user journeys. How you prioritise these use cases will affect the priority of user flows.
- Define the initial focus and component level focus
Initial focus refers to the element currently the target of user interaction. For instance, on Paytm’s sign-in page, the QR code is the initial focus point on the screen.
Any user who sees this screen will focus on that first, even though there is information surrounding the QR code. It only makes sense to put the user’s initial focus on the element that supports the most common user goal.
The tab key on the keyboard moves focus between interactive elements. A defined initial focus on a screen with multiple interactive elements, like a complex card or a dialog helps the tab key to move quickly.
Making Text Adjustable
People with low vision or those who prefer large text should be able to scale up the text size in a user interface. Text resizing helps people who have difficulty processing written words to find it easier to read; it limits interruptions, and their senses don’t get overwhelmed.
This adjustment is often performed through an OS setting or an in-app option on a device. UIs should offer a minimum 200% increase in text size.
Even when a particular text is resized, most components remain the same. Text and line height scale up proportionally, and padding and spacing between elements remain constant.
- Increase container size
The containers that contain text should be resized so that the text doesn’t overlap, clip, or truncate.
- Reflow the layout
When components grow very long, consider reflowing the layout. Components should be stacked on top rather than placed side by side when larger text needs to be accommodated in one place.
Inclusive Approaches to User Authentication
The first step a user takes when using a fintech product is user authentication, and users find it hard because they can’t complete this process. Hence, the goal is to create an inclusive authentication process that caters to the needs of disabled people.
There’s an urgent need to develop CAPTCHA alternatives, including,
- Audio CAPTCHA for visually impaired users.
- Biometrics like fingerprints, face, or voice recognition
- Time-based heuristics are quick and easy to use by all users
There are also multifactor authentication options, such as SMS-based authentication, email OTPs, push button notifications, etc.
The Ongoing Quest for Testing and Improving Accessibility
After incorporating the best practices of accessibility in your digital product, accessibility testing is important to ensure that the website or app is helpful for people with disabilities. Different methods can be used to perform accessibility testing, such as:
Manual Testing
As the name suggests, manual testing involves hands-on product exploration, using assistive technologies like screen readers, magnifiers, and voice recognition. Testers mimic real-life scenarios to identify potential barriers in real-time.
Automated Testing
Automated testing uses specialised tools to scan accessibility issues on the surface of digital products. These tools quickly find issues like missing alt texts for images, improper heading structures, or insufficient colour contrast. However, automated testing can’t detect other issues as they need manual monitoring.
Heuristic Evaluation
Heuristic evaluation helps to assess a product against all standardised guidelines. This method provides insights into how well a product adheres to the recognised accessibility standards.
Tools That Keep Accessibility on Track in Fintech Apps
Here are some of the best accessibility testing tools on the market.
WAVE
Web Accessibility Evaluation Tool (WAVE) is a browser extension and suite of web accessibility testing tools developed by Web AIM. It helps identify and improve accessibility issues on web pages and ensures that the digital product adheres to the Web Content Accessibility Guidelines (WCAG).
WAVE provides detailed reports on potential accessibility barriers, making it a helpful platform for inclusive design.
Siteimprove
Siteimprove is a common name in the UI and UX industry. It helps enhance websites’ digital accessibility by evaluating them against global accessibility standards, including WCAG.
Features like automated scans for accessibility issues, real-time monitoring, and prioritised recommendations for improvement make it one of the designers’ first choices.
Lighthouse
Lighthouse is an open-source automated testing tool developed by Google. It evaluates web pages for accessibility, performance, and SEO. Lighthouse can be integrated into Chrome DevTools and is also available as a browser extension.
It looks for compliance with Web Content Accessibility Guidelines (WCAG) principles. Actionable suggestions for improving accessibility include enhancing keyboard navigation, ensuring proper semantic HTML, and addressing contrast-related issues.
The Business Benefits of Accessible Fintech Digital Products
Making fintech apps accessible isn’t just for social charity; it also brings business. How? Let’s learn.
Reaching New Markets
The higher the accessibility, the broader the business’s customer base. This also increases the company’s financial influx as the doors are opened to a larger audience. Potential customers who couldn’t access financial services due to barriers can adapt to new accessible interfaces.
Tech-savvy customers will leave a footprint on your business anyway, but they are people who need features like easy navigation, larger text options, and high-contrast visuals.
Easy navigation, more extensive text options, and high-contrast visuals facilitate tech-savvy users and accommodate audiences not so well-versed in technology.
HSBC Bank noticed that its user base was primarily youngsters and wanted to gain customers over 50. The design and UI UX writing teams worked on the website’s written content, which improved the readability of its banking app. This made the information more comprehensive for elderly people.
There are other ways the ageing population is isolated in countries like India. A big chunk of India’s population is aged people. In 2022, the World Bank released a statistic stating that 6% of India’s population is aged 65. This calls for initiatives to improve accessibility for this demographic.
It would come as a surprise, but only 15% of Indian banks follow the WCAG compliance standards. If the fintech industry decides to make amends, enhancing accessibility can help them tap into a new market.
Building loyalty through trust and accessibility
When users think that a business cares enough about its potential customers to adjust its design according to their accessibility needs, they start to trust that brand. This speaks volumes about how valuable customers are to a business.
The inclusive nature of a brand stops people from going to your competitors even if their offer is better than yours. Accessible designs foster customer relationships.
Reducing churn by removing barriers to engagement
Nowadays, everyone has the attention span of a goldfish. Studies show that around 40% of users will abandon a website with a poor user experience. This statistic means that people are very quick to leave platforms that make them wait and don’t serve their accessibility needs.
Completed transactions save a ton of customers who would otherwise be lost to a design that fails to be seamless.
Simple accessibility enhancements—like larger buttons, intuitive layouts, and voice command options—create a smoother experience, especially for users with motor or visual impairments. These adjustments can significantly reduce app abandonment rates, reinforcing a bank’s commitment to inclusivity and enhancing its reputation as a forward-thinking provider.
Conclusion
Accessibility isn’t a one-stop destination; designers and developers can build an accessible product and be done with it forever. Even after applying all the required accessibility practices, it needs constant auditing. Designers need to keep learning and develop empathy for disabled people to make better accessible fintech apps and websites.
Treat accessibility as a continuous process of learning, testing and iterating. Hone your UX design skills through online courses, books, podcasts, blogs, or communities. Fintech apps should not just be used by the majority section of society while ignoring minorities.
Frequently Asked Questions (FAQs)
1. What are the important features of a fintech app that increase accessibility?
To ensure accessibility in a fintech app, the following features can be incorporated,
- Screen Reader Compatibility
- Keyboard Navigation
- Colour Contrast and Test Size
- Alternative Text for Media
- Error Handling
- Voice Command Integration
These features make it easy for people with disabilities to use fintech products, giving them equal opportunities to grow their financial independence.
2. What are compliance standards in fintech?
There are established accessibility standards, like the Web Content Accessibility Guidelines (WCAG) 2.1 and the Americans with Disabilities Act (ADA). After conducting an accessibility audit to recognise the gaps and areas for improvement, tools can be used for automated testing. In the user testing phase, get real-world feedback from people with disabilities to incorporate those insights into the product.
