Museum Website Accessibility

Rijksmuseum website

Enhancing the Rijksmuseum Experience: Elevating Accessibility with WCAG Standards

A detailed accessibility audit and redesign of the Rijksmuseum website, focusing on improving the user experience through WCAG standards and inclusive design principles.

Timeline

April - May 2023

Process

WCAG Compliance, Web Annotation, Accessibility Audits, UX & UI Designer, Prototype

tools

Zoom, Figma, Google (Docs, Spreadsheets, Presentation, Excel), Adobe Creative Clouds

Team

Brianna Stamm (UX Writing)
Srishti Dokras (UX Designer)
Radhika (Me, UX Designer)

Problem Statement

Evaluate and address accessibility and usability gaps across the Rijksmuseum website to ensure alignment with WCAG guidelines and Dutch government requirements for public cultural institutions.

Solution

Combine accessibility audits, WCAG analysis, and web annotation to identify usability challenges, and transform findings into inclusive UX/UI prototypes that improve user experience and digital access.

Methodology Overview

A Structured Framework for Website Analysis

1

WCAG Compliance Review

2

Legal Context Analysis

3

Broader Usability Evaluation

4

Annotation of the Current Website

5

Redesign Proposal

6

Annotation of the Redesign

32 accessibility issues were identified

Accessibility Audit

What were the key findings?

The website generally complied with accessibility standards, but required a deeper assessment through WCAG compliance to identify deeper issues. Our design annotation of four pages showed that the website failed to meet several WCAG guidelines. These issues significantly impacted the overall user experience for users with visual, cognitive, and motor impairments.

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 appropriately labeled for clarity.

Operable: Users must be able to operate the interface.

Operable

Back button was provided for navigation.

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

Understandable

Primary language was identifiable & label texts were 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.

Reflection

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

The website's navigation is difficult to understand, lacking a predictable structure. Also, the logo doesn't link back to the homepage. Additionally, the visual design lacks the required contrast ratio for readability.

Redesign of the website navigation - 1
Redesign

The redesigned navigation features a logo used as a home button on every page, a consistent top navigation bar, and breadcrumbs for easier navigation, all placed on a solid background to enhance text contrast.

1b. Original Design

The hamburger menu had a confusing tab order, repeated items from the top menu, and was missing on some pages, making it inconsistent and redundant for the screen reader users.

Redesign of the website navigation - 2
Redesign

The hamburger menu was removed, and major site categories were added to the top menu, with a site map placed in the footer to support clearer, more accessible navigation. 

Website Navigation

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 makes content hard to perceive, with poor contrast from text placed over the images and distracting animations with no option to pause or stop.

Redesign of the visual imagery
Redesign

The redesign improves readability by using solid background to increase color contrast, replaces animations with static images and includes transcripts to make a video content accessible.

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

The lack of white space leads to tiresome scrolling, while decorative but distracting animated images of artwork zoom in and out within a dense grid layout.

Redesign of the visual imagery - 2
Redesign

The redesign introduces more white space and a two column grid layout to reduce scrolling and improve accessibility, particularly for users with physical disabilities.

 Visual Imagery

Interactivity of media

Original Design of the Interactivity of media
3. Original Design

The interactive elements were inconsistent, as the hero image was not reliably linked to relevant content and lacked clear indicators of interactivity.

Redesign of the Interactivity of media
Redesign

The redesign improves interactivity by using clearly labeled buttons that open specific related content, removing image links, and adding descriptive alt text for images.

WCAG elements of the redesign design

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

Perceivable

Alt text and video transcripts are added, and visual contrast is improved.

Operable: Users must be able to operate the interface.

Operable

Keyboard navigation is enhanced, and moving images have user controls.

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

Understandable

Navigation is made consistent across the site.

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

Robust

HTML validation is applied to ensure compatibility.

Reflection

Navigating Accessibility in Design: A Roadmap to Learning Success

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

I learned that evaluating a website’s accessibility without considering the needs of specific disability groups can lead to an incomplete review. The variety of these needs highlights the importance of conducting targeted accessibility assessments. My personal experience with deafness highlighted the challenge of creating designs that are universally inclusive or accessible.

This journey not only deepened my understanding of accessibility challenges but also fueled my passion for creating inclusive designs. It highlighted the significant potential for improving museum user experiences through the research and the application of comprehensive accessibility standards.

Next up: Another Work

Affirmation Studio- In the progress

Arrow up