Freestyle Photo Accessibility Evaluation

INTRODUCTION

This report describes the results of an accessibility evaluation conducted on FreestylePhoto.biz.

Also provided in this report are recommendations for bringing Freestyle Photographic Supplies into compliance with the World Wide Web Consortium’s Web Accessibility Initiative (W3C WAI) for Web Content Authoring Guidelines (WCAG), version 2.1. The WCAG can be found at this URL.

Below is a summary of the project goals and scope.

Project Goals

The goals of this project were to conduct an accessibility evaluation of FreestylePhoto.biz using three evaluation methods:

1. Automated code inspection: Through Automated Code Inspection, a program or software scans the site’s code, compares it against rules, and determines if the code fails, meets, or exceeds accessibility guidelines. Although Automated Inspection is thorough, it does not account for context and cannot determine all aspects of accessibility such as ALT tag content or page layout and navigation.

2. Manual code inspection: Manual Code Inspection puts an accessibility expert’s eyes on the code, and covers the more qualitative aspects that the Automated Code Inspection might have lacked.

3. Experience walkthrough: In the Experience Walkthrough, we evaluate the site from the perspective(s) of various disabled users, and step outside of the code. This might be using keyboard navigation, voiceover assisted swipe navigation, or voice assisted services, although each, and more, should be completed for a thorough evaluation. We employed three criteria for the experience walkthrough: How well the site supports use of assistive devices such as screen readers, the degree to which the site is navigable without a mouse or trackpad, and whether the pages allow a visitor with disabilities to understand where they are and what they can do.

Scope

