Even though people with visual impairments often shop in physical grocery stores, online shopping provides a much more efficient experience in many situations. Kroger has recently developed a program called ClickList, which allows customers to shop online and then pick up their groceries without ever entering the store. I started using ClickList when it entered my area during the Beta phase of the service and I've found it invaluable. ClickList has now been integrated into the main Kroger website and the site has seen some major changes since its introduction. For this article, I will be exploring the accessibility of the online shopping site as well as the mobile shopping experience which was recently included in the Kroger app. Primary testing took place using the Firefox web browser paired with the NVDA screen reader, with secondary testing using JAWS paired with Firefox and Internet Explorer. Mobile testing was primarily performed using VoiceOver on iOS but secondary Android testing using the TalkBack screen reader was also included.

Getting Started with ClickList

To shop ClickList, you must first create a Kroger account. From the Kroger website, you can find a link that will allow you to do this just under the heading titled either "Shopping Cart" or "ClickList Shopping Cart." An option to sign into an existing account is also located here. In the app, there is a button in the top left of the "Home" tab where you can either sign in or create an account. The resulting form is preceded by a heading for easy navigation when signing up from the web; as with most apps, the form is the only content on the page if you're creating an account through the mobile app. You must provide a zip code so that Kroger can find local stores near you. Note that not all stores will have ClickList; only one of the three near me has ClickList available, but I can select any of the three during this step. If you don't know if ClickList is in your area, you can use the store locator to find out. In addition to selecting a store, you must also include your name, email address, and your Kroger Plus Card. If you don't have a Plus Card, you will have the option to create one from the account creation page.

Accessible Shopping on the Kroger Website

There are several methods for finding products to add to your cart after signing into the Kroger website. A search field appears just below the Kroger logo close to the top of the page. Just below the field is information about your store and the ability to reserve your pickup time. Following that is an expandable menu containing store departments. Once you choose a department, you can find sub-departments under a heading further down on the page. Note that, conveniently, the cart is always visible no matter what page you are on so you can make adjustments without leaving the page. Main page content such as products or sub-departments appear below the cart under their own heading. A heading called "Start My Cart" will appear on the landing page after signing in and when selecting a sub-department from a department's page. Below this heading you will find various products listed, with those that you have purchased recently at the top. Headings for "Sale Items" and "Recent Purchases" follow. Like the "Start Cart" heading, the "Sale Items" heading prioritizes those products you have purchased previously.

Above any list of products, no matter if they are from a department or a search, you will have filtering options. Each of these is preceded by a heading. The options available are category, brand, and nutrition. The category filter only works correctly when you have searched for items. If you are viewing products by sub department, the categories filter will display all the available departments at your selected store and the number of items in each. If you search for products, only categories containing the products of your search will be displayed. In addition, the categories appear as links so that only one can be selected, while both nutrition and brand use check boxes for options. The brands and nutrition filters also will provide a search field so that if many are available, you can find the specific choice you are looking for more quickly. The filter options can be collapsed and a screen reader will report this correctly, though the content of the filter will remain available to the screen reader even if you have closed it.

Each product entry begins with the product's image followed by the price. The product name follows as a heading and can be activated to display product images and details. Following the product title is the weight or size of the item with buttons for adding the item to the cart or to the shopping list just below. After adding an item to your cart, its "Add to Cart" button will disappear and be replaced with buttons to increase or decrease the quantity and a quantity edit field in the list of products. A product's detail page includes images of the product from different angles. In my tests these images were labeled so you could determine what side of the product was depicted. Some products include nutritional information or ingredients though this was not true for all. For products that include this information, separators were included that aided screen reader navigation.

Checking Out on the Kroger Website

To check out, you must first select the "View Cart" button located just after the last item in your cart. From here, you will choose your pickup time and indicate if you would like to receive substitutes on out-of-stock items. When you do this for the first time, it's possible to miss the substitution options as they are situated further down on the page from the Checkout button. Once you select the Checkout Now button, you will be taken to a page where you can complete your contact information and determine if you would like to receive text message updates about your order. In my experience these come in the form of a reminder message a few hours before you are scheduled to pick up your items. The subsequent page contains a form for entering your payment information. You can select to have Kroger remember your card for faster checkout on subsequent visits. The following page will contain a summary of your order. Your cart items are hidden by default but you can choose to have these shown if you wish. You cannot make changes here but links are provided to make edits to any aspect of the process. Once you choose to submit your order, you will be presented with a confirmation page that also contains a short FAQ regarding the pickup process as well as other aspects of the program.

Shopping Using the Kroger iOS Mobile App

The Kroger app on iOS uses a tabbed interface with the bulk of ClickList features in the Home tab. The home page somewhat resembles the desktop site. At the top of the page is a search field where you can search for products. Below this is a carousel of ads. VoiceOver seems to see multiples of each item, which gives the impression that the carousel is cycling if you attempt to swipe past it. You must touch the elements above or below the carousel to continue navigating efficiently.

