I will do something considerably different from my usual writing style in today's blog. I will attempt to narrate my way through interactions with a website, discussing both good and bad accessibility points. This method should help to illustrate how the topics I have spoken about manifest themselves. For this example, I will be shopping for a birthday gift for my sister. I have purchased a new, ultra-protective smartphone case from a reputable online electronics retailer. Like always, my discussion will specifically focus on screen reader accessibility. For reference, I am using a desktop system in this example.
Problems With The Email Pop-Up
Upon launch of the site from which I decided to shop, the site greeted me with the usual email sign-up pop-up dialogue. I entered my email for a fifteen percent off coupon code. Once I submitted my email, another dialogue box appeared, letting me know that my entry was successful. At this point, I tried to close the pop-up box and continue with the task. I quickly realized there was no screen reader-detectable button or link to exit the window. Both manual navigation and filtering by button or link turned up nothing. As a last resort, I refreshed the page. Luckily, the dialogue box disappeared, revealing the homepage of the site. This experience was a significant accessibility flaw that had the potential to prevent me from using the site.
Easy Browsing And Product Selection
Once on the home page of the site, I was quickly able to find the search option by using my screen reader's rotor to filter by text edit fields. I entered my search criteria, pressed the "Enter" key, and the site brought me to the results page. For reference, I was specifically looking for an ultra-protective iPhone case. I then began using manual navigation to move through the various results. So far, all of this was working flawlessly. I eventually settled on a case option that I wanted to investigate further. I was successfully able to navigate around the product details page, examining the item's text description, customer reviews, and common questions and answers. After deciding that I had found what I wanted to purchase, I set my screen reader to filter by button and quickly found the "Ad To Cart" option. This button and most others on the site seemed to have proper labels in the code, which is excellent for accessibility.
Challenges Selecting A Color
After I activated the "Add To Cart" button, the website notified me that I had not picked a color for the case. The site then displayed a small pop-up box with eight color options. The problem was that there was no text-based designation for each choice. A sighted user informed me that eight colored circles were on the screen in a small grid. The only thing that my screen reader would say when encountering each circle was "Graphic." The best way to proceed besides choosing a random color option was to seek the help of a sighted individual. This experience is a significant accessibility defect.
Smooth Sailing Through Most Of The Checkout Process
Once the item was in my cart, I activated the "Continue To Checkout" button, which was labeled correctly. I did not have an account with this particular company, so I decided to complete my order as a guest. Entering my name, contact information, and shipping address worked smoothly for the most part. All necessary text fields were labeled correctly, making it easy to zip through the various forms. After completing the information requested on each screen, the "Continue" button was not challenging to locate and seemed to be always labeled.
Stuck On The Payment Details Screen
My fluid movement through the checkout process abruptly ended on the payment method input screen. The first step in entering my credit card details was to select my type of credit card. For whatever reason, the row of credit card types was comprised of web elements that my screen reader recognized as "Image." Probably, the site used small graphics to denote "Visa, Master Card, American Express, etc." So, I resorted to using trial and error. I chose the first option and entered my card number, expiration month and year, and security code. When I selected the "Continue" button, the website notified me that the transaction failed because the card details did not exist in the database for that card provider. I then repeated this procedure but with the second credit card type. I had to enter the card number and other data again. On the third attempt, the system took my entry. I had finally selected my actual card type. This experience was clunky, time-consuming, and thoroughly inaccessible. After this frustrating process, I could finally review and submit my order successfully.
Learn about WCAG to improve the Accessibility Journey
I hope this story of my online shopping experience journey was fun and informative. This series aims to show how accessibility issues affect screen reader users in real-world field scenarios. I also believe it is helpful to illustrate assistive technology users' options when faced with an accessibility barrier like the ones I mentioned above. On the flip side, pointing out the refreshing, accessible design observed during a browsing session helps reaffirm the work of those doing accessibility right.
UsableNet is offering a free webinar on Weds, November 8th as 12 pm ET where you can learn about the latest criteria added to the Web Contact Accessibility Guidelines (WCAG), widely regarded as the standard for accessibility. Sign up for our free design webinar here.
