Now that the holidays are over and we are into the new year, many people may consider a gym membership for a healthier start to the new year. Gym and fitness center websites are among the many businesses doing great things regarding digital accessibility.
For this blog, I share some of the biggest obstacles I found last year and highlight some positive accessibility-related design changes. I hope to showcase progress while providing ideas to companies struggling with digital accessibility.
I explored four gym websites, two national chains, and two local private gyms. As always, my narrative will focus exclusively on screen readers because I am a blind technology user.
Web Accessibility Examples on Fitness Websites: Issues with images
One major problem I discovered on almost every site I visited in the past was a need for alternative text. Many gyms advertise their facility using pictures that display details on the gym's various amenities. Without text descriptions, it becomes impossible for a visually impaired individual to obtain necessary information about the size of the gym space, the types of equipment available, and the age and cleanliness of the facility.
While most sites list amenities, these lists need to provide more detail. For example, the site may state that the gym has 15 treadmills. More information is required, especially when all treadmills are unequal, and features vary significantly from model to model. In these cases, the gym relies on the pictures of the treadmills to convey details to consumers. When these pictures have no accompanying text descriptions, it is a very frustrating experience for screen reader users like myself.
The other image-related issue I found was that the images overlapped with on-screen buttons such as "continue," "explore plans," or "sign up."
Though I could detect these buttons with my screen reader, I could not activate them because the overlapping image would confuse my focus cursor. Instead of selecting the spoken button, my screen reader would activate the image, which did nothing but bring up a useless context menu with options for resizing and sharing the picture. This problem made it almost impossible to navigate the site successfully.
Web Accessibility Examples on Fitness Websites: Membership fees
I needed help finding the membership price on several sites. After consulting a sighted user, I discovered that the price was displayed in a small box using heavily stylized numerals. The size and color of the numbers varied from plan to plan, depending on the price. Unfortunately, these price text boxes are not screen reader detectable. I could not access the monthly fee, essential when considering membership.
Web Accessibility Examples on Fitness Websites: Captcha Verification
Many sites require the user to complete a captcha verification to confirm their authenticity. The standard captcha form on most websites offers an audio version of the challenge that allows people with visual disabilities to type in the words they hear in a short audio clip. However, a few of the gym sites I visited did not offer an audio version. At this point, I couldn't proceed.
Web Accessibility Examples on Fitness Websites: Promotions
Most gyms offer promotional deals to bring as many customers as possible. On some sites, I received pop-up dialogue boxes that prompted me to click a link to view the current promotion. Once I clicked the link, the site redirected me to a page with promotions and deals. Unfortunately, once I got to the promotion page, the only thing that my screen reader would say was "image."
My theory is that since the promotions are temporary, the gym uploads a picture of a paper flier to the site. Another possibility is that the promotion information is an inaccessible PDF. Either way, I needed help learning about the promotion details- it was a dead-end for my screen reader. I found this commonly happened on the websites of smaller local gyms.
Revisiting Accessibility on Fitness Websites - Improved Descriptions
From an accessibility standpoint, one of the most significant issues on gym websites has always been the excessive reliance on images to convey crucial details about the gym’s features. Any text descriptions are generally vague, using relatively meaningless phrases such as “Our Gym Space Includes Twenty Treadmills, Twenty Stair Walker Machines, and Thirty Weight Lifting Stations.” As a potential customer trying to choose one gym over another, these indistinct descriptions provide no real value because they contain no information on the age, feature set, and condition of the mentioned equipment or the size and type of the space in which it is placed. Instead, pictures are used to convey these pertinent details.
After reexamining some gym websites, I found that this is slowly changing. On the two smaller local gym sites I visited, there were relatively detailed text-based accounts highlighting some of the essential features of the physical gym space. While these descriptions were imperfect, they at least went into more detail than just stating the number of each type of equipment offered. Here is the best example I encountered.
“Our gym facility has three rooms. The first room contains all our electrical gym equipment, including treadmills and elliptical machines, Wi-Fi and Bluetooth connectivity, and smart workout support. The second room holds all of our weight equipment and manual workout machines. This room sports padded walls, floors, and several big-screen televisions. The third padded room is used for our workout and personal training classes.”
While this description cannot replace alternative text image captions, it at least provides some meaningful information that may compel me to select one gym over another. For example, the electrical gym equipment supports Wi-Fi and Bluetooth, indicating that it is relatively new. Detailed facility descriptions like these are becoming increasingly prevalent on gym websites, an incredibly positive change in digital accessibility.
Improved Accessible Design to Compare Price Options
Most gyms offer several plan options with price, duration, and scope variations. One of the valuable features of exploring gym plans online is the ability to conduct side-by-side comparisons. Traditionally, this feature has been underutilized by screen reader dependents because of the inaccessible way the comparison details are displayed. Common design practice uses tables and columns to compare and contrast the various options. Screen readers usually cannot interpret these comparison tables correctly, leading to a clunky and confusing experience. Luckily, gym websites have found a better way to handle plan comparisons. The plan comparison design was based on two of the four gym sites I explored.
Along the top of the page were four selectable checkboxes labeled:
- “Price,”
- “Duration,”
- “Features,” and
- “Facility usage time per month.”
Below these four options was a menu pop-up button that invoked a drop-down menu containing two options, “Display High To Low” and “Display Low To High.”
If I select the “price” check box, for example, it will display the list of plans with the price as the first text item in each listing. If I filter using the “Low To High” option, the plan with the lowest price will appear at the top.
Likewise, if I select the “Features” display option and the “High To Low” filter, the page will show the plan with the most included features at the top. This plan comparison design is intuitive and is a tremendous positive change in accessibility.
Proper Labels On Membership Signup Text Fields
One of the most frustrating issues I encountered the first time I researched fitness websites was unlabeled text fields.
When I examined the four sites for this blog, I was glad to find that every text field I came across was correctly labeled. For example, the number entry field was announced as “Enter Ten Digit Phone Number.” This improvement allowed me to easily, quickly, and efficiently breeze through the membership signup process. This is super important because many gyms require or strongly encourage customers to purchase an online membership before visiting the physical gym.
How to improve web accessibility on your fitness website
To conclude, I want to share my brief set of helpful tips and pointers that can hopefully aid gyms in improving their digital accessibility.
1. Always include alternative text image descriptions for pictures that inform customers about the features and amenities of your gym experience. Details on amenities are helpful because many gyms compete on qualities of the workout experience, such as the types of equipment offered, the machinery's age, and the gym space's size.
2. Never upload text-based materials such as promotional fliers to the website as image files because these documents will not be accessible to screen reader users like me. Instead, add the data to the site as plain text.
3. Pay particular attention to fonts and stylization. The visually pleasing design and accessibility are not mutually exclusive. It is okay to embrace stylistic creativity as long as the final product complies with digital accessibility standards.
4. If accessibility work seems too large, consider engaging an external accessibility partner. Accessibility partners can significantly help a company by providing expertise, resources, and accessibility solutions.
5. Gather and consider user feedback because real-world assistive technology users may be the best to detect accessibility barriers to full digital access.
81% of people with disabilities don't feel welcome. Let's change that.
I want to note that I exclusively cover screen reader accessibility in this post because I am a blind technology user. I am also one of 61 million adults in the US living with a disability. Unfortunately, research from Lakeshore Foundation, a nonprofit organization specializing in sports science for athletes with disabilities worldwide, found that 81% of people with disabilities do not feel welcome in fitness spaces.
While exploring several gym websites, I found persistent obstacles and encouraging advancements in digital accessibility. Issues like inadequate alternative text for images, inaccessible membership fee displays, deficient captcha verifications, and inaccessible promotional materials have been highlighted. However, amidst these challenges, there are noteworthy improvements.
Gym websites are gradually adopting more descriptive text-based content, implementing intuitive plan comparison designs, and ensuring proper labeling on signup forms. Emphasizing the importance of accessibility, fitness businesses must prioritize inclusive design practices guided by standards such as the Web Content Accessibility Guidelines (WCAG) 2.2.
By embracing accessibility, gyms can enhance customer experiences and make fitness more welcoming to everyone.
This is a post by our guest contributor, Michael Taylor. This post reflects his opinions and experiences. Read more about Michael and some other posts on his experience online here.
