What we have learned from working on digital accessibility

At Mercado Libre, we started a process to offer an accessible product and we would like to share what we have learned.

Guille Paz
Published in
6 min readNov 3, 2021

--

Read the story in Spanish.

Digital accessibility is the inclusive practice that seeks to ensure free access to the web and native applications for all people, through a design that allows them to freely perceive, understand, surf the web and interact with the content.

Part of our DNA is to improve and iterate products, so we started a continuous process of learning and awareness to ensure that digital accessibility is present when building experiences and interfaces.

The starting point

The first efforts to improve the platform accessibility were driven by different people who individually aimed at raising awareness about the issue through talks and by sharing best practices. Over time, the topic of accessibility started to gain ground and as more people became interested, a Workplace group and a Slack channel were created with the goal of centralizing knowledge and sharing experiences.

The pandemic has unveiled barriers and opportunities for improvement: during 2020 we received feedback from people who could not use the platform effectively. This helped accelerate part of the process and helped us confirm that obstacles come from the way we think, design and build our products.

This is how we saw the need and the opportunity to create a team within Frontend Platform, transversal to all IT teams, to work with a focus on accessibility. Given the dynamics of IT work, we thought of a multidisciplinary team with people from UX (design and user research) and development (web and native).

The first step was to define our mission and a series of objectives based on Diagnosis, Awareness and Execution that allowed us to start organizing the work.

We support the design and development of accessible products by removing access barriers and creating solutions that work for all people.

The first tasks

It was clear that we had to learn about accessibility and understand where we were standing. We defined a series of tasks to start and move forward at the same time:

  • learning about accessibility,
  • raising awareness in the IT team,
  • gathering information about flows to understand where we were,
  • building our accessibility capability.

Learning about Accessibility

We took different online courses and workshops (W3C, Udacity, MDN) where we learned that accessibility issues go beyond technical issues or code. It is necessary for the different roles that define a product to be familiar with the subject and to work as a team in all the development stages in order to ensure greater accessibility.

Another great lesson was that there are no magic solutions that make accessibility better. It is important that the bases are accessible in order to make a solid and scalable construction. At this point, we realized that we had to come up with a solution that would solve the current problems. For example:

  • the contrast of colors (mainly the use of grays)
  • the lack of focus when navigating using a keyboard
  • the elements that are not correctly enunciated by the screen reader (as was the case with prices)
  • the images without an alternative text.

These solutions were also intended to avoid future problems.

We modified the grays to have a palette with better contrast.

So, we started working with specialized consultants on the subject to continue learning from them and to work together on the following tasks.

Raising awareness in the IT team

It is important that everyone on the team knows and has the tools to create experiences focusing on accessibility. In order to learn about the different profiles that will rip the benefits of accessibility, we held an internal awareness workshop aimed at understanding in a practical way the most common barriers, the proper use of assistive technologies when browsing the Internet, and the tools available to validate accessibility.

We also created a list of online courses and resources for the different profiles and are working on an initiative to continue raising awareness on a larger scale.

Gathering information about flows to understand where we were

Our product ecosystem has a large number of flows. We started to gather information about the e-commerce purchase flow by performing manual tests on the web platform and then expanding them to the native world of Android and iOS. An audit was performed for each of the screens that are part of the flow, and a backlog generated to work with the different teams.

These actions allowed us to learn the importance of manual testing with people who have disabilities so as to ensure that the solutions applied make the right impact. Automated testing is an excellent tool to understand if we are following guidelines and best practices, but it does not guarantee that the experience is accessible.

We fixed the focus status of elements when browsing the Internet from a keyboard.
We restored focus to original position after closing modal.
We solved the problem with the navigation of the drop-down elements in the navigation bar.

Once the problems were listed, we began to understand the best way to solve them and learned that there are differences in the screen readers as there may be instability for some of the solutions applied.

Building Accessibility Capability

As we went along and understood the problems, we realized that most of them could be solved with our Design System: Andes UI that provides the UI definitions and components to build consistent and quality digital experiences with agility.

One of the problems we found is that most of the interfaces we built use Andes and the components were not accessible. We carried out an audit for each of them and created a backlog we are working on to solve the problems. In this way, we will be offering components such as Dropdown, Modal, Tootip, Carrusel, among others that will allow us to build more accessible experiences from the very beginning.

Collection of the components we are working on to improve their accessibility.

It is important to make our situation visible and each team should be able to give an account of this issue. That’s why we started building a monitoring service that performs automated analyses to complement the manual tests and ensure constant accessibility.

Conclusion

We know that we still have a long way to go and a lot of work ahead, but we are certain we are on the right track and have the best company.

Our challenge is to make our sites and applications more accessible. If you’re interested in joining us, you’re welcome!

Are you working on accessibility? What have you learned?

--

--

Guille Paz

👨‍💻 Frontend Web Developer |⚡️Web Performance Lover | 💼 Principal Engineer at $MELI | 📝 https://blog.pazguille.me | 🎮 https://xstoregames.com