5 Lessons on our Path to Greater Website Accessibility

In 2020, our Studio launched a complete website redesign. We thought of everything: user friendly navigation, mobile responsiveness, visual design, fresh content, fun interactions…Everything!

A year later, we gave our website a refresh: bolder fonts, new photos, updated content.

Again, we were confident that we had thought of everything to deliver an engaging user experience.

Not only had we not thought of everything, but we had also not thought of everyone. Like so many others, we had not included web accessibility in the redesign brief.

Throughout hours of brainstorms and planning, we had forgotten to wonder what our website experience would be like for someone with an impairment such as:

  • Fine motor skills disability
  • Visual disability
  • Hearing disability
  • Cognitive disability

Today, we are humbly proud to announce that we have updated the backend and frontend of our website to meet the Web Content Accessibility Guidelines (WACAG) 2.1 AA level of conformance. 

We will continuously be making improvements to meet these guidelines. 

"As organizations start to look deeper into what it means to be Inclusive, they need to be humble and open to listening because being Inclusive isn't just one thing. And this is how Square Enix Montréal realized its website was the next step in its process to become more inclusive.
Taking time to learn on their own, asking experts and making changes to continuously create a more accessible website." Rodrigo Sanchez, Senior Accessibility Specialist, Square Enix

Screenshot of website with browser web development tool open showing alt text code. Alt text that conveys important information.

Our website has been updated with the following accessibility guidelines in mind:

  • Interactive elements and controls accessible via keyboard
  • Hierarchical heading structure
  • Images that convey important information include alternative text or a similar solution

 

Masthead image with improved colour contrast of text overlayed on video. Improved colour contrast of text overlayed on videos.
  • Colour contrast is, in most instances, at least 4.5:1
  • Important interactions and controls include additional aria attributes to convey additional functionality/behavior. 
  • Accessibility statement with email to contact our accessibility team if anyone encounters any barriers. 
  • To name just a few! 
Screenshot of website showing visible keyboard focus around an interactive element. Visible keyboard focus indicators around interactive elements.

To encourage others to prioritize accessibility as part of website creation or redesign, here are the highlights of our experience. 

Our top takeaways:  

  • Educate yourself 

Did you know that 1 in 25 people is blind or visually impaired or that 1 in 10 has dyslexia? Are you aware of the web accessibility issues faced by individuals with disabilities and how they can prevent them from accessing your information? If not, educating yourself is a great way to start defining your priorities.  

Here is a resource we found useful: https://www.a11yproject.com/checklist/ 

  • Get leadership support 

When we presented our initiative to the Studio leadership, the response was a resounding Go for it! You will need leadership support to dedicate people, time, and budget to your project. 

  • Listen to the experts 

At Square Enix, we are privileged to have an in-house team of accessibility specialists. Don’t go at it alone with the help of a Google search and enthusiasm. Accessibility experts and consultants can help you evaluate the project and develop a quality control process. 

 

Screenshot showing the addition of pause and play controls on a video. Addition of pause and play controls on all videos.
  • Be Patient 

Updating your website to comply with accessibility standards is a major undertaking. You’ll need to update hundreds of widgets, use ARIA roles and landmarks (when necessary), give your links unique and descriptive names, include proper alt text for all images, and more. Don’t be in a rush and give yourself a reasonable deadline! 

  • Embrace change 

When you audit your site for accessibility, you might realize that your colour scheme prevents certain users from reading your copy or that you need to add visual indicators to your design. Your aim is to make your content accessible to the greatest number of users, not to keep your pages exactly as is! Learn to let go for the greater good! 

 

 

This update is not the end goal; it is the starting line of an ongoing process to educate ourselves and keep up with standards and technology. 

As a company that prides itself on being truly value driven, we are now committed to ensure equal web access to everyone, regardless of disabilities. 

 

Thank you to our web development partner Yankee Media