The Metropolitan Museum of Art is one of the world’s largest and finest art museums. Its collection includes more than two million works of art spanning five thousand years of world culture, from prehistory to the present and from every part of the globe.
Web Accessibility for the Met
According to client brief, their website was not completely accessible and they wanted us to work on making it more accessible to people who are visually impaired. Our design brief included making the website accessible in three particular areas:
a) Search - Audit feature, usability study, propose the redesign
b) Online collection - Ideate/process to sustainably generate descriptions of the work and work with content team to define needs
c) Ticketing & Admissions - User-centered design methods and incorporate accessibility from the start
Team: Chian Huang, Cherisha Agarwal, Srishti Kush
Instructors: Claire Kearney-Volpe & Gus Chalkias
Research methods
a) WebAim – Wave Report
b) WCAG – Web Accessibility Guidelines
c) Observations – Insights from Gus (our professor)
During our research, we read about web accessibility to familiarize ourselves with web accessibility best practices and guidelines and also tried to work with screen readers like JAWS, NVDA and VoiceOver. Each screen reader had different navigation keys and features and it was quite inconsistent. We found the experience to be quite frustrating and were motivated to make this whole experience much better for users of the MET website in particular.
Findings
WCAG prioritizes different feature on different levels. Using the WCAG guidelines, we defined priorities of different features in a way demonstrated below -
Search
Collection
Ticketing
Client Insights
a) Database is pretty extensive and hard to organize - Audio description not available of many collections
b) Deliverables - Visual redesign of their website is in progress. The suggested we wireframe using their current visual theme and wanted use to provide HTML snippets to showcase functionality
c) Previous implementation design mockup was shared
User Testing
We interviewed 7 users about their comfort with screen readers and gave them three tasks to perform on the MET Museum website. Most common insights were:
a) Most people browse the web using mobile phone
b) Screen readers like JAWS and VoiceOver are not user-friendly
c) Most users preferred to use search instead of navigating using screen readers
d) People with low vision preferred not to use screen readers but zoom their screens
Implementation
SEARCH
Current situation:
-Tabs is hard to be recognized by the screen reader
-No image description
Current situation:
-Tabs is hard to be recognized by the screen reader
-No image description
Improvements made:
-Remove tabs with tags
-Move images to the right side of the description
-Added image descriptions
-Remove tabs with tags
-Move images to the right side of the description
-Added image descriptions
COLLECTION
Current situation:
-Image slideshow is hard to read for the screen reader
-Order of information could be changed
Current situation:
-Image slideshow is hard to read for the screen reader
-Order of information could be changed
Improvements made:
-Remove image slideshow
-Add artwork’s title above the image
-Move the order of some information
-Add audio & video to support the artwork
-Remove image slideshow
-Add artwork’s title above the image
-Move the order of some information
-Add audio & video to support the artwork
TICKETING
Current situation:
– Too much information and overflow of text
– Admission type confusing, age bracket unclear
– Quantity mechanism and dropdown not recognized by screen reader
– Form fields not specified as required, gives error when left blank
– Additional fields present which makes it harder to enter text
Current situation:
– Too much information and overflow of text
– Admission type confusing, age bracket unclear
– Quantity mechanism and dropdown not recognized by screen reader
– Form fields not specified as required, gives error when left blank
– Additional fields present which makes it harder to enter text
Suggested ticketing page for MET page
– Text reduced and concise to be clearer
– Admission type age bracket specified correctly for all tickets
– Quantity mechanism changed to be recognized by screen reader
– Required fields in form made more explicit
– Additional fields removed and made form more concise
– Dropdown changed to text entry to be recognized by screen reader
– Text reduced and concise to be clearer
– Admission type age bracket specified correctly for all tickets
– Quantity mechanism changed to be recognized by screen reader
– Required fields in form made more explicit
– Additional fields removed and made form more concise
– Dropdown changed to text entry to be recognized by screen reader
Prototype
We created a mock-up of how the web pages should look like by taking the above considerations into account. We redesigned the screens to demonstrate how the three areas – search, collection and ticketing could possibly look like. The link to Invision prototype of our mock-up is given below:
We also created a functional demo of the web pages in HTML and tested it out the with screen readers. Following are the videos of each of the category while using JAWS to navigate the different parts of the webpage.
- Search video of working HTML prototype
- Collection video of working HTML prototype
- Ticketing video of working HTML prototype
Next Steps
1) Improve home page load time of the website
2) Speech to text implementation for forms and search
3) Occurrence of errors to be clearly communicated to users
4) Complete payment process by voice assistance only
5) Built-in Artificial Intelligence to make search and collection process easier
