Web Design for accessibility

Screen Shot 2018-10-25 at 1.11.00 AM

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.

Website Link

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:

  • Search
    • Audit feature, usability study, propose the redesign
  • Online collection
    • Idea/process to sustainably generate descriptions of the work
    • Work with content team to define needs
  • Ticketing & Admissions
    • User-centered design methods
    • How to incorporate accessibility from the start

Team: Chian Huang, Cherisha Agarwal, Srishti Kush

Instructors: Claire Kearney-Volpe & Gus Chalkias

Research

  • WebAim – Wave Report
  • WCAG – Web Accessibility Guidelines
  • Observations – Insights from Gus

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.

1.png

Findings

WCAG prioritizes different feature on different levels. Using the WCAG guidelines, we defined priorities of different features in a way demonstrated below –

SEARCH

SEARCH.png

COLLECTION

collection.png

TICKETING

ticketing

Client Insights

  • Database is pretty extensive and hard to organize
    • Audio description not available of many collections
  • Deliverables
    • Visual redesign of their website – in progress
    • Wireframes – follow their current visual theme
    • HTML snippets expected – to show the functionality
  • 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:
    • Most people browse the web using mobile phone
    • Screen readers like JAWS and VoiceOver are not user-friendly
    • Most users preferred to use search instead of navigating using screen readers
    • People with low vision preferred not to use screen readers but zoom their screens

1-1024x381

2-1024x381

3-1024x381.jpg

test1

test2Implementation

SEARCH
Current situation:
-Tabs is hard to be recognized by the screen reader
-No image description

Improvements:
-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

Improvements:
-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

Suggested ticketing page for MET page
– Text reduced and concised 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:

Invision prototype

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

Collection video

Ticketing video

Next Steps

  • Improve home page load time of the website
  • Speech to text implementation for forms and search
  • Occurrence of errors to be clearly communicated to users
  • Complete payment process by voice assistance only
  • Built-in Artificial Intelligence to make search and collection process easier
  • More multimedia presentation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s