UNSEEN Gallery is an international series of photo exhibition and panel talks about long distance running. Past events took place during race events, such as the Berlin Marathon, Bali Marathon, and New York City Marathon. For the 2024 edition the main topics were diversity and inclusion, as well as the 50th anniversary of the Berlin Marathon.
We were tasked to translate the content of the physical magazine to a web-based format while maintaining the original design’s aesthetic. The magazine focuses on inclusion, so the online version naturally had to be accessible and user-friendly for all audiences.
The website design reflects the magazine’s color scheme, typefaces used, and the main key visuals, while transitioning it to a responsive design system that ensures the site displays correctly across various screen sizes. Instead of replicating the magazine’s side-by-side bilingual layout, the website features separate language versions to reduce visual clutter and enhance readability. The CMS was customized to offer editors a range of text–image layout options. This flexibility allows for greater editorial control, adapting the content to fit various formats as needed.
Given the image-heavy nature of the magazine, considerable effort was devoted to optimizing page performance. Techniques such as responsive images, lazy loading, asset pre-loading, caching, and efficient file formats were employed to ensure fast loading times and optimal image display, also in sub-optimal network conditions.
Each page of the website includes a table of contents, which serves multiple purposes: It helps users visualize the structure of the content and facilitates navigation, particularly for those using keyboard-based navigation or assistive technologies such as screen readers. This feature is especially important for visually impaired users, as it provides clear and accessible navigation options.
The accessibility strategy was founded on well-structured, semantic HTML and careful element ordering, ensuring that content was logically presented for both visual users and assistive technologies like screen readers. The content was organized to support readability and improve accessibility for users relying on assistive devices.
Visualizing focus order during testing
Keyboard navigation in action
Another critical component was the consequent use of alternative text for images and visual content. The descriptive alt texts provide context and meaning for users who are visually impaired or rely on screen readers.
ARIA annotations were added where needed. ARIA landmarks and roles enhance interactive elements like navigation menus, tables of contents, and buttons, providing screen reader users with additional context for easier navigation and interaction with dynamic content.
The site also respects user settings such as prefers-reduced-motion, prefers-contrast, and prefers-reduced-transparency for some details, where the visual design and accessibility could not be fully reconciled.