Ingenium Website Redesign for Accessibility

There are many ways that visitors can face barriers to access within museum spaces. Geographic barriers can prevent people outside your region from accessing content that only exists within the physical museum walls, people may not be able to access experiences because of accessibility requirements that are not being met, and in this new COVID-19 reality, Ingenium—like many other institutions—experienced a huge shift to digital. It was therefore key that our website have a strong backend built for accessibility and usability to support all of the new content coming online. We wanted all visitors to our website to feel included and empowered to explore and engage, and accessibility was key in this regard.

In October 2020, we began our first phase of a multi-year project to make improvements to our website with the goal of creating a highly accessible and inclusive website. Our previous redesign from 2017 to October 2020, focused on transitioning to Drupal 8, shifting to our new Ingenium brand, updating the aesthetic to a more modernized one, and improving the user experience (UX) for the general public. While this latter group continues to be a secondary audience for these new phases, our primary focus is improving our website for people who are blind or low vision and co-creation is at the heart of this. We had some ideas about accessibility based on web standards and best practice, but we wanted to validate our assumptions and ideas with real users, and discover new areas for improvement. To set a base of knowledge for ourselves, we did some online secondary research about how screen readers work, what international standards and best practices exist, and read what web development and design professionals who are blind or visually impaired had to say. The bulk of what we learned, however, came from our collaboration with the Canadian Council of the Blind (CCB). This relationship has provided us with the amazing opportunity to learn more about the frustrations that people with vision impairments experience when browsing the Web. These conversations and user testing sessions have allowed us a more empathetic connection to our audience and resulted in a redesign that is more accessible and usable for a more diverse audience.

For this project, we took a continual improvement (agile) approach – designing, testing and iterating, continuously. While our external web firm built for WCAG 2.0 best practice, user testing proved in some instances that—although technically accessible—we needed to go above and beyond to create something that was both highly accessible and user-friendly.

As demonstrated in our video, some of the areas of improvement we focused on for this phase were:

  • Building awareness with internal stakeholders on best practice for ALT text writing for all content they submit to the internal web team.
  • Working with internal stakeholders and our internal branding and production team to ensure that all images moving forward have no text baked in to be more accessible for people with low vision, people using screen readers, and Google search engine optimization (SEO).
  • Working with internal branding and production to create a set of web-logos and colours that are WCAG 2.0 colour contrast compliant (see Image Menus example below).
  • Better organization and grouping of elements including reading order for screen readers.
  • An alternate image slider/carousel for screen readers that is more highly accessible than the component that users who are sighted use. This is a component that required much consultation and testing with the CCB until we arrived at something that we were happy with.
  • Menus without hover features, and that work better with screen reader controls.
  • Clear labels encoded for all links, logos, and buttons.
  • Aria label changes to ensure the filtering experience in our Education section of the website is more user-friendly for people using screen readers.

By the end of this project, some key takeaways include:

  • If your intention for the product does not match the real-life outcome that your visitors demonstrate upon using it, that’s an indication that the design needs improvement. This needs to be considered for all users. For example, designs are often grouped and organized by colour and spacing to help with the intention of allowing people to find information they want, quickly. The same intention should be applied to visitors using screen readers. Hence, clear groupings and labels should be used so that information can be jumped to quickly using a screen reader, making it not only accessible but more user-friendly. (This is explained further in our video section about headers).
  • It’s okay to render intention differently for different user needs if it results in more accessible outcomes. Some things are not one-size-fits-all and we should be pushing for equity, not just equality. For example, after having discussions and testing sessions with the CCB, it was found that a list worked better than an accessible Image Slider component to convey the same information to someone with a screen reader. (This is further explained in our video section about Image Sliders).
  • Accessible solutions have the power to improve an experience for users with and without access needs.

As we strive for transparency and openness, we will be sharing all of our findings with the broader community so that they can take our lessons learned and apply them to their own websites. While we are proud of the work completed in this first phase, Ingenium recognizes that there is still more work to be done and we are already planning our next two phases for website improvement.

Links and Other Information:

Example 1: Page markup

Ingenium Webpage mockup annotated with accessibility notes in purple for the developers

Webpage mockup annotated with accessibility notes in purple for the developers. Numbers indicate screen reader reading order, dashed lines indicate grouped items, and heading levels (H2, H3) and alt text are labelled. This was used to guide and assess the development and functionality of various components on the page.

Example 2: Menus

Side-by-side comparison of menus found on the Ingenium website including the Canada Agriculture and Food Museum in green, Canada Aviation and Space Museum in blue, Canada Science and Technology Museum in Red, and Ingenium in dark grey.

Side-by-side comparison of menu context snippets found on the Ingenium website. Logo placement and colour choices aimed to present a consistent, accessible, and distinguishable presence of our three distinct museums and overarching organization. Colours for the menus were selected to match each museum’s logo – with Ingenium’s being a neutral tone – and also to ensure WCAG 2.0 AA colour contrast compliance of 4.5:1 for text.