To better understand the online challenges faced by people with limited or no vision, I conducted an in-depth interview with an individual living with macular degeneration. This conversation highlighted how frustrating and inaccessible the digital world can be for visually impaired users. There are few consistent guidelines for digital accessibility, which creates a “wild west” experience where users must repeatedly figure out navigation methods on different websites. Recognizing that each user and screen reader operates differently, I prioritized implementing technical support and structured information that would enhance accessibility.

In line with the EU’s upcoming 2025 legislation for accessible digital content, I redesigned the information structure to improve the website's logical flow. The previous site structure had three layers in the main navigation, leading to unnecessary complexity. I streamlined this to two layers, reducing the total links from 50 to 32 and removing redundant pages. By introducing a table of contents at the start of each page, users can quickly scan and locate information, a crucial feature for those using screen readers.

Accessibility

The new design incorporates ARIA (Accessible Rich Internet Applications) attributes, which are W3C specifications that help screen readers interpret web content. The correct use of ARIA attributes allows visually impaired users to navigate more intuitively. For instance, I used the aria-label attribute on the logo, indicating to screen readers that it links to the homepage, eliminating the need for a separate “home” button in the main menu. The aria-expanded attribute signals when dropdowns are opened, guiding users smoothly through the navigation.

Beyond ARIA, I optimized metadata, alt text, fonts, contrasts, breadcrumbs, and anchor links, ensuring that the website is accessible for everyone. These accessibility enhancements also improve SEO, increasing the site’s visibility and driving more traffic.

UI

Working within the existing brand style, I created a navigation system tailored for accessibility. The main menu features three components to guide users effectively: a hidden navigation bar visible only to keyboard users, a black “toolbar” for search and visual adjustments, and a white “main navigation” bar with dropdowns. This setup allows users to make text and color adjustments for easier reading and quick access to specific sections.

The dropdown menu design replaces a long list of items with categorized columns, allowing users to identify relevant sections at a glance. On mobile and tablet, the submenu expands beneath the main button, rather than sliding from the side, preserving the sense of staying “on the same page” and maintaining visual consistency.

The redesigned navigation and accessibility-focused UI ensure that the MaculaVereniging’s website provides a smoother, more inclusive experience, making crucial information more accessible for everyone.