Toolkit
Toolkit is an initiative by the Norwegian Human Rights Academy designed to educate and engage youth, teachers, minorities, and activists on human rights topics across Norway and Europe. It offers a curated collection of activities and workshops on themes such as democracy, citizenship, and cultural identity, allowing users to build their own programs tailored to different audiences and topics.
My role
UX & UU designer
Duration
September 2023 – December 2023
Read-time
5-6 minutes
1. Statement and objectives
Improve text and link readability.
Enhance accessibility without compromising design.
Incorporate more icons for better visual communication.
Toolkit received feedback indicating that its website did not meet accessibility standards. They therefore decided to make changes to ensure the site became fully accessible for all users, removing any potential barriers.
Insight and process
Due to budget constraints, we carefully managed our project hours. We engaged with a representative from Blindeforbundet to understand navigation challenges on the website. This conversation revealed several accessibility issues, including disappearing text linked to a complex hover function.
Following this, we conducted internal testing using Voice Over on both mobile and desktop, along with keyboard navigation via the tab key to identify inaccessible elements. By synthesizing findings from user interviews and internal testing, we pinpointed key areas for improvement in the app's redesign.
3. Solution & design enhancements
The previous CTAs presented a challenge for users, as the text on the cards was replaced with “See task” upon hovering. This design flaw meant that with cards being quite large, users zoomed in beyond 200% would struggle to locate any information. Such an issue significantly hampers usability and accessibility, making it essential to ensure that critical information remains visible and clear at all zoom levels.
Accessibility problems
Accessibility improvements
The solution involved changing only the text color upon hover while keeping all relevant information visible where users expect to find it. Additionally, the call-to-action (CTA) was repositioned directly beneath the displayed information, ensuring that users can easily access it without losing context. This approach enhances usability and maintains clarity, allowing users to interact with the content effectively.
While we addressed visible issues on the website, we discovered underlying coding problems. User testing with VoiceOver and keyboard navigation revealed that the screen reader identified elements not perceivable to sighted users, providing information that should not be accessible.
The Solution:
ARIA Roles: Assign appropriate ARIA roles to assist screen readers effectively.
Alt Text: Use descriptive alt attributes for images to convey their content to visually impaired users.
Semantic HTML: Implement proper HTML tags (e.g.,
<header>
,<nav>
,<main>
,<footer>
) to enhance content structure.Label Elements: Correctly associate
<label>
elements with their corresponding<input>
fields.Keyboard Navigation: Ensure all interactive elements are accessible via keyboard, which may involve adjusting tabindex properties.
Syntax and accessibility
4. Results and feedback
After implementing the website improvements, we received positive feedback from the representative of Blindeforbundet, confirming that the site was significantly more accessible. This validation indicated that we successfully achieved our goal of enhancing usability for all users.
Takeaways & reflections
Reflecting on this case, the process highlighted the critical importance of both user feedback and thorough testing in identifying accessibility issues. Engaging with representatives from Blindeforbundet provided invaluable insights, revealing how unseen coding problems could mislead screen readers. The solution involved implementing ARIA roles, alt text, and semantic HTML, emphasizing a holistic approach to web accessibility. This experience reinforced my commitment to creating inclusive designs that cater to all users, ensuring that digital spaces are welcoming and navigable for everyone.