This evaluation covered the following areas of the site: The website homepage (https://www.freestylephoto.biz/), a product page (https://www.freestylephoto.biz/1748417-Kodak-TMAX-100-ISO-120-Size-5-pack-TMX) and the Holga Page from the main navigation (https://www.freestylephoto.biz/holga-cameras).

BACKGROUND

Some initial background information on disabilities, assistive technologies, and the Web Content Accessibility Guidelines will assist in understanding the findings and recommendations outlined in this report and has been provided below. ChadCo. Studio would encourage readers to educate themselves on these valuable topics through a variety of online sources.

What is a Disability?

A disability is any impairment that limits an activity that is attempting to be accomplished.

Types of Disabilities

There are several types of disabilities:

• Visual – low vision or blindness.
• Mobility – deficiencies affecting motor skills.
• Auditory – ranging from partial hearing loss to total deafness.
• Cognitive and Verbal – ranging from hereditary, injury-related, or disease-related deficits.
• Temporary – a short- or long-term deficiency that isn’t considered life-long.

Prevalence of Disabilities

Over 20% of the U.S. population have some form of disability. That equates to 55 million people. Additionally, according to the World Health Organization, around 15% of the world’s population is affected by some type of disability. Older populations seem to face higher rates of disability and are more affected.

What are Assistive Technologies?

Assistive technologies is any tool (software or hardware) that allows people to overcome their disabilities or assists them with a task. Some examples of assistive technologies might be voiceover assistants, predictive text when typing, a prosthesis, or a Braille input-output keyboard. There is a wide variety of assistive technology available, and each of the many types of disabilities we discussed might benefit from a range of assistive technologies.

What are the Web Content Accessibility Guidelines?

The Web Content Accessibility Guidelines (WCAG) are a series of web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium, the main international standards organization for the web. The WCAG are a set of recommendations for making Web content more accessible. It is intended primarily for people with disabilities but is leaning more towards application to all Web-connected devices, such as mobile phones and tablets.

Principles

There are 4 main principles, or overall goals for the WCAG. They are:

1. Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
2. Operable – User interface components and navigation must be operable.
3. Understandable – Information and the operation of user interface must be understandable.
4. Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

Each of the Principles contains a list of guidelines that support it and is described in greater detail in our full listing of results, available in the appendix.

FINDINGS & INSIGHTS

SUMMARY RESULTS – AUTOMATED & MANUAL CODE INSPECTION

FreestylePhoto.biz has not passed WCAG checkpoints at all A levels, and some additional failures have been discovered at the AA and AAA level. Most failures seem to be in relation to offering the appropriate/additional amount of information to non-sighted users, such as appropriate headings, roles, and labels. Furthermore, there were several failures in the realm of navigation for non-sighted or keyboard/voiceover users, lacking clarity, information, and appropriate experience for them to properly navigate the website.

An example of Inspection Results (fig. 1) Full list available in appendix.

EXPERIENCE WALKTHROUGH – SUMMARY RESULTS

VISITORS’ EXPERIENCE USING ASSISTIVE TECHNOLOGIES

After attempting to use FreestylePhoto.biz with the MacOS VoiceOver screen reader, and via keyboard navigation, we concluded that people who use screen readers or who do not use pointing devices such as a mouse or trackpad will experience an incredibly difficult time navigating the site and purchasing products. We don’t make this claim lightly. However, while conducting the experience portion of the accessibility audit, we encountered issues that were severe enough to severely frustrate, and possibly inhibit every potential user who is relying upon screen readers or keyboard-only navigation. The critical and severe issues are summarized in the table below and elaborated on in subsequent pages.

Table of Issues Deemed Critical or Severe (fig. 2)

EXPERIENCE EVALUATION

What Do Visitors Using Screen Readers Initially Experience?

Users of screen readers are initially placed in the upper left portion of the screen as expected. Swiping through the site generally follows the top-left to bottom-right focus structure, with some exceptions as listed in our summary results.

One of the main issues we found with our experience evaluation was that the primary navigation of the site consists of 82 individual elements and is not properly grouped to allow for screen reader users to bypass this section. The user must swipe through each element in order to get into the main content of the page. This is true for all pages that contain the primary navigation, which is the majority of the website.

Next, we found some issues and inconsistencies with focusable elements. Some elements that were not visible on screen were given visual focus indication. There were also elements such as dashes and hyphens, which provide visual separation, but should not be announced as a focusable element.

Additionally, descriptions of images were lackluster at best (when they were provided at all.) Several images were announced simply as “camera” or “film” without any additional description or context of the visual being presented.

Finally, and very importantly, proper feedback and expectations were not followed, particularly in regard to the purchase experience of the product pages. The Add to Cart button did not give indication of success and placed the focus of the page back in the top-leftmost corner (the website logo), leading a user to swipe through most of the page (including the 82 navigation elements) to find the visual indicator of successful product addition.

What do visitors using only a keyboard experience?

Our findings of the keyboard navigation user’s experience are nearly paralleled to the voiceover user’s experience.

Keyboard nav users are initially placed in the upper left portion of the screen as expected. Tabbing through the site generally follows the topleft to bottom-right focus structure, with some exceptions as listed in our summary results.

Again, one of the primary issues we found with our experience evaluation was that the primary navigation of the site consists of 82 individual elements and is not properly grouped to allow for keyboard nav users to bypass this section. The user must tab through each element in order to get into the main content of the page. This is true for all pages that contain the primary navigation, which is the majority of the website.

Next, we found some issues and inconsistencies with focusable elements. Unlike the screen reader experience, where non-visual elements were given visual focus, for keyboard navigation users, the visual focus disappeared altogether at various portions within the experience. This led to a loss of place within the page and caused much confusion, as it was difficult to regain location or know when tabbing would again display proper placement.

The product purchase experience was less of an issue as compared to the screen reader experience, since visual indication of success could be seen. Focus did, however, jump to the top-leftmost corner of the page and remove the user from the main body of the purchase flow.

RECOMMENDATIONS

Automated and Manual Code Reviews

It is our recommendation that all WCAG Level A Guidelines be remedied as swiftly as possible, to allow greater accessibility and overall usage of the site, while adhering to acceptable web standards, limiting the likelihood of potential litigation or loss of consumer base.

Following the enhancements recommended by adhering to WCAG Level A Guidelines, it is recommended that a development process be established to address the remaining Level AA and Level AAA Guidelines, respectively, as time and budgets permit.

Experience Walkthrough

It is our foremost recommendation that the primary navigation section of the site be properly grouped into an overall navigation element, and individual subcategory elements, to allow screen reader and keyboard navigation users a more accessible experience throughout the site. Additionally, a hidden “skip to main content” element may be added, allowing screen reader users the option to skip the navigation dilemma entirely.

It is further recommended that screen readers be able to announce clearly crafted descriptions of images, links, and buttons, while properly indicating the status and implication of those buttons, especially in the purchase flow.

All focus elements throughout the site (for screen readers and keyboard navigation users alike) should be audited and addressed as necessary for proper display, announcement, and expectation.

Like the Level A Guidelines mentioned above, it is recommended that all Experience Elements labeled Critical be addressed as soon as possible, with the Severe and Moderate element fixes to be implemented swiftly after, as time and budgets permit.

General/Overall

It is further recommended that additional user testing be performed, especially in the areas of global site navigation and product purchase experience and expectation, to determine user-centered and accessible designs for these critical portions of the site’s experience.

ACCESSIBILITY PLAN

As part of our evaluation, ChadCo. Studio developed an Accessibility Plan for Freestyle Photo that outlines the accessibility promise, needs, initiatives, and success criterion through the four key phases of accessibility management (Initiation, Planning, Implementation, and Management.) An example from this document is available in fig. 3 below, and the full plan is available in the appendix.

Example of Accessibility Planning Documentation (fig. 3)

APPENDIX

Full Freestyle Photo Accessibility Report (PDF)
Accessibility Plan for Freestyle Photo (PDF)