The Accessible Museum Project

The content below is from the site's archived pages.

Our project is designed with the goal of being able to translate the experience design that exists within the museum walls, to that of the online infrastructure. We believe that by creating a series of best practices for the online experience, we can extend the museum mission, and bring the education that the museum has to offer to a broader audience. In order to make this happen, we are creating a series of best practices that are designed for museum and creative professionals. We are using the Metropolitan Museum as a starting point, so that we can learn the fundamental tools and approaches that can be extended to other cultural institutions.

Executive Summary

This resource details how to incorporate web accessibility best practices earlier on in the development process. The physical museum experience is at the heart of any museum’s public mission, as it changes the way individuals engage with works of art and cultural history. At the moment, this mission does not extend itself to the online museum environment. These best practices will not only create elegant code, but they will affect the way that screen readers process data. As it exists today, the code that is processed by screen readers is incredibly chunky and incomplete, and this resource hopes to reimagine that approach.

Development & Code

There are lots of elements in the coding of a website that can be leveraged to make the online experience more engaging for those with different types of disabilities. There are a lot of web accessibility best practices that exist today. We believe, however, that these best practices are solely focussed on retrofitting—the practice of trying to make something accessible after it has already been built. Not only is this practice incredibly time consuming and expensive, but it also creates a less than equal experience for those that are disabled. Our goal is to demonstrate how these best practices can be brought into the start of a project, and carried on throughout the coding and development process. Taking Advantage of ‘ALT ‘ tags The ‘alt’ tag is part of the code used for all types of images on a website. We believe that it is important to use this functionality, particularly throughout the collections section of a cultural institution’s website. This means that all images should include equivalent alternative text in the markup. If the ‘alt’ tag isn’t provided for images, the image information is inaccessible to people who use screen readers that read aloud the information on a page. When alt tag content is provided, the information is available to everyone. It’s also available to technologies that cannot see the image, such as search engines. Here is an example of what this code looks like: Error! Filename not specified. We believe that this functionality should particularly be used to place physical descriptions of the objects that are part of a cultural institution’s collection. This is particularly important, as it can help individuals get a better sense for the object they have navigated to.

When sites are tasked with responding to client/customer/user requests, it's important to use state-of-the-art help desk functionality - currently Zendesk - to ensure that every request is fulfilled within a reasonable amount of time without burdening the system operators. To customize this functionality always engage the best Zendesk support, and do it early. Automation is the key to handling large numbers of support requests by managing the queue and providing admin with the tools to respond quickly, and effectively.

Information Architecture

The structure of information in the coding for a website is also extremely important. As screen readers read almost all of the markup in its entirety it is helpful to design the content so that the most important information will be at the top. This level of thoughtfulness will prevent the user from having to listen to every element of the code. Most of the focus on Web accessibility has been on the responsibilities of web developers but in this case it is very important that UX/UI and web developers work closely together with creating the accessible content tab functionality.

Icons

As part of our best practices, we’ve designed a series of icons that are intended to be situated at the top of a web page. These icons are hot links that allow a user with disabilities to be able to tailor their web experience based on their needs. We believe it essential to have this positioned towards the top of the page as it prevents users who are using tools such as screen readers, or mouth sticks, from having to sift through a mountain of information before they are able to affect their usability.

Designing for Screenreaders

Screenreaders are predominantly used by those whom are blind or visually impaired. This tools reads all of the data that is built into the code. Since these tools pick up on every detail in your code it is important to be conscious of the best practices for designing for them. Listen to your code Debugging is every developer’s biggest enemy and can prove to be one of the most frustrating parts of their job. There are excellent developer tools that help with this process, but as part of our best practices we believe that it is important to use screen readers to actually listen to the code as you are building it. This practices allows the developer to really see Designing for Screenreaders 8 what the flow of information is like and perhaps redevelop alternative information structures, and it can also prevent lots of retrofitting after the fact.

DIVs vs. Tables

Over the last few years, developers have moved from making table-based websites to div-based websites. And that transition has drastically improved the experience for those who rely on screen readers. Previously, a screen reader would say something like “table, name, main content”. As part of our best practices, we encourage the use of divs and paragraphs in the code, as these elements are not transcribed by a screenreader. This shift in code will ensure a much smoother reading process for the user.