Rijksmuseum website

Enhancing the Rijksmuseum Experience: Elevating Accessibility with WCAG Standards

Introduction

As part of a transformative project, three Pratt Institute graduate students embarked on redesigning the Rijksmuseum's website to significantly boost its accessibility. This initiative, driven by a commitment to inclusivity, involved meticulous research into Dutch accessibility standards and WCAG recommendations, comprehensive WCAG compliance evaluations, and creative redesign efforts. Through detailed design annotations, innovative proposal development, and dynamic prototyping, the team aims to present a final project that not only meets but surpasses accessibility standards, ensuring that everyone can fully engage with the cultural treasures of the Rijksmuseum.

Research Duration

April - May 2023

Role

Accessibility Audits
UX Designer
UI Designer
Prototyping

Tools

Figma, Google Docs, Google Spreadsheets, Zoom, Google Presentation, Adobe Photoshop

Why Enhancing the Rijksmuseum Website Accessibility Matters

Despite the Rijksmuseum's commitment to physical accessibility, our investigation reveals that its website falls short of the comprehensive accessibility standards mandated by the Dutch government for public cultural institutions. These standards emphasize a user-friendly, accessible, well-designed, and easily discoverable web presence. Our aim is to scrutinize whether the Rijksmuseum's website meets these essential criteria and to identify opportunities for improving the digital experience for all users, ensuring that the museum's virtual offerings are as inclusive and accessible as its physical venue.

Methodology of website analysis

1

Determine WCAG compliance

2

Understand accessibility in the Netherlands

3

Evaluate issues other than WCAG compliance

4

Annotate current website

5

Propose website redesign to address accessibility issues

6

Annotate proposed redesign

Detailed Findings

After assessing WCAG compliance to determine the accessibility issues, we did a design annotation of the current website. The four pages that were inspected failed multiple WCAG accessibility standards. We found a total of 32 accessibility issues on the current website. Based on 4 major usability issues identified, we designed potential solutions for the following problems: website navigation, visual design & imagery, and interactivity of media.

WCAG elements of the original design

Perceivable: Information and user interface components must be presentable to users in ways they can perceive.

Perceivable

Icons were labeled

Operable: Users must be able to operate the interface.

Operable

A back button was provided

Understandable: User can read and comprehended the content without undue effort.

Understandable

Primary language identifiable and label texts visible

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents including assistive technologies.

Robust

Scope to look into HTML validation

Website Navigation

One Hundred Masterpieces text is applied as the white bold on the portrait of Vincent van Gogh with a small icon of play invisibly. Limitations in the visual design prevent achieving the required contrast ratio.
1a. Original Design

It is difficult to understand the navigation because it does not behave predictably. For consistent and simple web page navigation, there is no logo with a homepage link. Limitations in the visual design prevent achieving the required contrast ratio for readability.

Redesign of the website navigation - 1
Redesign

The redesign uses the logo as a home button to appear on every page and makes the top navigation constant across all pages. The back button is replaced by breadcrumbs. By providing a solid background for the navigation, the redesign raises the contrast ratio for the text.

1b. Original Design

The hamburger menu was not in intuitive tab order with some items duplicating top menu items. Some pages had no top navigation menu, and was redundant for all users including those who use screen readers.

Website Navigation
Redesign of the website navigation - 2
Redesign

The hamburger menu is removed. For easier navigation and better site structure understanding, significant categories are added to the top menu and a site map to the footer.

Visual imagery

One Hundred Masterpieces text is applied as the white bold on the portrait of Vincent van Gogh with a small icon of play invisibly. Limitations in the visual design prevent achieving the required contrast ratio.
2a. Original Design

The visual design and imagery are an obstacle to perception. Poor contrast ratio for readability is brought on by text on images. The distracting animation has no option for pausing or stopping.

Redesign of the visual imagery
Redesign

The redesign suggests increasing the contrast ratio by utilizing a solid background to make the text easier to read. It uses only relevant media, replacing animation with static images and providing a transcript with video content.

Original Design of the visual imagery - 2
2b. Original Design

Since there isn’t much white space, the content layout encourages in tiresome scrolling, and animated images of artwork arranged in a grid zoom in and out for decorative purposes only.

 Visual Imagery
Redesign of the visual imagery - 2
Redesign

The redesign uses more white space which is especially important for the users with disabilities. It has a two-column grid to reduce scrolling, making it easier for users with physical disabilities.

Interactivity of media

Original Design of the Interactivity of media
3. Original Design

The interactive elements did not operate in a consistent manner since the hero image was not consistently linked to relevant content and did not signal a hot spot.

Redesign of the Interactivity of media
Redesign

The redesign’s interactive features include clearly labeled buttons that open predetermined related content, and the removal of any image links but the addition of image alt text.

WCAG elements of the redesign

Perceivable: Information and user interface components must be presentable to users in ways they can perceive.

Perceivable

Add alt text and video transcript, add visual contrast, remove unnecessary animation

Operable: Users must be able to operate the interface.

Operable

Improve keyboard navigation, any moving images need user controls, scope to improve how users navigate and determine where they are

Understandable: User can read and comprehended the content without undue effort.

Understandable

Use consistent navigation

Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents including assistive technologies.

Robust

Investigate HTML validation

Navigating Accessibility in Design: A Roadmap to Learning Success

This project offered an insightful exploration into the realm of accessibility, juxtaposing American and international standards, and revealing where the Rijksmuseum's website falls short against WCAG criteria. While the physical museum excels in accessibility, the website's limitations highlighted the necessity of considering diverse user needs.

I learned that assessing a website's accessibility without considering the specific requirements of different disability groups could lead to an incomplete evaluation. The complexity of diverse user needs emphasizes the importance of targeted accessibility assessments. My experience, influenced by my own deafness, underscored the challenge of adopting a universally inclusive approach to design.

This journey not only deepened my understanding of accessibility challenges but also fueled my passion for creating inclusive designs. It has shown me the vast potential for improvement in museum user experiences through further research and application of comprehensive accessibility standards.

Arrow up

Next up: Another Case study

Affirmation Studio App Usability- In the progress