Rocío Alvarado Posts

I set out to test a few components from the design system I was working on. These components were designed and developed with accessibility in mind, but I had usability concerns nonetheless. The testing was conducted by a user research firm with participants who had varying levels of blindness. Here’s what I learned: Clear Titles Help Navigation Users appreciated having clear, descriptive titles to help them quickly find sections of a webpage. Titles are even more useful when written concisely and in proper order. Assistive technology users often navigate through pages by jumping between titles, so making sure titles are…

To ensure accessibility is seamlessly integrated into your design system, it should be considered at every stage of production—from the system’s overall framework to every component and pattern included. Here’s a breakdown of how to achieve this: Colour Palette Start by ensuring the colour combinations in your design system meet sufficient contrast requirements for both textual and non-textual content, such as text, graphics, diagrams, and interactive components. Adopting clear visual guidelines serves as a foundation for all other design elements. Use tools that follow the Web Content Accessibility Guidelines (WCAG) 2.2 contrast success criteria (specifically 1.4.3 and 1.4.11) which can…

As an accessibility specialist, I have learned to view digital content differently from most people. I have studied the Web Content Accessibility Guidelines (WCAG) and continue to gain insights from its documentation. Along the way, I have accumulated experiences and knowledge that extend beyond these guidelines. I want to share some of them with you. Help people understand digital accessibility Many people confuse digital accessibility with access to a website or online platform. In reality, it is about making sure digital content is user-friendly for all users, regardless of their abilities or limitations. For many users with disabilities, digital content…

The toast is a dynamic way of displaying relevant and short information to the user. The toast terminology refers to the slice of bread that comes out of a toaster. Just like the real thing, the digital version frequently has a popping out effect and is activated following a user interaction. Appropriate usage This component can potentially be used in two different ways. The first way is to show non-critical information, meaning that the content of the toast is trivial and doesn’t affect the user’s flow. The second way of using this component is to present critical information. This type…

A pagination component is a way to divide related content into different screens or pages. It consists of a series of links of numbered pages. Many iterations of this component are unfortunately not accessible to users with disabilities. Let’s look at the techniques to make any pagination the best experience for all users. Appropriate usage The pagination component is practical when a list of items is too long to display sequentially on a page. It will reduce the page loading time and make navigating through its multiple pages or screens easier. Expected interactions This component has many considerations to ensure…

If you are familiar with fairytales, you may have heard the German fairytale about Hansel and Gretel, siblings that venture deep inside the woods. In a version of this story, they create a trail by breaking off pieces of bread so they can find their way home again. Similarly, the visual pattern called the “breadcrumb” or “breadcrumb trail” allows users to keep track of their present location in relation to the website’s architecture and navigate through the parent pages. In other words, it displays the page’s hierarchy and helps users find their way home. A horizontal list with a symbol…

The card pattern is a collection of elements that include an image and other related content. It’s called a card because it usually looks like a playing card. There have been many iterations of this component with variant degrees of success. This component can be deceiving to implement while respecting accessibility standards and best practices, and we usually see more misses than hits. Let’s look at what you can do to make the Card pattern work for everyone. Appropriate usage This pattern has the purpose of displaying a collection of related content. It is ideal when each content is unique,…

One component we see quite often is the hamburger menu. It is composed of three short and thick horizontal lines. The symbol is called a hamburger because it roughly resembles the three layers of a hamburger: the bottom bun, the meat patty, and the top bun. Where did this hamburger come from? What is its purpose? Let’s look into this component and examine its usability. A brief history of the hamburger menu The hamburger menu symbol was first seen in the Xerox Star workstation in 1981. It was part of an applications menu. It was used to add any secondary…

When including all users into the scope of a digital project, project managers and product owners need to have a good understanding of what makes a product accessible and of the wide range of users that accessibility serves. Product management The United States General Services Administration offers a guide that lays out the essence of what a product manager needs to get started on accessibility. It includes the basics of accessibility, a quick reminder of diverse users that a final product may have and ideas to work on within the flow of a project. Shift left The concept of shifting…

Do you love design, and web design? Looking into accessible design? Here are some resources that will help you understand the importance of accessibility and how you can leverage these practices into your own work. After all, design is about people, and good design is inclusive and accessible. Inclusive Design Microsoft published this site about Inclusive Design a few years ago, and remains a must for anyone looking into design. The inclusive toolkit manual offers simple principles that will broaden your perspective and help you serve more people. Users with disabilities It is very helpful to learn about the users…