Search box is shown essentially everywhere to all visitors, it makes sense that you should spend some time making it look nice, right?

Menu photography by @sunrisephotography

To celebrate this year's Global Accessibility Awareness Day (GAAD) I started working on one of my 2021 goals, write more technical notes on eCommerce accessibility.

I will start making an assumption that not a single eCommerce website can live without a search box. It should allow users a way to discover products & categories. Easier than the menu sometimes.

But what makes a search box actually useful? Let's dive in.

Let's build a search box component that allows you to type characters. and as user types, results are automatically updated showing the top X related products . …


One of the most important and detailed pages in eCommerce website.

Product Detail Page components by Yieldify

Any online buying online will tell you that it’s important to know everything there is to know about a product before purchasing it. And when you are running an eCommerce website, you want everything to be as easy as possible for your customers.

The page where you find the information of a product is called the Product Detail Page (PDP). But, what exactly is a product detail page, and what makes it effective? How can we break it into components?

The product detail page is a web page on an eCommerce website that provides information on a specific product. This…


A series of articles that will focus on the specific technical aspects of eCommerce accessibility

A person purchasing online using a Tablet
A person purchasing online using a Tablet
Photo by Brooke Lark

Accessibility in any context means access. Providing accessibility is the practice of ensuring there are no barriers that will stop anyone — regardless of disability or need — from accessing, interacting, using and benefiting from something.

COVID-19 has forced many businesses make digital transformations and move to a faceless operation. It might involve a new operational model or changes in the current operation like Curb Side Pickup.

Done properly this could be a great opportunity to reduce the access gap for many that require digital interactions to access information / products.

eCommerce allows products from every corner in the world…


Photo by rawpixel on Unsplash

A detailed description on how to convert an anchor into a button.

During my latest project implementation, the front end team grew from two developers to ten in less than a year. As the team grew, many new members faced the same problem over and over again: when trying to develop interaction, some of them used <button> and some used <a>.

With some CSS & JS, any developer is capable of styling an element to look like a button. A<div> or a <span> can be used, but the most common approach is to use the <a> element. …

Hector Osborne Rodriguez

CPACC Certified Accessibility professional, front end development, a11y advocate, casual gamer, sleight of hand rookie.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store