Pixel Guides - user experience and accessibility specialist

Accessibility Visual Design

Rethink Mental Health Charity

A crucial rebrand with a change in visual identity and accessibility to meet WCAG 2.1 standards to ensure all users regardless of barriers could see, understand and engage with the content.

Sector

Mental Health, Well-being.

Objectives

Ensure the rebrand was accessibile and compliant with WCAG 2.1AA standards.

Rethink Mental Illness, the charity on a mission to bring about meaningful change to our society and how we view and support those with mental illness. Their rebrand came at a time where new EAA (European Accessibility Act) will become compliant in June but also their research had shown users felt they were “commercial” and “cold” definitely not what they were trying to achieve.

Meeting WCAG 2.1 AA Standards

To meet WCAG 2.1 AA standards the website must be built, amended and adapted to be robust. It’s essential for all content on the website to be designed and built using the latest web technologies and design best practices whilst also being thoughtful of rethink’s users. This includes ensuring the website is perceivable, operable, understandable, and robust for all users, and can work with a range of assistive technologies, such as screen readers and voice recognition software.

For rethink I tested their site as if I were a user who had severe visual impairment therefore navigated their website with screen readers reading content aloud, I set tasks to see if I could get help for myself, find information and make a donation. This naturally tested what it would be like for a user with a motor disability or someone using a keyboard to navigate a site which meant there was a real focus on content order, headings, labels, non-text content, imagery and video.

New Year, New Visual Identity.

The new colour scheme was chosen as the combination was warmer and friendlier which conveyed the mission and compassion of the sometimes difficult issues to discuss and campaign for.

They were also selected as they are good colour combinations for those who are visual impairments as there is a strong contrast.

Screen Readers

Screen readers convert text and visual information into audio, ensuring users who are visually impaired are not exclude. Websites that fail to support screen readers create barriers that exclude low vision users from information, services, and opportunities - potentially violating both WCAG standards and legal requirements.

It's vital to incorporate a page structure and elements, to make content more understandable, one area can be standardise and implement a logical heading hierarchy. For example, one header 1 (H1) for the main topic, header 2s (H2) for major sections, and H3s for subsections. We as users don't see the H1 tags but screen readers use this logical code to read aloud content for visually impaired users. It's important to never skip heading hierarchy and maintain the logical structure, not just the style. On some rethink pages, subsections were coded as H2 but styled to 'look' like subsections. While users without visual barriers can determine the difference, for a computer this content is read incorrectly or sometimes missed.

Keyboard Users

Keyboard accessibility is essential for Rethink to meet WCAG 2.1 AA compliance. Many users cannot operate a mouse due to motor disabilities, visual impairments, or personal preference. For a Rethink Mental Health, it’s essential to ensure users can complete keyboard navigation as it respects user autonomy, reduces frustration, and demonstrates inclusive design which is essential qualities that reflect the compassionate care values of mental health services.

Another thing to consider for keyboard and screen readers is to provide clear alt text for images and mark decorative elements otherwise these will be ignored by assistive technology, remembering that screen readers announce all content unless properly coded.

Delivery

Rethink Mental Health were working in partnership with a software company to implement the changes I have identified. During this time a feedback was directly posted to their trello board so project managers could approve cards and move them ready for developers to pick up. On the cards there was clear direction of which aspect that had

been identified as needing amending to meet WCAG 2.1 AA standards alongside additional notes and video or imagery to represent how users with disabilities would interact with the site.