Below the carousel is information about your ClickList store and delivery time with options to change both. Following these are the product categories "Sale Items," "Start My Cart," and "Coupons." Unlike the website, these are not labeled as headings. Each section displays a few products with the option to display more if desired.

It is possible to search for products using the app but I could not determine a way to view products by category/department using the app. When you search for products, only the search results are displayed on the screen. Just below the search field are options for viewing either products or Coupons with products selected by default. The app lists the number of items for products and coupons here as well. Products are each listed using two elements. The first is the name of the product, aisle, price, weight, and other details with the second being an "Add to Cart" button. If an item is already in your cart the "Add to Cart" button will be replaced with text alerting you to this fact. It is possible to filter your results by category, brand, or nutrition. To do so you must locate the Filter button. This appeared at the bottom of the search results; I found that the fastest way of finding this was to touch the Home tab and then swipe backwards from it.

If you would like to adjust the quantity of a product or add instructions, you must activate the product's name to do so. This adds an extra step compared with having all product options available on the main page of search results, but the fact that there are far fewer elements per item means that navigation is much faster when using a screen reader.

Checking Out Using the Kroger iOS App

Your cart can be found from the Cart tab located at the bottom of the screen. From here, you can see all of the products in your cart arranged by aisle. Each item appears as a single element with all information such as weight and price contained in the element's label. The quantity of the product is also listed. To make changes, you must activate the product's name where you can adjust quantity and add instructions for the item if desired. A search field is situated at the top of the cart page to make it easier to find items if you have many items in your cart. I would have preferred the quantity to be placed earlier in the list of information for each product or placed as its own item. Having to wait for VoiceOver to read the entire label for each product before I could check the quantity was time consuming.

At the bottom of your cart you will find a "Checkout" button. The checkout page follows a similar process to the website. At the top of the page you will see an element labeled "Pickup" selected followed by your store address. Next are the date and time options. These appear as plain text with the selected option shown as "Selected." The contact information edit fields are situated directly below the time options on the same page. There was an item labeled "Checked" with information on text message alerts below. I gathered that this is similar to the checkbox on the website for choosing if you would like to receive alerts, though the item in the app appeared as plain text and I could not change its status by activating it. Selecting "Continue" will bring you to a page where you can review your cart and choose if you would like substitutions for out-of-stock items. Before this, I was also presented with a screen explaining that my store did not have some of my items and I was given a chance to find other similar items before continuing. Activating each item took me to a screen where I could replace the item. Some items such as coffee had suggestions on what replacements were available but others did not.

Continuing from this page took me to the payment screen; here I was asked to enter my password again for added security. The payment screen is similar to its website counterpart. If you have a saved card it will be available, but if you do not, you will be presented with the fields for entering your card information. The only hiccup I encountered in this process was selecting a state; the combo box for choosing this doubles as an edit field so you can type the first few letters of your state and it will be automatically entered in the field. To actually choose the state you must activate the "Return" button on the keyboard. The app will inform you that the state has been selected. After entering your card details, you can submit your order. After submitting, you will get a confirmation page containing further information about the pickup process.

Picking Up Your ClickList Order at Kroger

You can pick up your ClickList order any time during the hour window you have selected. At the Kroger store, there will be a series of signs guiding you to a specific area for ClickList. There are a set of numbered parking spaces where you can park to await your order. Once in the ClickList area there will be a sign with a phone number for the ClickList department in the store. I found that I was able to get the number using the Short Text channel of the Seeing AI app. When you call the ClickList number for your store they will confirm your name and your space number. When the agent brings your groceries to the vehicle, they will verbally review any substitutions with you and provide you with a printout of your order, which contains information on any item changes. If you wish to have a record of your actual order after substitutions, you can find a listing of your purchases and their actual prices in the Order History section of the website or app.

The Bottom Line

I was impressed with the level of accessibility that Kroger has incorporated in both the website and mobile apps. Strategic use of headings and images provide efficient navigation on the website and all form fields, buttons, and graphics were labeled both on the site and in the app. Screen readers can announce updated totals for the items in your cart when you make changes though the accuracy of this was not always perfect. In addition to using the iOS app, I performed some testing using the Android app and found that it mirrored the iOS experience closely and had a similar level of accessibility. The only issue I encountered was when entering text into certain edit fields on the website. Some fields, such as email address fields, will attempt to alert the user that a complete address has not been entered yet. An error in how screen readers interpret this means that every time you type a letter, your screen reader may say "Alert." This also occurs when navigating to fields that can cut off the screen reader's announcement of the field's name or content. This issue only occurs when using a desktop screen reader. If you have any issues with using ClickList with a screen reader, Kroger has provided a hotline that you can call: 1-800-576-4377. Using ClickList usually includes a $4.95 fee, but Kroger gives you the first couple of ClickList orders free so it is possible to evaluate the service to determine if it will meet your needs. With their ClickList program, Kroger has expanded access to the convenience of online grocery shopping to a wider audience while also creating an exemplary accessible online shopping experience for those with vision loss.

Comment on this article.

Related articles:

More by this author:

Author
Aaron Preece
Article Topic
Product Reviews and Guides