If you're a website owner, developer, accessibility advocate, or simply someone interested in creating more inclusive online experiences, this blog post is a must-read. In this narrative, I delve into the journey of purchasing a gym membership from a popular local gym, focusing on accessibility for screen reader users.
I highlight positive and negative accessibility points encountered along the way, offering valuable lessons and takeaways for improving website accessibility. Whether you want to enhance your website's accessibility, advocate for inclusive design practices, or simply gain a deeper understanding of accessibility challenges, you'll gain insights into my experience as a blind screen reader user and leave with practical guidance to implement on any website.
Who Should Read This Blog
-
Website Owners and Developers: Those responsible for creating and maintaining websites should read this article to understand the importance of accessibility and how to improve their websites to accommodate users with disabilities effectively.
-
Accessibility Advocates and Professionals: Individuals advocating for digital accessibility or working in accessibility-related fields can gain insights into common accessibility issues and solutions, helping them advocate for better accessibility practices.
-
Business Owners and Managers: Owners and managers of businesses with online presences should understand the impact of accessibility on user experience and potential customer reach. They can use this information to ensure their websites are accessible to a wider audience.
-
User Experience (UX) Designers: UX designers can learn to incorporate accessibility principles into their designs to create more inclusive and user-friendly websites for all users.
A Summary of My Experience Purchasing a Gym Membership
This blog post recounts the experience of attempting to purchase a gym membership online, explicitly focusing on accessibility for screen reader users.
-
Widget Woes: The website featured an accessibility statement and an accessibility widget, but the widget offered limited functionality for screen reader users. However, it didn't significantly impede the browsing experience.
-
Terrific Tables: The plan comparison page utilized tables with clear row and column headings, facilitating easy navigation for screen reader users. However, unlabeled images at the beginning of each table row presented a minor issue.
-
Accessibility Annoyances: Minor accessibility issues were encountered during the process, such as redundant button labels and unlabeled form fields. While these didn't prevent progress, they highlighted areas for improvement.
-
Rapid Review: The final screen for reviewing entered information was straightforward, although a redundant label on the "Purchase Membership Plan" button was noted.
-
Conclusion: Despite minor accessibility issues, the overall purchasing process was broadly accessible. The experience underscores the importance of prioritizing accessibility and addressing both significant barriers and minor annoyances to create a more inclusive online environment.
Gym and Fitness Website Accessibility: Widget Woes
Upon launch of the site, I began exploring the home page using manual keyboard navigation. Two things stood out to me right away. For one, the site contained an accessibility statement, which gave me some hope that the overall accessibility of the experience may at least be passable. While accessibility statements by no means guarantee compliance, they, at a minimum, show that accessibility is on the company’s radar. The other thing that I noticed was that the site utilized an accessibility widget.
Contrary to what one may think, these widgets can lead to a worse accessibility experience than the one provided by the stock website. Offering little more functionality than the ability to adjust visual screen attributes such as background color and text size, accessibility widgets do nothing for screen reader dependents like myself.
The good news is that on this particular site, the accessibility widget stayed out of the way and did not intrude on my browsing experience. This is a stark departure from some other sites I have used on which the screen reader keeps announcing the widget button repeatedly, interrupting and hurting my experience.
Gym and Fitness Website Accessibility: Terrific Tables
The home page's most prominent call to action button was “Explore Our Plans.” I activated the button and was taken to the next screen. The plan comparison page comprised a series of tables displaying the plan name, price, duration, and billing frequency, including features and perks.
I was pleasantly surprised that the tables were very easy to navigate. Row and column headings were clearly labeled in the code, so my screen reader’s default table navigation commands worked flawlessly. I was able to obtain all of the necessary information that one would need to compare gym membership options effectively. I did encounter one minor problem.
At the beginning of each table row was an unlabeled image announced as “Graphic.” I have no idea what the photos depicted. Any image key in conveying important visual data must have an alternative text description for screen reader users. For a longer explanation on alt-text, check out my previous blog, Image Alt Text Best Practices For Web Accessibility.
My Gym Website Experience with Accessibility Annoyances
The next few steps of the process went generally well. Any accessibility issues I encountered were minor annoyances rather than major blockers. At the end of each table row after the plan details were a “Purchase Membership” button. I selected the plan that interested me the most and activated its corresponding call to action button. The next page prompted me to choose my preferred gym location since the business has several in my area. The gym locations were organized in an accessible list that responded well to manual navigation. I chose the first one because it is the closest to me. Activating the option automatically brought me to the next screen.
I was asked to sign up for any additional personal training classes I may be interested in. A selectable radio button check-box delineated each option. I activated the choice marked “No Additional Training” and set my screen reader to navigate by button only to find the “Next” button. Here is when I encountered one of those minor annoying issues.
The “Continue” button was labeled “Continue Button Button, Clickable.”
While redundant and technically incorrect, this label did not negatively impact my experience. Next, I was prompted to input my personal contact and billing information.
All but one text field was labeled correctly. The field for the credit card CVV security code had no audible marker. However, I have entered payment details into a website so many times that I memorized the process and knew that the CVV most likely came directly after the expiration year. While only a minor accessibility bug in my use case, it may present more significant challenges for those less familiar with standard web forms.
Before My Membership Purchase: A Final, Rapid Review
The final screen presented all of the information I had entered for review. A text blurb also announced that a membership card would be mailed to the billing address provided. Confirming the listed information was easy using arrow essential navigation. At the bottom of the page was a button labeled “Purchase Membership Plan Button, Button.” Besides the redundant labeling, there were no real accessibility flaws.
My Overall Impression of this Website, Business, and My Experience
I was happy with the accessibility of this process. While there were still a few issues, they were minor and did not affect my ability to complete the task. This shows that it is tough to have a perfect website regarding accessibility. This being said, ensuring that the significant accessibility blockers are ironed out will help provide a seamless experience for assistive technology dependents like myself.
I've written specifically about my experience on fitness websites in the past; you can read that post here, Web Accessibility for the Fitness industry (Guest Post). There are many takeaways from this experience that can be valuable even if you aren't a gym or fitness organization.
The Top 5 Takeaways That Apply to Any Organization's Website
-
Prioritize Accessibility: Make accessibility a fundamental aspect of your website design and development process. Consider the needs of all users, including those with disabilities, from the outset.
-
Accessibility Statements Matter: Including an accessibility statement on your website demonstrates a commitment to inclusivity. However, it's essential to ensure that this commitment translates into practical accessibility features and improvements.
-
Avoid Redundant Features: Accessibility widgets or features should enhance the user experience for all users, including those with disabilities. Ensure that such features do not create unnecessary distractions or interfere with assistive technology users' browsing experience.
-
Tables Require Proper Coding: When using tables to present information, ensure they are correctly coded with clear row and column headings. This allows screen readers to navigate the content seamlessly and access the information effectively.
-
Address Minor Accessibility Issues: While significant accessibility barriers should be prioritized, addressing minor accessibility issues can improve the overall user experience for individuals with disabilities. Pay attention to redundant labels, unlabeled images, and missing form field markers to enhance accessibility comprehensively.
A Valuable Website Journey for Many Types of Readers
In this blog, I've done my best to provide an in-depth look at the accessibility challenges I faced as a screen reader user when purchasing a gym membership online. I've discussed the impact of accessibility widgets, the ease of navigating tables, and the importance of addressing minor issues like redundant button labels and unlabeled form fields.
Whether you're a website owner, developer, or accessibility advocate, I hope I've provided valuable insights for creating more inclusive online experiences.
If you want to prioritize accessibility on your company's desktop website, mobile website, or mobile app but aren't sure where to begin. UsableNet can help. Get started with a free, 15-minute consultation- book now, or download our e-book to understand what to expect on your accessibility journey.
Editor's Note: Our frequent contributor, Michael Taylor, wrote this post. This post reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.
