Today marks the 5th day of the 7-Day UX Challenge by Openbootcamp, a program designed to sharpen my skills as a UX designer. Each day, I am presented with exciting opportunities to explore and analyze different design aspects, pushing the boundaries of my creativity and problem-solving abilities.
I stumbled upon the Open Bootcamp UX Challenge when saw that Day 5’s task was to conduct a comprehensive accessibility audit for Slice’s website. It struck a chord with me. As a long-time user of Slice, the innovative buy-now-pay-later platform, I have experienced firsthand the positive impact it can have on one’s financial well-being. This challenge became more than just another task; it became personal. I wanted to give back to the platform that had helped me during my own financial hardships. With determination and a sense of responsibility, I embarked on a mission to improve Slice’s website and make it more inclusive for all users.
Day 05: May 19, 2023
🔥The Scenario🔥
You are an accomplished UX designer working for Slice, an innovative buy-now-pay-later platform. Your task is to enhance the accessibility of Slice’s website, making it a more inclusive and easy-to-navigate platform for all users. By conducting a comprehensive accessibility audit, you will identify the strengths of the current website and areas that require improvement.
🔥Task 🔥
Conduct a comprehensive accessibility audit for Slice’s website, evaluating evaluating the following elements:
- Navigation: Is it easy to navigate through the site using only a keyboard?
- Color Contrast: Does the site have enough contrast to be readable by people with low vision or color blindness?
- Alt text: Are images equipped with alt text that can be read by screen readers?
- Forms: Can forms be completed and submitted using assistive technologies?
- Language: Is the language used clear and straightforward, suitable for individuals with varying reading capabilities?
And compile a report outlining the findings and propose feasible solutions to address the identified accessibility issues.
What is Slice?
Slice is a leading buy-now-pay-later platform in India that has transformed the way people manage their finances. With Slice, users can shop for their desired products and pay for them in convenient installments, avoiding the need for immediate upfront payments. This innovative platform offers not only flexibility and convenience but also rewards and cashback benefits. Additionally, Slice provides a credit card that encourages responsible spending habits and offers enticing perks to its users. By utilizing the Slice platform or credit card, individuals can take control of their expenses while enjoying greater financial freedom and additional advantages.
Methodology
To conduct the accessibility audit for Slice’s website, I followed a systematic and thorough methodology. I employed a combination of automated tools, manual testing, and user feedback to gain a comprehensive understanding of the website’s accessibility strengths and weaknesses.
By utilizing these techniques, I was able to identify and evaluate various elements of the website, including navigation, color contrast, alt text, forms, and language. This comprehensive approach allowed me to assess the website’s accessibility from multiple perspectives and uncover potential issues that may hinder user experience for individuals with disabilities.
Tools Used:
- Axe DevTools: Used to identify accessibility issues and evaluate the website’s adherence to accessibility standards.
- WAVE Web Accessibility Evaluation Tool: Utilized to assess color contrast and identify potential errors.
- NaturalReader: Employed to test the compatibility of alt text with screen readers.
- WebAIM’s Color Contrast Checker: Leveraged to evaluate the color contrast between text and background elements.
- LT Browser: Used to ensure that the website is responsive and optimized for various platforms and devices, including desktop, mobile, and tablet, accommodating different user preferences and assistive technologies.
Evaluated Elements :
During the accessibility audit of Slice’s website, I focused on the following elements:
- Navigation: I thoroughly tested the website’s keyboard accessibility, ensuring that users can navigate through the site and interact with all interactive elements without relying on a mouse. I examined the tabbing order and evaluated keyboard event interactions. Fortunately, I did not encounter any issues in this regard, indicating that Slice’s website offers seamless navigation using a keyboard.
- Color Contrast: During my assessment of the website, I noticed some minor issues with the color contrast between text and background elements. While the overall contrast is acceptable, there are a few instances where it falls slightly short of accessibility standards. Addressing these specific areas of concern will further enhance readability, particularly for users with low vision or color blindness.
- Alt Text: I carefully reviewed the implementation of alt text for images on Slice’s website. I ensured that the website provides descriptive alternative text that can be read by screen readers, effectively conveying the meaning and purpose of each image. This is a positive aspect of the website’s accessibility, as it enables visually impaired users to understand the visual content through textual descriptions.
- Forms: I conducted comprehensive testing of the website’s forms using assistive technologies. I can confidently confirm that users with disabilities can successfully complete and submit forms without encountering any barriers. This demonstrates that Slice’s forms are accessible and inclusive, allowing all users to interact with the platform effortlessly.
- Language: Slice’s website makes commendable efforts to use clear and straightforward language, catering to users with varying reading abilities. The avoidance of jargon and complex terminology is a positive aspect of its accessibility. However, during my evaluation, I identified two areas where the language could be simplified further, ensuring optimal understanding for all users. Additionally, providing additional support such as tooltips or explanations in these specific instances would further enhance the user experience.
- Design for all platforms and devices: To ensure that the website is responsive and optimized for various platforms and devices, including desktop, mobile, and tablet, to accommodate different user preferences and assistive technologies, I used LT Browser. I found that the website is perfectly responsive, as shown in the proof image below.
Problems Identified:
During the accessibility audit, I encountered several issues that needed attention:
- Color Contrast: The automated tests performed using Axe DevTools and WAVE Web Accessibility Evaluation Tool revealed three serious issues and three moderate issues related to insufficient color contrast in specific areas and multiple main landmarks without unique identifiers.
- Forms: The website only provided forms for the career page, and there were no forms available for the Slice app request or Slice Pay credit card request.
- Language: The language used on the website is not completely clear and straightforward, making it unsuitable for individuals with varying reading capabilities.
- Download and Apply CTAs: The desktop version of the website did not have a download CTA or apply CTA for accessing the app or applying for the credit card. This inconsistency with the mobile and tablet versions could impact the user experience.
- Explanation of Features: Slice could enhance its website by providing more detailed explanations of its features. Highlighting the unique advantages and benefits of using Slice compared to competitors like Postpe, LazyPay, Simpl Pay Later would help users better understand Slice’s value proposition.
- Chatbot Implementation: Implementing a chatbot on the website could greatly improve the user experience by offering instant assistance and support. Users could ask questions, seek information about Slice’s offerings, and receive customer support, improving convenience and accessibility.
Solutions:
To address the identified accessibility problems, I propose the following solutions:
- Adjust the color contrast in the areas flagged as having insufficient contrast. This can be achieved by modifying the background or text color to enhance readability.
- Ensure that each main landmark has a unique identifier. This will make the landmarks distinguishable and improve navigation for users of assistive technologies.
- Maintain the use of clear and straight forward language throughout the website, making it accessible to users with varying reading abilities.
- Add forms for the Slice app request and Slice Pay credit card request, ensuring accessibility and inclusivity for all users.
- Include download and apply CTAs for accessing the app or applying for the credit card on the desktop version, maintaining consistency across different devices for a seamless user experience.
- Provide more detailed explanations of Slice’s features on the website, highlighting the unique advantages and benefits compared to competitors.
- Implement a chatbot on the website to offer instant assistance, answer user inquiries, provide information about Slice’s offerings, and offer customer support, enhancing convenience and accessibility.
Conclusion
The accessibility audit for Slice’s website has been a personal and immersive journey for me as a UX designer. By utilizing comprehensive methodologies and tools such as Axe DevTools, WAVE Web Accessibility Evaluation Tool, NaturalReader, and WebAIM’s Color Contrast Checker, I have identified key areas for improvement. These include navigation, color contrast, alt text, forms, and language clarity. By implementing the proposed solutions, Slice can create a more inclusive and user-friendly platform for all users. This challenge has allowed me to further develop my skills and contribute to meaningful and user-centered experiences.
Read the full article here