Web accessibility is regulated by both WCAG (Web Content Accessibility Guidelines) and the ADA (Americans with Disabilities Act), ensuring that websites are accessible to individuals with disabilities. WCAG provides internationally recognized guidelines, while ADA is a U.S. law that mandates equal access.
For online stores, complying with these accessibility standards improves user experience and reduces legal risks by ensuring equal access to information and purchases for all customers.
Accessibility improvements apply to our app on all platforms and for all templates.
Here are the key improvements we’ve made to support accessibility in Searchanise.
Contrast
People with visual impairments, including color blindness or low vision, rely on sufficient contrast between text and background to read content clearly. Meeting contrast requirements ensures that all users can easily perceive information on the screen.
The texts and elements on the Instant Search Widget and Search Results Widgets (including Filters on collections/Smart Navigation) have been adjusted so that they meet the requirements outlined in WCAG 2.1.
Customizing colors for elements or backgrounds may impact the store’s contrast and, consequently, accessibility.
Several tools can help verify contrast levels, such as the Lighthouse extension in DevTools and WebAIM‘s contrast checker.
If you use light-colored Search Results widget templates (Big Pictures, Big Pictures Legacy, Modern) with default settings and some elements fail to meet the contrast criteria, ensure that the store background is light enough. You can set it to white using this custom CSS rule:
div.snize-search-results { background: #fff; }Feel free to contact our support team to assist you with the customization.
Keyboard navigation
Users with motor impairments or those who rely on a keyboard instead of a mouse need intuitive navigation to interact with websites. Ensuring full keyboard accessibility is essential for usability.
There is a standard list of keystrokes for common interactions, though some variations exist. For example:
- the Space and Enter buttons are used to interact with interface elements
- an element focus can be controlled using the Tab key (typically for buttons/links) or arrow keys (usually for list items).
Different store themes implement search inputs in various ways, making it challenging to adapt Instant Search Widget navigation to all scenarios. Due to this limitation, only arrow keys are available for the default ISW, while the Sticky Widget supports both arrow keys and the Tab key. Enabling the Sticky widget is the best solution to ensure smooth navigation.
Navigation within our widgets works as follows:
- Search Results widget (SRW): Use Tab to navigate.
- Instant Search widget (ISW) within the Sticky widget: Use Tab and Up/Down arrows.
- Instant Search widget (ISW) outside the Sticky widget: Use Up/Down arrows.
Customers can navigate any standard store page using the Tab key to the search input, where a screen reader will announce the presence of a list. They can then use the arrow keys or enter a search query. Inside the Instant Search widget, navigation is handled with arrow keys.
Screen reader support
Screen readers are assistive technologies that read webpage content aloud for visually impaired users. Proper screen reader support ensures that all interactive elements and product details are accessible.
Searchanise functionality often requires hiding the theme’s built-in search. This can cause screen readers to get confused between the hidden theme search and Searchanise Instant Search widget (ISW).
Some themes may add additional attributes to the search input, which could affect screen reader behavior.
Recommendations widgets have not yet been reviewed for accessibility standards. This feature is available for BigCommerce, WooCommerce, and Magento 1. It was deprecated on Shopify and remains available only for some legacy clients.
Responsiveness
Users accessing the store from different devices, including mobile phones, tablets, and desktops, rely on responsive design to ensure usability across all screen sizes.
Searchanise widgets are designed to adapt to different screen sizes and devices. However, an exception exists: resizing a desktop browser window to a mobile view is not supported. Widgets are optimized for full-screen mobile layouts when accessed directly from a mobile device.
FAQs
In Google Chrome, a clear (×) icon appears on the right side of the input field when entering a query, but it cannot be used with the keyboard.
This icon is a built-in browser feature and cannot be focused with the Tab key, as it is not a regular HTML element. To clear the search query, use Ctrl+A to select the text and press Delete.
