Fitbit.com
Accessibility Audit
In this report, we describe how the Fitbit website conforms to the Web Content Accessibility Guidelines (WCAG). We also identify areas for improvement. Our evaluation found that while this sites has some accessibility issues, it does offer some ease of access.
During the evaluation and redesign, three unique WCAG 2.1 criteria were evaluated for each of the following pages:
Home page
Products page
Checkout Page
Based on this evaluation, the reviewed website pages need to meet WCAG 2.1, Conformance Levels A, AA, and AAA.
About the Report
In order to determine whether web accessibility conforms to compliance standards, a combination of
semi-automated tools such as WAVE, ANDI, and LERA and a Manual Review by an experienced professional is required.
This report contains evaluation results based on evaluations conducted on the following date(s):
01/20/2023 to 01/22/2023.
Since then, there may have been changes to the website.
Evaluation Background
If the test FAILED
Before Redesign
If the test PASSED
No Redesign Required
After Redesign
Scope of Evaluation
Scope of the Website Fitbit is an American company that specialises in consumer electronics and fitness. It produces wireless wearable technology products and related software, including activity trackers, exercise monitors, and heart rate monitors.
WAVE v3.2.2.0
ANDI
LERA
Manual Review
Tools Used
Home Page
WCAG criterias evaluated for this page are as follows:
2.1.1 Keyboard - WCAG 2.1 A Success Criterion
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
Note 1
This exception relates to the underlying function, not the input technique. For example, if using handwriting to enter text, the input technique (handwriting) requires path-dependent input but the underlying function (text input) does not.
Note 2
This does not forbid and should not discourage providing mouse input or other input methods in addition to keyboard operation.
Analysis
Issues Identified
When used keyboard for navigation, the dropdown menu on the homepage such as products, technology etc. do not open and thus refrain the users from accessing those dropdown menus making it totally inaccessible for users using input devices other than standard pointing devices such as a mouse. The 2.1.1 Keyboard Success Criterion is also violated in that not all menu option headings on the home page can be navigated through the keyboard. In navigating through the menu options, the option linking to the account sign-in page (highlighted and outlined in red, below) is skipped over. The focus goes straight from the “Motivation” option to the checkout page (represented by the shopping cart icon).
Status
Home Page FAILED this criteria
The solution to address this issues could be making the items on the global navigation menu such as Products, Technology, Motivation etc. keyboard focusable. Doing so would help users using non-standard pointing devices for navigation and the user would be able to interact with all the top level menus as well as the nested navigations making the website more accessible for them. We propose a solution in which the entire main menu, consisting of headings and icons at the top of the Home Page, can be navigated through the keyboard interface, including all items on the dropdown menu. Also, we would want to make sure that the focus is visible so that the position of the pointer can be determined by the user clearly. So, the obvious solution would be adding a focus element on each of the item in the top-level as well as dropdown menu in the list to address this issue.
Proposed Solution
3.3.6 Error Prevention All - WCAG 2.1 AAA Success Criterion
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
The home page passes this criteria, as an input error is automatically detected and the email is not sent on the invalid email ID. Instead, proper suggestions were provided to the user to make them aware what went wrong and why the email was not sent to the email ID.
Analysis
Status
Home Page PASSED this criteria
Products Page
WCAG criterias evaluated for this page are as follows:
2.4.1 Bypass Block - WCAG 2.1 A Success Criterion
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Analysis
Issue Identified
The Products Page on the website has the navigation bar and heading graphics/content provided on every web page when you scroll. Screen readers repetitively read the header information for each page. Similar is the case with keyboard going over the same links multiple times. The lack of a means to skip to the main content of page violates the Bypass Block Success Criteria.
Status
Product Page FAILED this criteria
In the redesign, we add an option to directly skip to the main content of the page by adding a button to serve the purpose. This shall help bypass the redundant information. The proposed solution allows the user the flexibility to not skip the content as well, if that is their preference. Providing this option to bypass blocks of content effectively addresses the issue. In the redesigned version, a button at the top of the page provides users with the option to “skip to main content”, bypassing the content in the navigation bar.
Proposed Solution
2.4.4 Link Purpose in Context - WCAG 2.1 A Success Criterion
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
Analysis
Issue Identified
Social Media icons lack a link text that identifies the purpose of the link without needing additional context. Users are unable to understand the purpose of each link to decide whether they want to follow the link or not.
Status
Product Page FAILED this criteria
In our redesign, we solve this issue by using descriptive titles that describe the content of the linked-to item. It enables the user to know what content is being linked to and thus avoids any confusion or disorientation as a result of it. For example, if a user was looking at an icon with text that said “Twitter”, they would immediately know what the icon represented without needing to look further into the site or search for additional information about what the icon means. This underlying text embedded within each icon effectively addresses the issue.
alt=”facebook” or aria-label=”facebook”
alt=”instagram” or aria-label=”instagram”
alt=”twitter” or aria-label=”twitter”
alt=”pinterest” or aria-label=”pinterest”
alt=”youtube” or aria-label=”youtube”
Proposed Solution
2.4.8 Location - WCAG 2.1 AAA Success Criterion
Information about the user's location within a set of Web pages is available.
Analysis
Issue Identified
The Location Success Criterion is violated here. While the user is on the Products page, there is no indication via the navigation bar about their current status on the page. The screenshot below shows what a user would see on the Products page, lacking highlights, underlines, breadcrumbs or any other indication.
Status
Product Page FAILED this criteria
Proposed Solution
We propose a solution in which the page that the user is on within the Fitbit website (their location) is underlined. This can easily be done using the same design style that already exists in other contexts on the page, such as when the user hovers their mouse over any menu option. This emphasis indicates to the user the page that they are currently on, and therefore addresses the issue.
In our redesigned page, the word “Products” in the main navigation bar remains underlined while the user is on the Products page. To maintain consistency and simplicity of design, this is the same underlining that appears when the user hovers their mouse over any menu item.
Checkout Page
WCAG criterias evaluated for this page are as follows:
1.1.1 Non-Text Content - WCAG 2.1 A Success Criterion
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
Analysis
Issue Identified
In the Checkout page, when a product is listed in a user’s cart, the image of the product does not have any label or accompanying text. There is no alternative for screen reader users as the image is simply glossed over.
Status
Checkout Page FAILED this criteria
Proposed Solution
Our proposed solution embeds a text description of the image, indicating the name of the product pictured. This information can subsequently be read aloud for screen reader users. Providing this alt-text to the image on the checkout cart addresses the issue making it accessible for users using screen readers.
In the redesigned version, text describing the image is embedded within the webpage so that it can be provided to users who cannot view the image.
alt=”FitBit Sense 2 Smartwatch”
or
aria-label=”FitBit Sense 2 Smartwatch”
2.4.7 Focus Visible - WCAG 2.1 AA Success Criterion
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Analysis
While using a narrator/screen reader, “Remove” or “Add” options are audible. Although, there is no visible focus on them while navigating. So, it is keyboard operable but not visible.
Issue Identified
Status
Checkout Page FAILED this criteria
Our proposed solution will place a focus on certain elements on the Checkout Page that previously did not indicate where the focus of the keyboard was when the user navigated through the page.
In our redesigned page, the “Remove” and “Add” options on the Checkout Page are encircled to help indicate focus when the user is interacting with those items.
Proposed Solution
3.3.6 Error Prevention All - WCAG 2.1 AAA Success Criterion
For Web pages that require the user to submit information, at least one of the following is true:
Reversible: Submissions are reversible.
Checked: Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
Confirmed: A mechanism is available for reviewing, confirming, and correcting information before finalizing the submission.
Status
Checkout Page PASSED this criteria
Analysis
The checkout page passes this criteria, as an input error is automatically detected and the incorrect inputs are not accepted. In addition, the users are given proper suggestions to inform them of what went wrong and why the inputs are not being accepted.
In conclusion, the accessibility audit of FitBit.com has revealed a mixed picture. While the website did offer some level of accessibility ease, the overall conformance to necessary accessibility standards was not met. The audit identified significant shortcomings and barriers that hinder the website's ability to provide equal access and usability to individuals with disabilities.
Despite initial efforts to enhance accessibility, it is clear that the website falls short of the required accessibility standards. This failure to meet necessary accessibility conformance is a cause for concern. It not only potentially limits access to valuable health and fitness information for individuals with disabilities but also raises legal and ethical considerations regarding compliance with accessibility regulations.
Moving forward, it is imperative that FitBit.com addresses the identified accessibility issues and takes a more comprehensive and inclusive approach to web design and development. Implementing accessibility best practices and complying with relevant standards such as the Web Content Accessibility Guidelines (WCAG) is not only a legal requirement but also a step towards ensuring that everyone, regardless of their abilities, can benefit from the services and resources offered by FitBit.com.
In the spirit of inclusivity and ensuring equal access for all users, it is recommended that FitBit.com invests in accessibility improvements and regular audits to meet the necessary accessibility conformance and provide a user experience that is accessible to a wider range of individuals. This commitment to accessibility is not only a legal obligation but also a testament to the core values of inclusivity and diversity.