Day 22 of 30 Day UI/UX Design Challenge: Diving Deep into Accessibility! 🕵🏻‍♀️

Posted
Tags
UI/UX 30 Day UI/UX Design Challenge
Share

🎨 Today’s Task

Conduct an accessibility audit for pickuplimes.com

Today’s task was both challenging and valuable. Accessibility is a crucial aspect of design, and I learned a lot from this deep dive!

🚀 My Process

I followed the Accessibility Insights for Web assessment guidelines closely to ensure I covered all necessary checks.

🧠 Challenges and Solutions

  • Finding the Right Guidelines: Initially, I wasn’t sure which accessibility guidelines to follow, but my partner introduced me to a helpful tool that streamlined the process.
  • Time-Consuming: Reading through all the accessibility tests took me over three hours, partly because I’m a slow reader. But it was time well spent!

🖼️ The Final Result

A screenshot of pickuplimes.com with highlighted accessibility issues

Here’s a list of the accessibility issues I identified based on the task guidelines:

Color Contrast Issues

  • Headline: The white text on a blurred background in the headline lacks enough contrast to be easily readable.
  • “New” Animation: The colour contrast in the app menu’s “New” animation is not enough.

Keyboard Navigation Issues

  • Search Button: It cannot be focused using the keyboard.
  • Header Navigation: Users should be able to navigate between slides using the arrow keys.
  • “More” Button: This isn’t a button element, so it’s inaccessible via keyboard navigation.
  • Focus Outline Visibility: The “Learn more” button’s focus outline isn’t clear enough.
  • “Go to the Top” Button: This button can’t be focused using the keyboard.
  • Clickable H2 Elements: Some H2 elements that are links should visually indicate that they are clickable (e.g., by using an underline or arrow).
  • Search Bar: It lacks a visible focus outline.
  • Mobile Slides: The slides don’t have visible focus outlines, making navigation difficult.

Heading Structure Issues

  • Article Description: It’s currently set as an H3, the same as the title, but it should be an H4 or a paragraph to maintain a clear hierarchy.

Alt Text Issues

  • Alt Text for Images: Some alt texts aren’t descriptive enough, such as the header image’s alt text, which simply says, “Banner image 2.” These need to be more self-explanatory.

Form Labels and Error Messages

  • Checkbox Error Handling: An error message should appear if the checkbox isn’t ticked when the sign-up button is pressed.
  • Email Input Validation: When the email input is incorrect and the sign-up button is pressed, an appropriate error message should be displayed.

Other Accessibility Issues

  • Moving Content:
    • The “New” animation can’t be stopped, which can be problematic for users with certain disabilities.
    • Header slides should have the option to pause automatic sliding, as this feature is often inaccessible.
  • Spacing:
    • On tablets, the cards don’t have enough vertical spacing, making it hard to see which text belongs to which image.

💡 What I Learned Today

I was surprised by the number of accessibility issues that can exist on a website that looks very beautiful on the surface. It was a real eye-opener 😯

⏰ If I Had More Time

I’d start brainstorming solutions to these accessibility issues. Fortunately, that’s part of tomorrow’s task, so I’ll dive into it then ☺️

💌 Any Thoughts?

What are you working on these days? I’d love to hear your thoughts on my design or any advice you might have!

Thank you for following along on Day 22 of my challenge. See you tomorrow for Day 23!

With love and light 🫶🏻

Yoshie

P.S. We made an amazing zucchini lunch today! I feel so lucky to have a partner who’s such a great cook 😋

A plate with fried zucchini, tofu and rice

Related articles

Day 5 of 30 Day UI/UX Design Challenge: Meditation app with Psyduck! 🐥

🎨 Today’s design task Today was probably my most challenging task yet — designing a mobile meditation app featuring Psyduck! As a former web developer, mobile apps are new territory for me, but combining meditation with one of my favourite Pokémon made it exciting. 🚀 My design process Thoroughly analysed the task requirements Sketched initial ideas on my iPad using Freedom app Researched …

Day 23 of 30 Day UI/UX Design Challenge: Making Accessible! 👀

🎨 Today’s Design Task I was excited about today’s task because I got to turn the accessibility issues I identified on Day 22 into actual design improvements! 🛠️ Today’s challenge: Choose one page or screen and create a redesign that addresses the accessibility issues: Sketch or create a digital mockup of your improved design Focus on fixing the problems you identified while maintaining the …

Day 18 of 30 Day UI/UX Design Challenge: Logo Design for Tell Japan! 🌱

🎨 Today’s Design Task Today’s challenge was something completely new for me—designing a logo! I chose to redesign the logo for TELL Japan, an organization I’ve supported in the past ✏️ This is what the current logo looks like: 🚀 My Design Process Research: To gain a deeper understanding of TELL Japan, I reviewed its mission and services. Concept Development: I decided to retain their signature …