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.
Design Principle
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. These are the high level requirements:
- Component should be located on the header
- Should have a label & a magnifier icon
- Should have
default,:hover&:focusstyling - It should start showing suggestions after user has typed 2 characters. (this will be develop in part 2)
Basic Code
<form action="/search" method="get" role="search">
<button type="button" class="search-btn" aria-label="Search">
<svg focusable="false" class="search-icon">
<use xlink:href="#icon-search"></use>
</svg>
</button>
<input id="search" type="search" name="q" autocomplete="off" autocorrect="off" spellcheck="false" placeholder="Search" aria label="Search for products"/>
</form>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position: absolute;">
<symbol id="icon-search" viewBox="0 0 32 32">
<path d="M21.6 19.2h-1.264l-.448-.432a10.373 10.373 0 0 0 2.516-6.793c0-5.76-4.669-10.429-10.429-10.429S1.546 6.215 1.546 11.975c0 5.76 4.669 10.429 10.429 10.429 2.601 0 4.98-.952 6.806-2.527l-.014.011.432.448V21.6l6.8 6.8a1.686 1.686 0 0 0 2.383-2.384l.001.001zm-9.6 0a7.2 7.2 0 1 1 7.2-7.2v.01a7.19 7.19 0 0 1-7.19 7.19H12h.001z"></path>
</symbol>
</svg>
Wow, that's escalated quickly! Let's see what all this mumbo jumbo means.
Read the entire article in medium:
Search Box Part 1— eCommerce Accessibility
Top comments (0)